/서평/ 쉽게 시작하는 Next.js

이 글은 길벗 출판사에서 책을 제공받아 작성된 글입니다.

사내에서 next.js 기반으로 서비스를 개발하고 있다. 앱라우터가 나오기 이전 버전에서 시작했기에 페이지라우터 기반으로 프로젝트가 셋팅되어있다. 이 책을 선택하고 기대한 점은

• 앱라우터 기반의 프로젝트에서 사용할 수 있는 기능들을 톺아보고 싶었고,
• 겸사겸사 기존에 알고 있던 내용들도 리마인드 하고 싶은 점이다.

TL;DR 개인평 ★★★☆☆

• 전공책 느낌이 없는 자상한?책을 원한다면 이 책을 선택해도 좋다.
• 앱라우터와 페이지라우터의 차이를 이해하고 싶다면 이 책을 선택해도 좋다.

책 정보

독자 기준

TL;DR JavaScript 이해도가 있어야하고, React를 어느 정도 알고 있다면 읽을 수 있는 책이다.

이 책은 React의 이해도가 낮아도 이해할 수 있도록 굉장히 초심자 기준으로 작성되어있다. 다만 Next.js가 메인 주제이기에 그 외 주제들은 깊이있게 다루진 않는다. React를 잘 모르는 상태에서 읽게 된다면 책에서 가볍게 설명해주는 내용을 읽으면서 -> 공식문서를 읽어보는 것도 좋을 듯 하다.

책 구조

• 책을 읽기 전에 서문을 읽어보는 것을 권장한다. 작가가 어떤 의도로 이런 책을 썼는지를 알게 되는데 이번 책에서는 베타테스터분들의 글들도 함께 있어서 이 책에서 얻을 수 있는 부분을 미리 알 수 있었다.
• 챕터 시작마다 3가지 키워드로 요약을 해준다. 미리 내용을 파악할 수 있어 내게 필요한 내용인지를 먼저 체크할 수 있다.
• 칼럼부분에서 보충설명을 해주는 데, 초심자가 아닌 사람입장에서는 어떤 칼럼은 불필요해보였고, 어떤 칼럼은 적절한 내용이였다.

내용 구성

1. Next.js 기초 지식 -> Next.js 탄생배경, 리액트, Next.js 톺아보기, 배포경험
2. 리액트 컴포넌트 학습 -> 리액트 좀 더 이해하기
3. Next.js 페이지 만들기 -> Next.js 이해하기 (프레임워크 구조, 스타일링, 라우팅)
4. 페이지 라우터 어플리케이션 -> 페이지라우터, 앱라우터별 구조 이해하기
5. 페이지 렌더링 -> 페이지라우터, 앱라우터별 렌더링 이해하기
6. 데이터 액세스 -> fetch이해, SWR이해, next.js에서 간단하게 적용
7. API작성과 이용 -> 페이지라우터, 앱라우터별 api 연동
8. OpenAI API 이용하기 -> openAI 붙여보기
9. 부록) 타입스크립트 인문

초심자도 이해하기 위해서 Next.js만 설명하지 않고 next.js에 함께 사용되는 기술의 이해도를 올리는 부분이 앞부분에 존재한다. 개인적으로 한번 더 카테고라이징을 하면 3가지로 묶을 수 있을 듯 하다.

A. { 1,2,3 }: 기초지식을 쌓는 부분. 기본 이해도가 있으면 넘어가도 된다.
B. { 4,5,6 }: 라우터별 구조와 렌더링, 데이터fetching 기술을 이해할 수 있다.
C. { 7,8 }: 실제 사용 예시를 알 수 있다.

내용

Good

• 리액트의 복잡도와 코드관리의 어려움을 이야기하면서 next.js의 필요성을 설명한 부분을 읽으니 다시한번 왜 next.js를 사용하면 좋을지에 대해서 이해할 수 있다.
• 리액트의 매커니즘을 간단하게 설명해주어 기초지식을 얻을 수 있도록 해준다.
• 실제 구현을 순서대로 알려주는데, 이 과정에서도 새로운 개념이 나오면 설명을 해주어 따로 찾아보지 않아도 되는 부담감은 덜하다. (e.g. npx)
• 확실히 초심자가 톺아볼 수 있도록, 즉 가볍게 소화할 수 있도록 복잡한 매커니즘이나 내부 동작들은 과감히 생략하였다. good
• css문법중에 @apply라는 문법을 설명하며 스타일링 예시코드를 줄여서 표현했다. 강약조절을 잘 한듯해서 good

아쉬운 부분

• Tailwind CSS를 소개하는 부분이 있는데,(p.120근처) 이 책에서는 스타일링 개념이 우선순위가 높지 않음에도 클래스 네이밍 설명하느라 2장반을 사용하고 있다ㅎㅎ 불필요한 정보라고 본다.
• 실제 구현을 하는 파트에서 특정 패키지를 사용한 예시가 나올 때 버전이 명시되어있지 않았다. 이후 버전이 업데이트될 때 인터페이스가 바뀌면 레거시 캡처이미지를 보는 독자가 혼선이 올 것으로 우려된다.
• 위로의 말이나 응원의 말이 쓸데없이 많은 듯 하다. 초심자가 다 소화시킬 필요는 없는 내용임을 군데군데 표현하고 있다 ㅎㅅㅎ 과한 친절함인건가.
• 리액트의 상태와 hook 파트에서 글로벌 변수에 대해서 설명하는데 따로 섹션을 뽑아서 설명할정도로 중요한 개념은 아니라고 본다.
• 이 책에서는 B파트{4, 5, 6}가 가장 중요하다고 생각된다. 이 파트를 이해하면 Next.js를 사용할 때 가장 강력한 장점을 이해할 수 있다. 다만 초보자를 위한 책이기 때문에 A파트가 추가되었고, C파트에서도 실제 api를 연동하는 파트도 있는데 오픈소스를 openAI를 사용하다보니 불필요한 가입과정까지 다 설명하는 내용들이 추가되어있다. 책의 목적에 맞춘다면 A파트, C파트를 좀더 줄이고 B파트에서 설명하는 내용을 좀 더 풍성하게 표현하면 어땠을까 하는 아쉬움이 있다.
• 실제 동작하는 next.js 앱을 예시코드로 올려주면 이해하기가 좀더 쉬웠을 것 같다. (현재 예시코드)
• 서버액션 부분의 설명은 초심자 독자들이 이해하기에는 정보가 부족하다고 생각된다. 도식화 등의 시각화 자료가 필요하다고 본다.

마무리

전반적으로 초심자에게 친절한 책이라서 그런지, 문체가 정말 어떤 개념을 설명하는 전공 책 느낌보다는, 초심자를 이해시키기 위해서 작가가 노력하고 있는 자상한?책의 느낌이 강하다.
next.js의 앱라우터와 페이지 라우터 기반의 프로젝트 차이점을 가볍게 이해하고 싶을 때도 참고해도 좋다.

서평을 위해서 읽었지만 다시 한번 내가 사용하고 있는 기술에 대해서 리마인드할 수 있었고, 아직 사용해보지 않은 앱라우터의 이해도도 올릴 수 있게 되었다.