반응형 Project Project/final 2023. 9. 19. [9.16(토) 북스탁 프로젝트] 2차 멘토링 대대성공!! 칭찬일색 ~ 피드백 100% 수용했다! 하.... 저저번주 1차 멘토링때 부족한 점을 너무너무 많이들어서 ㅠㅠㅠ 이번 2차 멘토링이 걱정되었는데 결과는 대성공!!ㅎㅎ 너무너무 기쁜마음에 당장 티스토리를 열어서 기록중이다> 도서 판매사이트와 차이점이 매우 많이 필요함 판매자들이 붙었을때 어떻게 해결할 것인가. 사진을 보고? 물건이 어디가 찍힌게 있다 이런정보가 필요함 2. WBS 빠르게 6일 이내로 해결해야함 타이트하게 상세하게 정리해야함 url정의서, 테이블 정의서, 화면 정의서 3. API를 어떻게 할 지 쓸지도 알아서 써놓고 빠르게 정리 해둘 것 4. 목업 페이지 보여주는점은 좋았음. 그려가면서 팀원간에 같은 목표를 가지고 진행 할 수 있도록 함 5. 역경매 시스템에 대한 고민이 너무 얕다 판매자가 책을 올려야 한다 -> 입력하는 정보가 .. Project/final 2023. 9. 16. [9.15(금) 북스탁 프로젝트] 카카오 소셜로그인 구현 | 카카오 간편로그인API연결하기(node.js) 짜잔 부트스트랩을 한땀한땀 수정해서 만든 회원가입페이지이다. 드디어 조금 웹사이트같아졌다ㅎㅎ 요렇게 마우스를 올리면 노랑이로 바뀐다. 네이버 간편로그인도 연결해야하는데 카카오부터 ...하하 Node.js(백엔드 부분) const express = require('express'); const axios = require('axios'); 1. Express와 axios 모듈을 import한다. const app = express(); const port = 3000; 2. Express 애플리케이션을 생성하고 포트 번호를 설정한다. const KAKAO_OAUTH_TOKEN_API_URL = "https://kauth.kakao.com/oauth/token"; const KAKAO_USER_PROFILE.. Project/final 2023. 9. 14. [9.14(목) 북스탁 프로젝트] 도서 검색결과 페이지를 만들어보자 ~! 일단 주요기능을 보여주기위해 간단하게 CSS를 만들었다. 백단까지 연결되면 예쁘게 만들어볼 예정이다~! 헤더의 검색창에서 도서명을 검색하면 현재 북스탁에 등록되어있는 경매건들이 검색되어진다. 지금의 데이터베이스에는 경매건이 등록되어있지않기 때문에 일단은 const [books, setBooks] = useState([ { id: 1, title: '어린왕자', coverImage: 'http://placeholder.com/50x70', startPrice: '11,000', updatePrice: '9,000', userId: '닉네임', startDate: '2023-09-12', endDate: '2023-09-27', views: 10, interest: 0 } ]); useState로 임의로 초.. Project/final 2023. 9. 13. [9.13(수) 북스탁 프로젝트] 로그인 상태관리 | useAuth, AuthContext, AuthProvider, 헤더의 오른쪽 부분이다. 메인페이지에서 로그인을 안한 비회원일때는 SIGN UP버튼이 표시되고 로그인을 한 회원일 경우 MYPAGE버튼이 표시될 수 있도록 하는 기능을 구현하고자 한다. header const Header = function () { // 로그인 상태 저장 state // eslint-disable-next-line const [isLoggedIn, setIsLoggedIn] = useState(false); . . . { isLoggedIn ? ( MYPAGE ) : ( SIGN UP ) } isLoggedIn이 처음에는 false로 기본값 지정이 되어있어 signup버튼이 나오게 되고 로그인이 확인된 경우 true로 변경, mypage버튼이 나오게된다. signin const Sign.. Project/final 2023. 9. 6. [9.6(수) 북스탁 프로젝트 일지] 팀원의 하차, 메인페이지 목업제작, '역경매'에 포커스, 핵심을 잊지말자!! 좌 상단 헤더에 로고가 들어가고 가운데에 검색창 오른쪽에 순서대로 카테고리, 홈페이지, 마이페이지, 로그인/회원가입 아이콘을 삽입했다. 먼저 현재 진행중인 이벤트나 HOT경매, 컬렉션, 콜라보 등 회원들에게 다양한 정보를 제공할 슬라이드 배너부분을 부트스트랩을 사용해 구현했다. 그리고 아래에 현재 입찰수가 많이 이루어지고 있는 도서들을 보여줌으로써 북스탁에 대한 관심을 끌어모은다. 본문에 알고리즘을 활용한 추천 도서/ 실시간으로 업로드된(최신순) 경매 건을 보여준다거나 많은 의견이 있었지만 일단은 목업이고 중요 경매기능에 먼저 집중하기위해 최대한 단순화했다. 좋은 선택인 것 같다 ! 구매자,판매자가 제공해야할 정보를 적기 위해 API 조사 매너온도 시스템 → 책 페이지로 이미지화 네비게이션에 뭘 넣을까 .. Project/final 2023. 9. 4. [9.5(화) 파이널 프로젝트의 시작] 북스탁, 도서 역경매 사이트 제작을 시작하다! 생각보다 어려운 기획단계,, 처음에는 희귀 절판도서 역경매 사이트로 구상했으나 수요자가 너무 적을 것으로 예상하여 중고 도서 거래 + 도서 역경매 사이트로 변경하였다. 내가 만든 우리 프로젝트의 로고이다! 깔끔한 폰트와 신뢰감을 주는 청록색 컬러. 도서 수집의 시작. 이라는 슬로건을 임의로 작성해 넣었는데 팀원들도 만족해주었다ㅎㅎ ++ 로고를 수정했다 ! 이것도 내가 만든 로고 후보들 ! 왼쪽도 상당히 맘에 들었는데 색상이 네이버가 떠오른다며 패스ㅠㅠ 오른쪽은 비트코인같다고ㅋㅋㅋㅋㅋㅋㅋ Stock 이 쌓다는 의미 라서 로고에 표현하고싶었다. 그래서 쌓아져있는 책을 넣었다. 개인적으로 맘에 들었는데 좀 직관적이지 않아서 패스했다ㅠㅠ 오른쪽은 은근 팀원들이 좋아했는데 휴,, 저 희귀.. 골드.. 를 표방한 색이 마음에 들지 않았다ㅎㅎ .. Project/mini 2023. 8. 14. [바닐라JS] Todo List 만들기 - DOM 자바스크립트 예제 JS 코드 To-Do 항목 배열 및 다음 항목 번호 설정 const itemList = [ { no: 1, todo: "두부", done: false }, { no: 2, todo: "계란", done: false }, { no: 3, todo: "라면", done: false }, ]; let nextNo = itemList.length + 1; itemList To-Do 항목들을 객체 형태로 가진 배열. no (고유 번호), todo (할 일 내용), done (완료 여부) 속성. nextNo 새로운 To-Do 항목을 추가할 때 사용될 다음 항목 번호. To-Do 항목 렌더링 함수 function renderTodoItem({ no, todo, done = false }) { // 새로운 요소 생성 .. Project/mini 2023. 7. 31. [typescript/타입스크립트] ToDo List 미니 프로젝트 - FullList 코드리뷰 HTML 삽입 미리보기할 수 없는 소스 List 인터페이스 import ListItem from './ListItem' interface List { list: ListItem[], load(): void, save(): void, clearList(): void, addItem(itemObj: ListItem): void, removeItem(id: string): void, } 1. list: ListItem[] - list는 Todo 항목들을 저장하는 ListItem객체들로 이루어진 배열이다. Todo 리스트의 모든 항목들은 이 배열에 담겨 관리된다. 2. load() - load() 메서드는 이전에 저장된 Todo 항목들을 로드해서 _list에 추가하는 기능을 수행한다. 보통 Todo 리스트 애플.. Project/mini 2023. 6. 11. [Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃 보기에만 번지르르한 무에서 유를 창조한 나의 첫 결과물이다ㅎㅎ 처음에는 술술 잘풀리기에 너무 기분이 좋았는데 몇가지 문제점 때문에 그냥 새로운 웹사이트를 클론코딩해보려고 한다ㅎㅎ... 내가 이 작업을 시작할때 박스레이아웃과 플렉스 레이아웃 살짝 만을 안채로 시작했는데 그리드레이아웃에 대해 새롭게 순간,, 아 이건 크게 잘못되었구나 라고 인지하게 되었다.. 문제점 .section2 .text2-1{ font-size: var(--font-l); text-align: center; font-weight: bolder; margin-bottom: 40px; padding-top: 120px; } .section2 .text2-2{ font-size: var(--font-m); margin-bottom: 40p.. Project/mini 2023. 6. 11. [McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹 이번 맥도날드 크론코딩에서 핵심은 ' 그리드레이아웃을 이용한 반응형 웹 ' 을 구현하는 것이다. 주요코드 설명 #conteiner { width: 100vw; height: 100vh; display: grid; grid-template-rows: 0.5fr 1fr; grid-template-columns: 1fr; grid-template-areas: "header" "content"; } 웹의 전체 넓이와 높이를 각각 100vw, 100vh로 설정하여 전체를 사용하게했고 헤더와 컨텐츠를 그리드레이아웃을 이용해여 구획하였다. header #nav { display: flex; justify-content: center; align-items: center; position: fixed; backgrou.. Project/mini 2023. 6. 6. [Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩) 위의 드림코딩님의 영상을 보고 따라해보았다. 클론코딩을 하지마라, 부정적인 시선들이 많지만 초보자 입장에서 공부용으로 최고인것같다 ..! 일단 코드를 많이 치는 환경에 익숙해지고 시니어 개발자들은 어떻게 작업하는지 알 수 있게 되기 때문이다. 내가만든 유튜브~! 흑 뿌듯하다 !! Up next 부분에는 네이버블로그에서 썼던 썸네일과 제목을 빌려왔다ㅎㅎ 드림코딩님과 함께한 완성작에서 변화시킨 점은 1. hover로 액션아이콘 파랑색으로 만들기 2. 구독버튼을 현재 유튜브처럼 3. 댓글창을 추가했다! 난생 처음으로 혼자서 무에서 유를 창조해본 시간이었다. 고작 웹에서 표현되는건 3줄? 정도지만 정말 많이 시간이 소요되었다. 나중에 이 일이 익숙해지면 나도 후루룩 뚝딱 만들 수 있겠지? 이번 클론코딩으로 배운.. Project/mini 2023. 6. 3. [계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩) CSS *{ margin: 0; padding: 0; box-sizing:border-box; } body{ background-color: #1f1f1f; display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator{ width: 287px; border: 1px solid #333; background-color: #ccc; padding: 5px; } .calculator form{ display: grid; grid-template-columns: repeat(4, 65px); grid-auto-rows: 65px; grid-gap: 5px; } .calculator form input{ borde.. 이전 1 2 3 다음 반응형
![[9.16(토) 북스탁 프로젝트] 2차 멘토링 대대성공!! 칭찬일색 ~ 피드백 100% 수용했다!](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/vcZsK/btsuG3TD7f3/YKqKjcLLyOu5WdBvv8Nv7k/img.png)
![[9.15(금) 북스탁 프로젝트] 카카오 소셜로그인 구현 | 카카오 간편로그인API연결하기(node.js)](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bIb5vf/btsufYkUNFn/rx3ELnj2bYErrnK31DVBS1/img.png)
![[9.14(목) 북스탁 프로젝트] 도서 검색결과 페이지를 만들어보자 ~!](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/Cd7aD/btstXZY4o3d/sCsaCN3n3E09DkfvmqCCb0/img.png)
![[9.13(수) 북스탁 프로젝트] 로그인 상태관리 | useAuth, AuthContext, AuthProvider,](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/AmMYQ/btstSjwgocm/YReIN69UP95eKauzskGOn1/img.png)
![[9.6(수) 북스탁 프로젝트 일지] 팀원의 하차, 메인페이지 목업제작, '역경매'에 포커스, 핵심을 잊지말자!!](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/lfKlR/btstflhRjHQ/KeKEFRBgBlHwndDSng2g6k/img.png)
![[9.5(화) 파이널 프로젝트의 시작] 북스탁, 도서 역경매 사이트 제작을 시작하다! 생각보다 어려운 기획단계,,](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/brHN1f/btss9BRzUPf/Sy5z12xzn94uKSODeLKQJK/img.jpg)
![[바닐라JS] Todo List 만들기 - DOM 자바스크립트 예제](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/OmThK/btsq7bVOC5m/hKt94xfoN58rdG3bJHeXaK/img.png)
![[typescript/타입스크립트] ToDo List 미니 프로젝트 - FullList 코드리뷰](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/beylkI/btspClZlNjC/iraAnUIKZ33yDaRZWFODEk/img.jpg)
![[Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bZwFte/btsjjBPNPU3/EC0g19PUWPfkO8FMskhST1/img.png)
![[McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bzhCrE/btsjwr5bNKG/jE1NT7sEgPDaOzTQAMkMJK/img.png)
![[Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩)](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bqjMWa/btsjk5CWzSm/65a7DKuX1qignJFQ3kcEyK/img.png)
![[계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩)](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bX4gz0/btsizd7V5Li/NIprCu9lJf31uPtP3Ltopk/img.png)