NextJS를 공부하며 간단한 영화 정보 애플리케이션🎬 을 만들었습니다.
- 공통 레이아웃 컴포넌트를 만들어 _app.tsx에 렌더링
- 🚗 automatic routing
- 💥 Dynamic Routes 적용
- 🌐 Catch All Routes 적용:
pages/movies/[...params].tsx - 🚧 404 page 커스텀
- API_KEY를 외부에 노출되지 않기 위해 next.config.js에서 rewrites 설정
- source 경로가 destination 경로로 매핑이 되어 destination 경로를 source 경로로 mask할 수 있다.
- URL 프록시 역할을 한다.
- 페이지를 request할 때마다 getServerSideProps 함수를 실행하여 데이터를 fetch한다. fetch한 데이터를 반환하고 이 데이터를 이용해 페이지를 pre-render한다.
- getServerSideProps함수 인자로 Context Parameter가 들어온다. 이를 이용해 params와 query 데이터를 반환하여 페이지를 pre-render할 때 포함시킨다.
- html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소를 미리 주입하여 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제 해결
- server와 client에서 생성하는 class 해시값이 충돌하는 문제 해결
.babelrc=>babel대신swc사용 (2022년 12월 26일)
🖼️ 이미지 최적화: 왜 img 태그 대신 Image 컴포넌트를 사용했는지, Image 컴포넌트의 장점과 사용법에 대해 정리
🐛 bug issues