[길벗 26차 개발자 리뷰어] 쉽게 시작하는 Next.js 를 읽고

목차

0. 들어가며

1. 어떻게 리뷰를 작성할까..

2. 챕터별 시작 ~ 완독까지 걸린 시간 정리          

3. 책을 읽고 난 뒤의 소감 정리                                                            

5. 해당 책을 읽을 만한 독자의 범위 정리 및 추천

6. 마무리하며

---

 

 

0) 들어가며

읽고 싶은 IT 기술 도서는 길벗과 한빛에서 많이 나오는데,
매번 신청할 때마다 경쟁이 치열했다.

그런데 이번에는 마침 좋은 기회가 찾아왔다!!!

 

 

이번에 리뷰하게될 기술 도서는 쉽게 시작하는 Next.js 입니다!

 

 

---

1) 어떻게 리뷰를 작성할까..

 

 

 

어떻게하면 Next.js 를 배우기 위해 공부자료를 찾는 사람들에게 책의 내용을 재밌고 깔쌈하게 풀어줄 수 있을까.. 고민하다가

크게 4가지로 와꾸를 잡아보았다.

 

---

 

1) 챕터별 시작 ~ 완독까지 걸린 시간 정리          

2) 책을 읽고 난 뒤의 소감 정리                          

3) 책의 아쉬운 점 정리                                      

4) 해당 책을 읽을 만한 독자의 범위 정리 및 추천

 

 

 

 

---

2) 챕터별 시작 ~ 완독까지 걸린 시간 정리       

쉽게 시작하는 Next.js 기술도서의 챕터는 부록을 포함하여 총 9개의 챕터로 이루어져있다.

총 217분.. 3시간 37분 정도 걸렸다.

퇴근하고 집에 와서 3일에 걸쳐 읽었다.

 

 

 

 

• CHAPTER 1 Next.js 기초 지식 - 27분
• CHAPTER 2 리액트 컴포넌트 학습 - 36분
• CHAPTER 3 Next.js 페이지 만들기 - 15분
• CHAPTER 4 페이지 라우터 애플리케이션 - 20분
• CHAPTER 5 페이지 렌더링 - 40분
• CHAPTER 6 데이터 액세스 - 27분
• CHAPTER 7 API 작성과 이용 - 28분
• CHAPTER 8 OpenAI API 이용하기 - 13분
• 부록 A 타입스크립트 입문 - 11분

 

---

 

나는 보통 개발 도서를 기반으로 공부를 할때는 3단계에 걸쳐서 책을 읽는다.

 

첫번째로는 일정 시간을 정해두고 책의 내용을 훑어본다. 
책의 전반적인 내용과 목차를 확인하며 어떤 내용으로 구성되었는지 흐름을 보며 읽는다.

 

두번째로는 책을 정독한다.
첫번째 방식을 통해 잡은 흐름을 염두에 두고, 책의 내용을 이해하기 위해 노력하며 읽는다.

 

세번째로는 책의 예시를 따라칙거나 프로젝트를 따라한다.
이 과정에서 추상적인 개념, 텍스트만으로 이해되지 않았던 부분을 다시 본다.

 

이번에 책을 읽을 때는 첫번째, 두번째 방법을 사용했다.
217분이라는 시간은 두번째 읽을 때 걸릴 시간이다. 

만약 별도의 실습을 진행한다면 곱하기 1.5 ~ 2.5 까지 늘어날 수 있을것 같다.

 

 

---

3) 책을 읽고 난 뒤의 소감 정리

 

쉽게 시작하는 Next.js 라는 책의 이름대로 실제 모든 스크립트 명령어에 대해

실행 결과 화면의 이미지가 책에 같이 나와 있어

각 단계별 진행상황을 별도의 실습 없이 책에 있는 이미지로 확인 할 수 있어 편리하고 이해하기 쉬웠다.

 

<이미지: >

 

---

 

 

 

쌩짜배기 Next.js 공식문서로 시작해서

앱 라우터, 페이지 라우터 / CSR, SSG, ISR, SSR 등의
개념을 이해하려고 하면 여러차례의 헛발질이 요구된다.

간단한 예시지만 앱라우터, 페이지 라우터에 대한 내용을
기능 케이스 별로 구분하여 설명해줘서 이해하기 좋았다. 

더불어, CSR, SSG, ISR, SSR 은 다이어그램을 통해
각 단계별 전반적인 흐름의 차이점을 한눈에 알 수 있었다.

 

---

 

프론트와 백엔트 두 파트의 업무를 다 하는 입장에서는 목업 데이터보다 간단하더라도
Supabase, MySQL Docker Container 등을 활용한 DB 연동에 대한 내용이 있었으면 어땠을까 하는 아쉬움이 남는다. 

 

 

 

 

 

 

책을 읽으며 각 챕터에서 인상 깊었던 부분등을 메모한 내용이다.

 

 

[1장] Next.js 기초 지식

• WEB IDE를 기반으로 설명을 진행하여 초보자가 개발 환경 구성 시 발생할 수 있는 다양한 예외 사항을 방지함.
• npm 명령어 실행 결과 화면을 이미지로 제공하는 점이 좋았음.
• Metadata 작성 및 표현 방식에 대한 예제 이미지가 추가되었으면 좋았을 것 같음.
• Next.js에 대한 기본 개념을 설명하기 전에 먼저 배포를 진행하는 점이 인상적이었음. 이는 새로운 프레임워크를 배울 때 배포 시 발생할 수 있는 문제를 미리 해결할 수 있도록 도와줌.

[2장] 리액트 컴포넌트 학습

• onClick={doClick}과 같이 초보자가 실수할 수 있는 부분을 여러 사례를 들어 설명한 점이 좋았음.
• 스타일 객체를 설명하면서 빈 화면을 클릭하면 빨간색 반투명 원이 추가되는 예제는 직관적이었음.
• 실행별 결과 이미지를 첨부하여 이해를 돕지만, 코드 라인별 주석이 추가되었다면 더욱 도움이 되었을 것 같음.

[3장] Next.js 페이지 만들기

• Tailwind 색상 설정을 설명하면서 숫자만 나열하기보다 색상의 그라데이션을 함께 보여주었다면 더욱 직관적이었을 것 같음.
• <img> 태그 대신 Next.js <Image>를 사용하면 WebP 형식 변환을 통해 이미지 품질을 유지하면서 파일 크기를 줄일 수 있다는 점을 새롭게 알게 되었음.

[4장] 페이지 라우터 애플리케이션

• 앱 라우터와 페이지 라우터의 차이점을 명확하게 설명함.
• 페이지 라우터에서만 지원하는 정적 페이지 생성 개념을 배우는 데 도움이 되었음.

[5장] 페이지 렌더링

• SSR, CSR, SSG, ISR 개념을 보다 깊이 이해하는 계기가 되었음.
• 최신 버전의 Next.js를 사용한 예시와 단계별 작업 변화 이미지를 제공하여 지식의 빈틈을 메우는 데 효과적이었음.

[6장] 데이터 액세스

• 6.2 서버 액션 부분이 특히 유용했음.
• 예전에는 없던 기능으로, 단순한 폼 예제부터 fs 모듈을 이용한 파일 예제까지 포함되어 있음.

[7장] API 작성과 이용

• 앱 라우터와 페이지 라우터의 API 차이를 명확하게 구분해 설명함.

[8장] OpenAI API 이용하기

• 실습 중심으로 진행되어 이해하기 쉬웠음.

 

---

 

 

4) 누구에게 권할것인가?

이런 분들에게 추천합니다!

 

✅ Next.js를 처음 접하는 입문자
✅ React는 해봤지만 Next.js가 생소한 개발자
✅ CSR, SSR, SSG, ISR 개념이 헷갈리는 분
✅ 공식 문서만으로 공부하기 막막했던 분
✅ 빠르게 Next.js의 핵심을 익히고 싶은 분

 

 

    

개발을 처음 시작하는 분들에게는 내용이 다소 복잡할 수 있다.