한빛출판네트워크

1. 초급수준의 사람들도 이해하기 쉬울정도의 자세하고 친절한 설명
2. Next.js의 렌더링 전략에 대한 자세한 설명
3. 따라가며 실습이 가능한 구성

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

SPA 구조의 페이지들은 서버에 다녀오지 않아서 깜박임은 없는 대신, 화면을 구성하는 많은 요소들이 리로딩되지 않아 시간이 갈 수록, 복잡도가 증가할 수록 속도가 점점 느려진다.

화면을 그리기 위해 서버에 다녀오는 서버사이드 렌더링에 익숙한 나는, 이런 현상이 발생할 때면 강제로 새로고침 한 번 발생 시킬수도 있는거 아닌가.. 하는 단순하고 무식한 생각을 종종해왔었다.

Next.js는 SPA 구조의 유연함은 그대로 가져가면서도 앞서 말한 문제점들을 보완해줄 수 있는 React에 기반한 Framework 중 하나라고 한다.

어쩌다 큰맘먹고 React 개발서를 뒤적이다보면 너무나 간결하고 백엔드스럽게 적힌 코드에 금세 흥미를 잃어 책 보다가 포기하곤 했는데, 생각보다 책에 있는 소스코드가 따라하기 쉬워 보여 차근차근 진도를 나가볼 생각이다.

특히, 현재 하는 업무와 관련해서 페이지마다 서로 다른 page title을 달아줘야 하는데, SPA 구조로 개발한 페이지에서는 한 가지 page title을 변경 없이 쓰는 경우가 많아 어려웠다.

이 책에서는 서버사이드 렌더링 뿐만 아니라 SEO를 위한 작업들도 가이드 해주고 있어 실제 업무에서도 도움될 것 같다.

이 책은 제목처럼 실전에서 사용할 수 Next.js 활용서이다.  

뿐만 아니라 상용 애플리케이션을 만들면서 고려해야 할 내용들로 가득차 있다. 

책을 처음 접했을 때 리액트를 잘 모르는데, 과연 Next.js 책을 읽을 수 있을까? 라는 고민을 했었다. 

리액트에 대해서는 꼭 배워야할 라이브러리라 평소 생각하고 있었으나, 현재 자세한 지식이 없는 것을 후회하면서 말이다. 

그래서 급하게 3일 정도 리액트에 관해 배우고 동영상 강의로 예제를 직접 따라한 후에 책을 읽기 시작했다. 

그런데 웬걸, 물론 저자가 말하는 대상 독자는 중급이라고 되어 있고, 리액트가 뭔지도 모르면 힘들겠지만, 

다 읽고 난 지금 개인적으로 Front-end에 대한 이해도가 상당히 넓어졌을 뿐 아니라, Next.js를 사용하면 어떤 점이 좋은지도 이해하게 되었다.  특히 자바스크립트의 유명한 다른 라이브러리, 프레임워크는 모조리 알게 된 것 같아서 뿌듯하다. 

신기한 것은, 책을 읽는데 어렵거나 지루하지 않고, 매우 재미 있었다.

책의 구성은 크게 3개의 파트로 구분하고 있는데, 

'PART1. Next.js의 세계로'에서는 Next.js 프레임워크의 소개와 기초/특징을 잘 설명하고 있으며, 

'PART2. Next.js 실전 감각 익히기'에서는 Next.js의 구체적인 활용 방법을 구체적인 사례와 함께 설명하며 

마지막으로, 'PART3. Next.js로 상용 애플리케이션 만들기'에서는 실제 애플리케이션에서 접할 수 있는 난이도가 있는 문제들을 

예제로 하나씩 짚고, 향후 추가로 배워볼 만한 연습 프로젝트를 제시하는 것으로 마무리한다. 

PART1의 CHAPTER 1은 리액트 라이브러리를 위한 웹 프레임워크로서 Next.js 의 특징과 역사, 비슷한 프레임워크를 설명하며, 

CHAPTER 2는 서버 사이트 렌더링, 클라이언트 사이트 렌더링, 정적 사이트 생성 방안에 대한 각각의 설명과 예제를 통하여 Next.js에서 사용하는 방법을 알려준다. 

CHAPTER 3은 Next.js의 기초가 되는 라이팅 시스템과 내장 컴포넌트 활용방법에 대해서 설명한다. 

PART2의 CHAPTER 4는 Next.js의 디렉토리 구성과 데이터 불로 오는 방법, 

CHAPTER 5는 상태(세션)을 지역적으로, 전역적으로 관리하는 방안, 

CHAPTER 6은 CSS와 내장 스타일링 방법, 

CHAPTER 7은 UI 프레임워크 도입방안, 

CHAPTER 8은 커스텀 서버를 함께 사용하는 방법(대부분은 필요 없지만), 

CHAPTER 9는 단위 테스트, 통합 테스트 방안, 

CHAPTER 10은 SEO와 성능 측정 및 개선 방안, 

CHAPTER 11은 다양한 배포 방안과 적절한 배포 플랫폼을 선택하는 방안에 대해서 설명한다. 

PART3의 CHAPTER 12는 효율적인 사용자 인증과 세션관리를 실전 예제로 설명하고, 

CHAPTER 13은 GraphCMS 연동 및 장바구나 사례, Stripe로 결제하는 법을 구현한다. 

CHAPTER 14는 지면상 못다한 스트리밍 웹 사이트, 블로깅, 채팅과 관련된 연습 주제를 제안하며, 각 주제에 대한 주요한 특징을 설명하고 마무리 한다.

각 장은 해당 주제에 관해 다룰 내용을 먼저 나열 하고, 각각의 소주제에 대해 다양한 사례나 실전 예제로 설명하며, 

마지막으로 이번 장을 정리하고 다음장에 다룰 내용을 소개하며 마무리 한다.

이 책은 기본적으로 Next.js에 대해서 다루지만, 상용 애플리케이션에 대한 저자의 기본 전략이 무엇보다 인상적이었으며, 개인적으로는 Next.js보다 Front-end에서 사용하는 테스트나 배포 전략, GraphQL API 사용법, Front-end 프로그래밍 관습을 많이 배울 수 있어 좋았다. 

저자의 해박한 지식에 존경을 표합니다.

책 커버와 디자인도 깔끔하고, 전혀 지루하지 않게 잘 읽었다.

아래의 문구에서 저는 앞으로 Next.js는 이미 Front-end 분야의 한 축이며, 앞으로로 승승장구할 프레임워크로 발전하고 있다고 생각하게 되었으며, 머지 않아 전자정부프레임워크에서도 주축으로 사용할 것이라 조심스레 전망하게 되었다.

프레임워크를 이야기할 때 절대 잊지 말아야 할 것은 '프레임워크는 단순한 기술 요소가 아니다.' 라는 점입니다. 프레임워크를 고를 때는 프레임워크를 둘러싼 수많은 커뮤니티와 아이디어, 생태계를 고려해야 합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

대상독자 : 리액트 웹 개발자에서 Next.js 프레임워크 사용하는 사람. 

책에서 다루는 SW : Next.js, Node.js(npm, yarm), 도커(11장)

- Next.js는 React를 기반으로한 프레임워크

- Nuxt.js는 Vue.js를 기반으로한 프레임워크

Next.js는 React 기반의 서버사이드 렌더링(SSR) 프레임워크로, React 개발자들이 웹 애플리케이션을 구축하고 운영하는 데 필요한 여러 기능들을 제공합니다. Next.js를 사용하면 웹 애플리케이션의 초기 로딩 속도를 향상시킬 수 있으며, SEO 최적화와 같은 추가적인 이점을 얻을 수 있습니다.

(Next.js가 제공하는 기능 : 코드분할, 서버 사이드 렌더링, 파일 기반 라우팅, 경로 기반 프리페칭, 정적 사이트 생성, 증분 정적 콘텐츠 생성, 타입스크립트에 대한 기본 지원, 자동 폴리필 적용, 이미지 최적화, 웹 애플리케이션의 국제화 지원, 성능분석 등)

Next.js를 사용해보면 가장 먼저 느껴지는 것은 프레임워크가 제공하는 강력한 라우팅 시스템입니다. 페이지를 생성할 때 파일 시스템을 이용해 URL 경로를 매핑하며, 매우 직관적이고 쉽게 이해할 수 있습니다. 이러한 라우팅 시스템은 개발자가 페이지를 빠르게 만들 수 있도록 도와줍니다.

또한 Next.js는 코드 스플리팅, 서버사이드 렌더링, 자동 코드 분할 등의 기능을 제공하여 초기 로딩 속도를 향상시킬 수 있습니다. 이러한 기능은 더 나은 사용자 경험을 제공하고 검색 엔진 최적화에도 도움이 됩니다.

Next.js는 React 개발자들이 React 애플리케이션을 보다 쉽게 개발할 수 있도록 많은 도구와 기능을 제공합니다. 라우팅 시스템과 서버사이드 렌더링 기능을 통해 초기 로딩 속도를 개선하고 검색 엔진 최적화를 가능하게 하며, 코드 스플리팅과 자동 코드 분할 등의 기능으로 애플리케이션 성능을 향상시킬 수 있습니다. 따라서 Next.js는 React 개발자들에게 매우 유용해 보입니다.

또한 Next.js는 커뮤니티에서 개발하는 다양한 플러그인과 라이브러리를 지원합니다. 예를 들어, styled-components나 emotion과 같은 CSS-in-JS 라이브러리를 사용하여 컴포넌트 스타일링을 간편하게 할 수 있습니다. 또한, Jest나 React Testing Library와 같은 테스트 도구를 사용하여 테스트 코드 작성을 지원합니다.

Next.js는 또한 정적 사이트 생성기 기능을 제공합니다. 이 기능을 이용하면 서버사이드 렌더링 없이도 정적인 페이지를 생성할 수 있습니다. 이를 통해 블로그나 문서 사이트 등의 정적인 웹사이트를 만들 때 유용합니다.

마지막으로, Next.js는 배포 과정도 매우 간편해보입니다. Vercel이라는 플랫폼을 사용하면 Next.js 애플리케이션을 쉽게 배포할 수 있습니다. Vercel은 서버리스 아키텍처를 사용하여 애플리케이션의 배포 및 운영을 단순화하고 비용을 절감할 수 있도록 도와줍니다.

다만, 대상 독자가 중급의 ES6+ 활용,리액트, Node.js, REST지식 사전에 필요하여 다소 학습 곡선은 있어 보입니다. 서버 구성에 대한 이해와 설정 능력도 필요하다는 것을 의미합니다. React에 대한 의존성이 있기 때문에 React 버전 업그레이드나 문제가 발생할 경우 이에 대한 대응이 필요합니다.

현재 Next.js는 React를 기반으로한 SSR 프레임워크로써 많은 개발자들이 사용하고 있으며, 책의 이름답게 대부분의 구성이 '실전 감각 익히기'과 '상용 애플리케이션 만들기'들을 통해 단계적으로 사용법을 잘 알려주고 있습니다. 

한빛미디어의 '나는 리뷰어다' 활동으로 위 책을 받게 되었고, 직접 코드도 따라 짜보게 되었습니다.
e-book으로 받아 Google Play Book 에서 웹으로 읽으며 코딩 해보았습니다.

내가 별점을 매긴다면 ❔

★★★★★★★☆☆☆ ( 7/10 ) 점 드리도록 하겠습니다.

- 여러 API 에 대한 미흡한 소개 및 작성
- 프로젝트를 제대로 완료하지 못한 찝찝함

결론부터 말씀드리자면,

1. 어떻게 하면 좀 더 나은 환경의 로드 퍼포먼스를 볼 수 있을지 다시 생각하게 되었어요.
2. 몇 가지 우수한 API, Libraries 를 알게 되었습니다! (ex. Hygraph, auth0, ... )
3. 현업자들도 프로젝트를 진행할때 계정 관련 소스들을 직접 건드리려고 하지 않고 외부에서 따로 사용하려고 한다는 것을 알게되었어요! (기존엔 무조건 내가 만들려고했었음)

일단 잘 배웠습니다!

상세하게 배우지는 못했지만,,,
Nuxt.js는 해보았지만, Next.js는 아예 안해본 입장으로서 좋은 경험이었습니다.
(그렇다고 바로 적용하기는 어려울 것 같네요)

Nuxt.js 를 Vue.js 로 혼자 공부했던 적이 있었는데, 프레임워크의 기능들을 제대로 사용하지 못한 기분이 들었고, 이번 기회로 인해 좀 더 알게되었다는 생각이 듭니다.

이 책에서는 클론 코딩과 같은 느낌이 아니라, 대표적인 기능들만 잘게 쪼개어 몇 가지를 알려주신 듯한 기분이었습니다.

그래서 오히려 클론코딩 스러운 내용을 기대하고 보신다면 실망하실 수도 있어요ㅎㅎ.
- 그래도 읽어보시는 건 꽤나 멋진 선택이실 것 같습니다.

✔  책을 읽으며...

첫 번째로 중요하다고 느낀 것은, [서버와 클라이언트의 분리] 부분이었습니다.

서버에서의 역할과 클라이언트에서의 역할을 명확하게 구분 지을 수 있었습니다.

2번째로, Router를 이용하여 페이지에 로드 할때 기본적으로 동작하는 것들. (마치 Javascript 로 따지자면 document.ready~ 에 해당하는 내용과 같음) 이 생각보다 더 중요한 것처럼 느껴졌어요.

_app.js 와 같은 파일에서 Client 가 App을 사용할 때 기본적으로 실행되고, 거쳐야하는 것들. 등등...

마지막으로, React.js 에 대해 조금 더 알게되었습니다.

불편한 Styling

style 부분에서 너무나도 많은 컴포넌트를 import 하고 props를 내려주게 되어 오히려 불편하더라구요.
  → 리액트 자체가 아니라 ui 부분에서 특별히 공부를 많이 해야할 것처럼 느껴졌습니다. (내가 왜..? 라는 생각이 들정도)
  → 이 책에서는 css 파일을 git repo에 넣어놓고 독자들이 다운로드 할 수 있도록 진행했다면 더 편했을 것 같습니다. (서로가)

내가 느낀 Next.js 의 단점

(책에 대한 비판이 아니고, Next.js에 대한 내용임을 미리 말씀드립니다.)

- React.js 기반이어서 그런지.. 코드가 Vue.js 에 비해서 너무 지저분합니다(대충 길어서 보기 힘들다는 뜻)  
  Typescript 까지 적용하면 얼마나 더 길어질지....무섭네요.

마무리는..

제가 프론트엔드 개발자로서 아직 짧은 경력을 가졌지만, 음... Vue.js 에 익숙해진 눈과 머리가 살짝 React.js 의 코드를 불편하게 느끼는 것 같기도 하지만, 제가 기업급의 개발팀장이었다면 유지·보수 측면에서도 React 대신 Vue.js 를 선택할 것 같습니다.

그래도, React는 '자유롭다' 라는 장점이 있으니까요. 

1. Next.js 란

Next.js는 Vercle 이 만든 React 라이브러리의 프레임워크입니다.

그렇다면 React를 잘 사용하고 있는데 왜 Next.js를 만들었을까요?

React는 Client Side Rendring(CSR)을 합니다. 따라서 웹페이지의 용량이 많은 경우 첫 로딩 시간이 오래 걸리는 단점이 발생합니다. 이러한 단점을 극복한 것이 Next.js입니다.

React와 Next.js의 차이는 바로 리액트는 자바스크립트 라이브러리이고 Next.js는 프레임워크라는 점입니다.

Next.js는 클라이언트와 서버에서 실행할 수 있는 코드에 풍부하고 다양한 기능을 제공하여 웹 애플리케이션을 만들 수 있게 해 줍니다.

2. 대상독자

리액트 웹 개발자 중 Next.js 프레임워크를 사용하여 확장과 유지 보수가 쉬운 풀스택 애플리케이션을 개발하려는 사람을 위해 만들어졌습니다. 

3. 책의 내용

이 책은 리액트로 웹 애플리케이션을 개발한 경험이 있는 독자를 위해 만들어 졌습니다.

바닐라 리액트 애플리케이션과 Next.js 애플리케이션의 차이점 및 장단점,

기존 리액트 애플리케이션에서 Next.js를 점진적으로 사용하는 방법,

Next.js의 강점을 활용하는 방법,

여러가지 예제 프로젝트를 통해 애플리케이션을 효과적으로 개발하고 닦을 수 있는 계획등을 제시하고 있습니다.

예제코드는 https://github.com/hanbit/practical-next.js 에서 다운로드 할 수 있습니다.

또한 컨벤션.테스트,SEO,배포,실무코드 예제까지 서비스를 개발하고 운영하는데  필요한 모든 범위를 다루고 있습니다.

4. 서평

이 책은 중요 부분을 다음과 같이 별도의 색상으로 표기해서 저자가 독자에게 전달 하고 싶은 내용을 정확하게 전달하고 있습니다.

또한 다음과 같이 한Chater 가 끝나면 그 장에서 배웠던 내용을 정리하면서 다음 장에서 배울 내용과의 연계성 들에 대해 설명해 주고 있어서 다시 한번 정리를 할 수 있도록 구성이 되어 있습니다.

이 책을 통해서 온라인 상거래 웹사이트 만들면서 GraphCMS 설정하기,Stripe로 결제 등을 직접 구현 해 볼 수 있고 스트리밍 웹사이트,블로깅 사이트,실시간 채팅 웹 사이트등을 구현해 보면서 Next.js의 모든 기능들을 만나 볼 수 있었습니다.

프로그래밍 언어를 배우는데는 실습 만큼 중요한 것은 없는 것 같습니다.

실습을 통해서 어떤 코드가 어떤 동작을 하는지 이해 하는 것도 쉽고 그것을 통해서 큰 흐름을 깨달을 수 있기 때문입니다.

이 책은 다양한 실습코드를 제공해서 독자들이 충분히 Next.js 를 깨닫게 해 주는 책이었던것 같네요.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."