요즘 깃헙 README 정리에 푹 빠져서 학습 내용은 아래 레포지토리로 대체합니다.
1. 입문 계기
마켓컬리 해커톤 이후 입사하게될 수도 있다는 생각에 컬리 기술블로그를 읽어보고 있었는데 커머스 프로덕트 팀의 Next.js 도입 소식을 접했다. 리액트와 프론트엔드 개발에 관심을 높혀가고 있는 지금 시점에서 Next는 당연히 다뤄보고싶은 프레임워크였고, (커머스플랫폼에는 지원하지 않았지만...) 앞으로 쓰게될지도 모르니 한번 알아봐야겠다 싶었다.
언제나 나의 호기심을 채워주는 무료강의가 있는곳... 노마드코더 화이팅
2. React와의 차이점
가장 큰 개념적 차이는 CSR과 SSR이 아닐까 생각한다.
React.js는 브라우저가 JS파일(스크립트)을 받아 UI를 생성하는 반면 Next.js는 서버서 HTML 파일을 미리 생성해둔 후 전달한다.
HTML을 받은 다음 스크립트 파일을 전달받고 그 때 리액트 앱으로 결합(?)해 리액트 방식의 렌더링이 가능해지는 구조다. 이 것을 Hydration 이라고 한다.
이런 SSR의 특징 때문에 Next.js app이 높은 LCP 점수를 기록하며 호평을 받고, 많은 콘텐츠와 복잡한 UI를 가진 웹 서비스를 제공하는 회사에서 선택하고 있는 것 같다.
로딩해야 하는 데이터의 양이 클 수록 사용자가 백지 화면을 보는 시간이 길어지기 때문이다. 이 때문에 Lazy loading 등을 사용하는 것으로 알고있다.
그 외 Next.js는 프레임워크인 만큼 코드 작성에 React보다 많은 규칙이 존재하는데 입문 단계에서 배운 내용은 최상단 URL에 정리해두었다.
목차
1. Page 2. Routing 3. Routing 4.1 ~ 4.2 CSS 4.3 Custom app
3. 후기
많은 회사들의 기술 블로그나 링크드인 등에서 최근 Next.js로의 이주가 활발히 일어나고 있음을 알수 있다. 하지만 개인적으로 아직 React.js도 완벽히 숙달되지 않았고 팀으로 작업하는 일이 거의 없다보니 , strict한 규칙을 가진 프레임워크는 오히려 불편함으로 다가온다.
그리고 다양한 기술들을 React에서 적용해보는 것이 나에게는 더 필요한 것 같다.
_코드컨벤션을 정하고 사이드프로젝트를 하다보니 왜 이런 규칙을 오히려 편하게 생각하는지 이해는 된다만...
결론적으로, 아직은 개인적으로 도입하고 싶은 기술은 아니다. 프로젝트의 규모가 작고 무엇보다 나는 개인기 때문이다. Next.js보다는 이제부터 공부해보려고 하는 React Native를 더 열심히 하게 될 것 같다.
하지만 더큰 규모의 사이드프로젝트를 진행하거나 더 복잡한 웹앱을 만들 기회가 있다면 좀 더 깊게 파고들어볼 생각이다.
