01. 구현

✅ 결과.

• 라우팅을 분리하여, useRoute 훅스를 통해 [지난 해], [다음해], [오늘]로 이동할 수 있다. 메인페이지 접속 시, useEffect를 통하여 바로 오늘에 해당하는 해(dayjs().year())로 리다이렉팅 시켰으며, 차후 로그인 관련 고도화 시, 로그인이 되었는지 체크하는 단계를 삽입할 수 있다.
• 레이아웃을 설정하여, 공통 디자인을 적용하였다.
• 날짜들은 렌더 시, 내가 원하는 조건(오늘인지, 일요일인지)을 체크해서 스타일을 변화시킬 수 있다. 따라서 차후 내가 글을 작성한 날짜는 데이터가 있음을 나타내는 상태로 스타일을 줄 수 있다.

✅ 스크린샷.

동적 라우팅을 통해, 각 날짜를 누르면 해당 날짜에 해당하는 페이지로 이동하게 된다.
(예 - 2023년 2월 7일을 클릭하면, '/2023/02-07' 페이지로 이동.)

02. 구조

✅ 라우팅 구조.

✅ 레이아웃 구조.

레이아웃.tsx
어사이드(메뉴) / 메인(props.children이 들어오는 자리) / 어사이드(정보)

03. 느낀점

✅ 렌더해보며 잡아가는 기획.

처음에 기획할 당시, 실제로 데이터가 어떻게 뿌려지는지 상상만으로는 직관적이지 않아 내가 어떤 구조로 앱을 만들고 싶은지 불확실했다. 실제로 컴포넌트를 수많이 렌더해보고, 어떻게 보이는지 확인하면서 스타일과 라우팅 구조를 정할 수있었다. 익숙해지면 기획할 때부터 전체적인 구조를 머릿속으로 미리 잡을 수 있을것 같다.

✅ 발견한 에러.

Warning: Prop style did not match. Server: "null" Client: "background-color:"
https://github.com/vercel/next.js/issues/11600#issuecomment-861035104

CSS IN JS를 사용할때, NEXT.JS에서 SSR 관련 이슈를 겪었다. 해당 이슈가 발생하지 않게 우회하였으나, 본질적으로는 차후에 분석이 필요하다.

✅ 다음 적용사항.

• 어사이드에 들어가는 내용 및 스타일 기획.
• 상단에 0살부터 99살까지 나타내는 블럭 모음 컴포넌트 노출.
• 다른 페이지 제작. (피드, 작성, 통계, 설정)
• 상세페이지 마크업 및 스타일링.
• 파이어베이스 연결하여 백엔드 통신 구현.
• 에러 분석.
• useRoute의 push()를 통해 페이지를 이동하게 되면 우선 useRoute가 값이 들어올 때까지 <></>를 반환하게 만들었다. 차후 로딩 컴포넌트 삽입.
• 모바일 환경에서 레이아웃 @media 반응형 구현.