웹 포트폴리오를 만들겠다면 고생하다 밤을 새버리고 아침 6시에 잠든 날이었다. 해가 중천이 되어서야 겨우 12시 전에 일어나 카톡을 확인해보니 처음으로 인프런 서류 합격을 받았다. 즐거운 것도 잠시! 구현과제와 알고리즘 테스트를 제출해야 했다.
솔직히 코테라는 말이 나한테는 너무 벽같이 느껴지는 단어였지만, 무작정 도전했다. 추석 연휴내내 코딩만 했던 것 같다.
문제는 구현 과제가 내가 사용하던 npm, cra가 아니라 yarn, Next.js를 사용해야 했다. 부랴부랴 아침에 눈꼽도 못 떼고 Next.js 강의를 들었는데 강의 내용이 너무 좋았다. 구현 과제를 해야 한다는 압박감도 있었지만 그냥 Next.js가 왜 사용하는지 직접 느낄 수 있었다.
스터디를 하면서 SSR, CSR을 조사하며 공부한 적이 있었는데 그 중 정적 페이지를 만들 때 Next.js를 사용한다는 건 대충 이론 상으로만 알고 있었을 뿐이었다. 직접 구현과제를 통해 사용해보니 정적 페이지 만드느 게 얼마나 유용한지를 알게 되었다.
내가 React.js와 Redux만으로 페이지를 만들 때 했던 고민은 API 요청이 느려지면 깜빡임이 생기고(SPA임에도 그렇게 보임) UX를 위해 로딩 처리를 열심히 해야 했다. 그럴수록 나는 정적 페이지를 꼭 만들어보고 싶었는데 이번 구현과제를 통해 Next.js를 사용해 볼 수 있어서 너무 감사했고 기뻤다.
내가 공부하면서 Next.js 핵심 포인트
Next.js ?
- 정적 페이지 제작에 특화
- SSR과 CSR을 적절히 섞어서 사용이 가능
- 페이지 별로 정적 vs SSR 선택 가능
- 검색 엔진 최적화: CSR(React 대표적)은 html에
<div id = root></div>만 두고 사용해서, 크롤링할 수 있는 HTML 내용이 제한적임, 반면 넥스트는 SSR이라서 HTML을 SEO와 웹 접근성을 보다 향상시킬 수 있음
정적 vs SSR
HTML을 언제 생성하는지에 따라 분류
1. 정적 생성
- 프로젝트가 build 하는 시점에서 html 생성
- 모든 요청 재사용 => 깜빡임이 없음 ㅠㅠ (너무 좋아,,)
- Next.js는 포퍼먼스를 이유로 정적 페이지를 권장
getStaticProps/getStaticPath- 사진, 텍스트 등 고정적인 콘텐츠
- 상품 리스트처럼 변동이 없는 페이지, 실시간 요청이 필요하지 않은 API
2. SSR
- 매 요청마다 HTML 파일 생성
getSeverSideProps- 실시간 API 요청 등
과제 중 만난 트러블 슈팅 🔫
1. 상품리스트 API를 정적 페이지로 바꿀 때getServerSideProps 오류
- page 폴더 안의 js 파일에서만 사용 가능하다. 정적 페이지도 마찬가지다.
- 내가 생각 이유는, 페이지 단위로 정적 및 SSR를 결정할 수 있기 때문에, page 폴더에서 사용하는 것 같다.
- 내부 컴포넌트에서 사용하고 싶으면 props로 내려서 사용이 가능하다.
- 즉, 페이지 별로 App.js가 있다고 생각하면 된다.
신기했던 점
1. 커스텀 404 페이지
- Next.js는 _error 페이지를 기본으로 제공해서, 따로 404 페이지를 만들 필요는 없다. (완전 신세계)
- 커스텀 하고싶으면 그냥 pages 폴더에다가
404.js파일을 만들어 꾸미면 끝!
2. _document와 App.js와는 다른 존재
- React인 경우... 가장 큰 단점은 하나의 페이지로 작동하는 원리라서 페이지 별로 시맨틱하게 HTML 파일을 만들기가 쉽지 않은데, Next는 _document 파일을 만들고 페이지 별로 시맨틱하게 커스텀할 수 있다.
