싸이월드 페이지를 클론 코딩해주세요. 가이드라인은 참가자들에게 별도로 제공합니다.
<aside> 💡 상세 스펙은 다음과 같아요.
<aside> 💡 다음의 조건에 맞게 진행해주세요.
Next.js는 써본적이 없어서 처음엔 좀 망설여졌다. 취업준비를 하는 와중에 프론트엔드 채용시장에서 심심치않게 보는 스택이 Next.js라 이번 기회에 한번 공부해보자 하는 마음에 신청을 하게 되었다. 타입스크립트는 발담그기만 해본 상태고 GraphQL은 들어보기만 하고 써본적이 없어서 겸사겸사 좋은 경험이겠다는 생각이 들었다. 챌린지 시작 후 일주일 정도는 Next.js에 대해서 한번 알아보자 하는 마음을 갖고 공부에 돌입했다.
그렇게 Udemy에서 마침 할인 기간이길래 결제한 Next.js 강좌와 노마드코더 무료 기초강좌로 발담그기만 해보고 프로젝트 구현에 돌입했다.
서버 사이드 렌더링(SSR) 서버에서 페이지를 그려서 클라이언트로 보내서 화면에 뿌린다.
라우팅 React는 react-router-dom을 설치해서 일일이 라우팅을 지정해줘야 했는데, Next.js에서는 폴더구조와 파일명으로 라우팅을 해서 별도로 패키지를 설치할 필요가 없다! 다이나믹 라우팅은 예를 들어 세부경로로 들어갈 때, 파일명을
[...slug].tsx이런 식으로 설정하여 괄호 안의 파라미터를 통해서 라우팅이 되는 것이다.Layout 정적 부분의 틀을 잡을 때 Next.js의 Layout 컴포넌트를 사용해서 틀을 잡을 수 있다.
이정도로 이해했는데 아마 이것보다 더 방대하고 깊고 유용한 내용이 있겠지만… 다 들여다보기엔 그러다 챌린지 기간이 끝날 것 같았다. 그래서 그냥 정말 기초적인 내용만 알고 구현을 시작했다.
