혼자 적어보는 노트

22~23일차 세부 스타일 지정 & 페이지 마무리 꼭 해야하는 (우선순위) 작업들이 끝나가서 다른 팀원들이 기능 마무리에 집중할 수 있도록 페이지의 CSS styling을 도와주기로 했다. 그리고 전체적인 style 누락된 부분들을 수정했는데 CSS만 해도 시간이 꽤 걸렸다,, CSS라고 만만하게 생각하면 안된다고 다시 한번 깨닫게 되었다.😅 promise.allSettled 메인페이지가 getServerSideProps로 데이터를 받고 있는데 이 페이지에 접근할 때마다 로딩이 꽤 길다고 느껴졌다. export const getServerSideProps = async () => { try { const courses = await CourseApi.getCourses({ size: COURSE_COUN..

20~21일차 무한스크롤 구현 아주 예전에 한번 구현해보고 기억이 가물가물 하던 차에 이번 프로젝트에 다시 한번 구현을 해봤는데 조금 까다로웠던 부분들이 있었다. 1. 단순 페이지 진입 시 나열되는 것이 아니라 검색 필터를 변경하면 검색 필터에 맞게 리스트가 초기화 되고 초기화 될 때마다 page도 0으로 처리해주어야 하는 점. 2. 검색 필터 부분을 다른 팀원이이 작업을 해둔 상태였고 그 코드에 무한스크롤을 적절히 합쳐야 하는데 이 과정에서 남의 코드 읽고 완전히 이해 해야 가능하다는 것을 알게 되었다.. 애초에 한사람이 작업했다면 좀 더 빨랐을 것 같기도 한데 그래도 좋은 경험이었다. ✅ 해결 과정 나는 코스 리스트의 가장 마지막 item을 관찰 대상으로 두었다. 그리고 스크롤을 내려 "관찰 대상"을..

19일차 Tab 뒤로가기 유지 처음 Active 되는 Tab은 "게시물" 인데 "댓글" 탭을 클릭하고 다른 페이지로 이동했다가 뒤로가기를 할 경우 Tab의 상태가 "게시물"으로 초기화 되는 현상이 발생했다.😱 원하는 결과는 이전에 보고 있던 Tab이 유지되었으면 했고 뒤로가기 했을 때만 적용되었으면 했다. ✅ 문제 해결 const replaceRoute = (query: UserInfoTab) => { router.replace({ pathname: '/userinfo/[id]', query: { tab: query } }, `/userinfo/${userId}`); }; 탭을 클릭 할 때 router.replace를 사용하여 query를 담아서 URL을 변경해주고 페이지를 이동 시키고 뒤로가기로 다시 ..

17~18일차 - API 연결 API연결을 중점적으로 하고 날짜데이터 변경 및 자잘한 CSS style을 수정했다. DetailSidebar 구현에 대한 고민,, 코스 상세페이지와 장소 상세페이지에는 좋아요/북마크/공유하기의 기능이 들어있는 동일한 Sidebar가 들어가는데 Sidebar에 해당하는 state를 페이지 단에서 관리를 하게 되면 각 페이지마다 likes, bookmarks에 대한 state를 관리해주어야 한다. 그리고 관련된 로직을 page 컴포넌트 안에 동일하게 중복적으로 작성을 해주어야 하는데 이 부분에 대한 고민을 하게 되었다. ✅ 선택한 방법 좋아요, 북마크와 관련된 값이 변경될 때 코스,장소 상세페이지의 메인 컨텐츠들에는 영향을 주지 않기 때문에 컴포넌트 안에서 API요청을 하고 ..

15~16일차 - API 연결 / Vercel 배포 UI만 구현해놓은 페이지들을 본격적으로 API와 연결하는 작업을 했다. API의 지연😱 API에 대한 수정 요청을 했지만 주말이다보니 수정이 늦어지는 상황들이 발생했다. 내가 담당하는 부분이 API가 거의 완성이 안되었다,, 다들 API로 하나둘씩 페이지를 완성하는데,, 나만 페이지 작업을 완성 못시켜서 사실 조급했다 ㅎㅎ 마음을 내려놓고 내가 앞으로 작업해야하는 것들, 혹은 이후에 체크해야 할 것들을 리스트로 정리하고 현재 API 없이 작업할 수 있는 부분들을 순차적으로 처리하기로 했다. 아무튼 이때 MSW와 같은 서비스를 사용하지 않은 것에 대해 후회했고😭 다음에 프로젝트를 한다면 시간이 뜨는 상황을 고려하여 미리 목업 API를 사용하여 먼저 처리를..

14일차 - Recoil 연결 및 자동 로그인 구현 전체적인 UI가 나오고 로그인/회원가입을 담당하는 팀원이 API를 연결해주셔서 이제 그 내용들을 토대로 Recoil을 세팅하기로 했다. 사실 나는 Redux에 조금 더 익숙한 상태이긴 했고 빠른 프로젝트의 완성을 위해 익숙한 Redux로 갈 지, Recoil로갈 지 팀원들끼리 고민을 했었었다. 프로젝트에 Recoil을 사용하게된 이유? 1. 팀원들이 전역상태 라이브러리의 경험이 없는 상태기때문에 (Redux보다) 낮은 러닝커브의 라이브러리 필요 2. 전역상태로는 로그인정도만 구현할 예정이라 복잡하지 않은 라이브러리 필요 3. 사실 Context API로도 간단하게 구현할 수 있는 부분이겠지만 Recoil을 사용해봄으로써 Redux와 Context와 비교..

10~11일차 : 코스 상세페이지 구현 코스, 장소 목록페이지를 구현하고 코스 상세페이지에서 사용할 Comment, CourseOverviw, CourseDetail 컴포넌트 등을 구현했다. 아무래도 아직 API가 완성되지 않았기 때문에 데이터를 직접 다루지 않아서 컴포넌트 구현은 어렵지 않았지만 변수명 짓는게 참 어려웠다...ㅠ_ㅠ https://www.curioustore.com/ Curioustore 변수명 짓기, 컬럼명 짓기, 영어약자, 変数名 つけ方, カラム名建てる, 英語の略語, 命名变量, 命名该列, 英文缩写 www.curioustore.com 이 사이트를 조금 이용했지만 그래도 어렵다..!! 슬라이드(캐러셀) 구현 직접 구현을 할 까 했지만 라이브러리도 잘 사용해보는것이 좋을 것 같기도 하고 ..

8~9일차 메인 페이지 구현 메인페이지에 필요한 컴포넌트들인 CourseItem, PlaceItem, Avatar, footer 등의 컴포넌트들을 추가로 구현하고 메인페이지에 붙였다. 컴포넌트들이 쌓인걸 보니 다른페이지 작업할 때 금방할 것 같아서 뿌듯했다.😊 API연결 없이 UI만 먼저 구현을 해서 그런지 코스/장소 목록 페이지도 금방 완성했다. Link/Image 컴포넌트 구현 Next에서 제공하는 Link와 Image컴포넌트를 조금 변경해서 다른 팀원들이 사용하기 편하게 구현해봤다. 지식이 부족해서 공식문서랑 테스트를 몇가지 진행했었는데 이번 기회에 조금은 자세히 알게 되었다. Image height auto를 설정하면서 방법을 찾기위해,,, 문서를 다시 읽게 되었고 관련된 내용은 또 찾아볼 것 같..