혼자 적어보는 노트

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와 비교..

데모데이 중간점검과 비슷한 느낌의 데모데이! 결과물이 돌아가는게 있어야 하는 DAY이다. 그리고 해당 시연 영상을 통해서 멘토님에게 추가적인 피드백을 받을 수 있다. 하지만 API가 늦게 나오기도 했고 초반부다보니 불안정한 상태라 갑자기 서버가 닫혀버리기도 하고 잘 되던 요청이 안되기도 했다.. 우리는 디자인시안대로 UI를 미리 구현하고 더미데이터를 활용해서 어떤 값을 받을 지 미리 컴포넌트에 정의해두었지만.... 이쯤되면 이제 API연결해야되는데..?? 😭 💡 깨달은 점 막상 API를 받고 사용해보니 문제가 생겼고 처리하는 시간이 꽤 걸렸다. 데모 데이때는 UI구현이 거의 되었다보니 API에 문제가 생겼을 때 기다리는 시간들때문에 작업이 딜레이되는 느낌이 들었다. 만약 테스트를 더 빨리할 수 있도록 백..

상세 페이지를 course/[id].tsx로 해놓고 실제로 있는 페이지인 경우 (id로 서버 요청 후 값이 있다면) 페이지를 보여주고, 없는 페이지인 경우 메인으로 redirect처리를 하려고 했다. 그런데 useEffect로 router.query.id 받아서 확인해보니 undefined가 뜬다?? 기본적으로 router.query.id가 채워져서 나올 줄 알았는데 useEffect에서 확인해보니 query값이 없다가 이후에 string | string[] 으로 채워진다. useEffct로 id 확인하기 const courseId = router.query.id useEffect(() => { if (typeof courseId === 'string') { //처음엔 undefined이기 때문에 str..

next.js layout 구현 react에서 페이지마다 다른 layout을 구현해야 했을 때 각각 페이지마다 pageContainer를 넣고 props를 통해 header에 나타나는 요소들을을 제어했었다. Next에서도 그렇게 작업을 해야 하나 했었는데 알아본 결과 조금은 다른 방식으로 Layout을 제어할 수 있었다. Next/Layouts 공식문서에 활용 예시가 굉장히 상세하게 설명되어있다! _app.tsx import Layout from '~/components/common/Layout'; export type NextPageWithLayout = NextPage & { getLayout?: (page: ReactElement) => ReactNode }; type AppPropsWidthLay..

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