메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

실전에서 바로 쓰는 Next.js

SSR부터 SEO, 배포까지 확장성 높은 풀스택 서비스 구축 가이드

한빛미디어

번역서

판매중

  • 저자 : 미셸 리바
  • 번역 : 박수현
  • 출간 : 2023-01-20
  • 페이지 : 332 쪽
  • ISBN : 9791169210713
  • 물류코드 :11071
  • 초급 초중급 중급 중고급 고급
4.6점 (9명)
좋아요 : 18

Next.js의 모든 기능을 낱낱이 파헤치고, 온라인 상거래 사이트까지 직접 구축해보는 웹 개발 실전서

 

이 책의 강점은 리액트-Next.js를 함께 사용하는 방법과 Next.js를 단독으로 사용할 수 있는 실질적인 방법을 모두 제공한다는 점입니다. 따라서 기존 리액트 개발자뿐만 아니라 리액트를 사용하지 않는 웹 개발자에게도 실용적입니다. 

특히 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 비롯하여 스타일링, 인증, API 호출 등 대규모 애플리케이션 개발에 필요한 내용까지 다루기 때문에 실전에서 바로 활용할 수 있습니다. 또한 이 모든 내용을 토대로 온라인 상거래 웹 사이트를 직접 구현하고 배포해보며 Next.js와 리액트 개발 실력을 한층 더 높일 수 있습니다. 

웹 애플리케이션의 SEO, 사용자 경험, 개발자 만족도를 모두 향상시키고 싶은가요? 그 답은 Next.js에 있습니다.

 

 

상세이미지_실전에서 바로 쓰는 Next.js_700px.jpg

미셸 리바 저자

미셸 리바

이탈리아 밀라노에서 구글 개발자이자 소프트웨어 아키텍트로 일해온 열정 넘치는 개발자입니다. 수년간 많은 오픈소스 프로젝트에 기여했으며 Haskell, Elixir, Go, 타입스크립트 등 다양한 프로그래밍 언어를 사용합니다. 또한 여러 가지 주제로 글을 쓰고 있으며 많은 국제 콘퍼런스에서 연사로 활동하고 있습니다. 책을 쓰는 동안에는 파라마운트 글로벌 아키텍처 팀에서 시니어 소프트웨어 엔지니어로 근무하며 스트리밍 웹 사이트의 핵심인 멀티테넌트 Node.js 애플리케이션을 개발했습니다. 현재는 아일랜드 트라모레에 있는 소프트웨어 회사 NearForm에서 시니어 소프트웨어 아키텍트로 일하고 있습니다.

박수현 역자

박수현

홍익대학교 컴퓨터공학과에서 박사 학위를 받았으며 현재는 SK텔레콤에서 개발자로 일하고 있습니다. 커널, 시스템, 클라우드 컴퓨팅, 쿠버네티스, 웹 등 다양한 개발 분야에 관심을 가지고 있으며, 『자바스크립트는 왜 그 모양일까?』(인사이트, 2020), 『스벨트 앤 새퍼 인 액션』(한빛미디어, 2021), 『클라우드 네이티브 애플리케이션 디자인 패턴』(한빛미디어, 2022)을 번역했습니다. 

PART 1 Next.js의 세계로

 

CHAPTER 1 Next.js 알아보기

1.1 준비하기

1.2 Next.js란?

1.3 Next.js와 비슷한 프레임워크

1.4 왜 Next.js일까?

1.5 리액트에서 Next.js로

1.6 Next.js 시작하기

-프로젝트 기존 구조

-타입스크립트 지원

-바벨와 웹팩 설정 커스터마이징

정리하기

 

CHAPTER 2 렌더링 전략

2.1 서버 사이드 렌더링 (SSR)

2.2 클라이언트 사이드 렌더링 (CSR)

-React.useEffect 훅

-process.browser 변수

-동적 컴포넌트 로딩

2.3 정적 사이트 생성 (SSG)

정리하기

 

CHAPTER 3 Next.js 기초와 내장 컴포넌트

3.1 라우팅 시스템

-페이지에서 경로 매개변수 사용하기

-컴포넌트에서 경로 매개변수 사용하기

-클라이언트에서의 내비게이션

3.2 정적 자원 제공

-자동 이미지 최적화

-외부 서비스를 통한 자동 이미지 최적화

3.3 메타데이터

-공통 메타 태그 그룹

3.4 _app.js와 _document.js 페이지 커스터마이징

-_app.js 페이지

-_document.js 페이지

정리하기

 

 

PART 2 Next.js 실전 감각 익히기

 

CHAPTER 4 코드 구성과 데이터 불러오기

4.1 디렉터리 구조 구성

-컴포넌트 구성

-유틸리티 구성

-정적 자원 구성

-스타일 파일 구성

-lib 파일 구성

4.2 데이터 불러오기

-서버가 데이터 불러오기

-서버에서 REST API 사용하기

-클라이언트가 데이터 불러오기

-클라이언트에서 REST API 사용하기

-GraphQL API 사용하기

정리하기

 

CHAPTER 5 지역 및 전역 상태 관리

5.1 지역 상태 관리

5.2 전역 상태 관리

-콘텍스트 API

-Redux

정리하기

 

CHAPTER 6 CSS와 내장 스타일링 메서드

6.1 Styled JSX

6.2 CSS Module

6.3 SASS

정리하기

 

CHAPTER 7 UI 프레임워크

7.1 UI 라이브러리

7.2 Chakra UI

7.3 Tailwind CSS

7.4 Headless UI

정리하기

 

CHAPTER 8 커스텀 서버

8.1 커스텀 서버가 필요한 경우

8.2 Express.js 서버

8.3 Fastify 서버

정리하기

 

CHAPTER 9 테스트

9.1 테스트란?

9.2 Jest를 사용한 단위 테스트와 통합 테스트

9.3 Cypress를 사용한 엔드 투 엔드 테스트

정리하기

 

CHAPTER 10 SEO와 성능 관리

10.1 SEO와 성능

10.2 SEO와 성능 관점에서의 렌더링 전략

-실제 웹 사이트를 통해 살펴본 렌더링 전략의 선택 이유

-사진 세부 정보 페이지

-프라이빗 라우트

-선택한 렌더링 전략 정리

10.3 SEO 다루기

10.4 성능 다루기

정리하기

 

CHAPTER 11 배포 플랫폼

11.1 다양한 배포 플랫폼

11.2 Vercel에 배포하기

11.3 CDN에 정적 사이트 배포하기

11.4 적절한 CDN 고르기

11.5 아무 서버에나 Next.js 배포하기

11.6 도커 컨테이너에서 Next.js 애플리케이션 실행하기

정리하기

 

 

PART 3 Next.js로 상용 애플리케이션 만들기

 

CHAPTER 12 인증과 사용자 세션 관리

12.1 인증과 사용자 세션

12.2 JSON web token

12.3 커스텀 인증

12.4 Auth0

12.5 Auth0 커스터마이징

정리하기

 

CHAPTER 13 GraphCMS로 온라인 상거래 웹 사이트 만들기

13.1 온라인 상거래 웹 사이트 만들기

13.2 GraphCMS 설정하기

13.3 상점 홈 페이지, 장바구니 및 제품 상세 페이지 만들기

13.4 Stripe로 결제 구현하기

정리하기

 

CHAPTER 14 예제 프로젝트로 살펴보는 Next.js의 다음 단계

14.1 무궁무진한 가능성을 가진 프레임워크

14.2 Next.js 연습을 위한 프로젝트

-스트리밍 웹 사이트

-블로깅 플랫폼

-실시간 채팅 웹 사이트

14.3 다음 단계

정리하기

Next.js 사용의 강점부터 최적으로 활용하는 방법까지! 한 권으로 끝내는 올인원 가이드

 

아직도 리액트만 사용하고 있나요? Next.js는 리액트와 함께 사용할 때 뿐만 아니라 단독으로 사용해도 뛰어난 성능을 보여줍니다. 또한 리액트에 없는 여러 기능을 지원하며 설정이나 개발 옵션 등에서도 유용한 방법을 제공합니다. 따라서 Next.js를 사용하면 ‘빠른’ 개발과 ‘빠른’ 로딩 속도라는 두 마리를 토끼를 모두 잡을 수 있습니다.

 

평소 리액트만으로 웹 개발을 해왔다면 이 책을 통해 Next.js의 다양한 기능을 익히고 바로 기존 리액트 프로젝트에 적용해볼 수 있습니다. 특히 많은 웹 개발자가 관심을 갖는 확장성에 초점을 맞추어 실용적인 기능을 소개하고 최신 개발 방식이 적용된 테스트 및 배포 방법을 설명합니다. Next.js를 사용해야 하는 이유부터 핵심 기능을 사용하는 방법까지 모두 다루기 때문에 이 책 한 권으로 상용 수준의 서비스를 구축하고 Next.js 개발자로 거듭날 수 있습니다.

 

 

대상 독자

  • Next.js로 풀스택 애플리케이션을 개발하고 싶은 사람
  • 기존 리액트 애플리케이션을 개선하고 싶은 사람
  • 웹 개발 실력을 레벨업하고 싶은 사람

 

주요 내용

  • Next.js의 기본 사항과 내장 컴포넌트 소개
  • 적합한 렌더링 전략 선택법
  • API 호출과 상태 관리
  • 스타일링 메서드와 UI 프레임워크 사용법
  • 테스트 전략 및 성능 관리 방법
  • 다양한 배포 플랫폼에서 배포하는 방법
  • 온라인 상거래 웹 사이트 구축 실습
  • 스트리밍 웹 사이트, 블로깅 플랫폼, 실시간 채팅 웹 사이트 구축 가이드

 

추천사

 

Next.js는 최근 가장 주목받는 프레임워크입니다. Next.js를 사용하면 일반적으로 구현하기 어려운 서버 사이드 렌더링(SSR)과 다양한 웹 애플리케이션의 기능들을 아주 손쉽게 구현할 수 있습니다. 이 책은 Next.js의 핵심 개념을 자세히 설명할 뿐만 아니라 최신 UI 프레임워크와 테스트 코드 작성 방법까지 다룹니다. Next.js 입문자가 첫걸음을 내딛는 데 좋은 안내서입니다.

_이인제(소플), 핫티스트랩 대표

 

웹 사이트를 만들 때는 서비스의 성격에 적합한 렌더링 전략을 선택해야 합니다. 지금 운영 중인 서비스가 가진 문제점을 서버 사이드 렌더링(SSR)으로 해결하고자 한다면 이 책을 통해 많은 도움을 받을 수 있습니다. 리액트로 만들어진 프로젝트를 Next.js로 전환하거나 점진적으로 Next.js를 적용하려는 개발자와 개발 팀에게 이 책을 추천합니다.

_강병진, 퍼즐에이아이 개발리드

 

Next.js에서는 SSR, CSR, ISR, SSG 개념을 정확히 이해하는 것이 필수입니다. 이 책은 예시를 통해 이러한 개념을 친절하게 설명할 뿐만 아니라 컨벤션, 테스트, SEO, 배포, 실무 코드 예제까지 서비스를 개발하고 운영하는 데 필요한 모든 범위를 다룹니다. 이 책으로 Next.js를 빠르게 익히고, 개발하고, 서비스를 출시해봅시다!

_권영재, 스퀘어랩 개발자

 

SPA로 만들어지는 서비스는 규모가 커짐에 따라 서비스 첫 접속 시 로딩 시간이 길어지고, 이 로딩 시간에 지루함을 느낀 사용자는 웹을 이탈하게 됩니다. 이 책은 이러한 SPA의 문제를 SSR이 어떻게 해결했는지, SSR로 무엇을 할 수 있는지 Next.js 이론부터 실전 프로젝트까지 모두 다루는 좋은 지침서입니다.

_노경환, 캐롯손해보험 프런트엔드 개발자

◎ 추천 포인트
  1. 초급수준의 사람들도 이해하기 쉬울정도의 자세하고 친절한 설명
  2. Next.js의 렌더링 전략에 대한 자세한 설명
  3. 따라가며 실습이 가능한 구성
누가 이 책을 읽어야할까?
이 책은 확장과 유지보수가 쉬운 풀스택 애플리케이션을 개발하려는 사람을 위해 만들어졌으며, 그에 따라 중급 수준 이상의 ES6+, 리액트, Node.js, REST 지식을 어느정도 갖춘 사람들에게 가장 효과적일 것 같다.
 
Next.js 를 공부하는 근본적인 이유
Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에 없는 서버 사이드 렌더링(SSR), 정적사이트생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공하고 있다.
그렇기 때문에 이 기능들을 사용하는것만으로도 기존 바닐라 리액트 애플리케이션의 단점을 커버할 수 있으며, 많은 문제를 해결할 수 있다.
 
그에 맞게 이 책은 웹 애플리케이션을 웹 브라우저에 제공하는 방법을 의미 Next.js의 렌더링 전략에 대해서부터 자세히 설명하고 있다.
 
서버사이드 렌더링이란 서버에서 HTML 페이지를 동적으로 렌더링하고 웹 브라우저에 전송하는것을 밀한다.
리액트 하이드레이션덕분에 웹 앱은 싱글페이지어플리케이션(SPA)처럼 동작할 수 있고, 클라이언트 사이드 렌더링과 SSR의 장점을 모두 갖습니다.
또한, 페이지를 서버에서 렌더링한다는 것은 쿠키관리, 주요 API, 데이터 검증 등과 같은 작업을 서버에서 처리한다는 뜻이며, 중요한 데이터를 클라이언트에 노출할 필요가 없기 때문에 더 안전하다고 할수 있다.
또한 클라이언트에서 서버가 렌더링한 HTML콘텐츠를 받기때문에 봇이나 웹 크롤러 같은 검색 엔진 웹 문서 수집기가 페이지를 렌더링할 필요가 없어 웹애플리케이션의 SEO점수가 높아지는 장점이 있다.
 
클라이언트 사이드 렌더링은 표준 리액트 앱서버에서 자바스크립트 번들을 클라이언트로 전송한다.
웹앱이 렌더링을 시작하기 전에 웹 브라우저 화면이 비어있는것 처럼 보이는 이유는, 서버가 웹 애플리케이션이 필요로하는 스크립트와 스타일만 포함된 기본 HTML마크업만 전송하기 때문이다.
클라이언트 사이드 렌더링은 네이티브 어플리케이션처러 느껴지는 속도감과, 쉬운 페이지 전환, 지연된 로딩과 성능, 서버 부하 감소가 큰 장점이라고 할 수 있다.
 
마무리하며
처음에 중급이상 수준의 개발 실력을 갖고있는 사람들이 이해하기 쉽다고 했는데, 사실 초급수준의 사람들도 이해하기 쉬울정도로 책이 설명이 아주 잘되어있고, 예시코드들이 가시성있게 잘 만들어 따라하기 쉽운 편이다.
Part2만 보아도 실전에서 사용하는 코드구성부터 시작해서 커스텀 서버와 테스트코드 배포까지 실전에서 쓸수 있는 다양한 내용들을 배울수 있다.
또한, 실전에서 사용할수 있도록 예제용 프로젝트들을 보고 연습 프로젝트로 직접 구현해 볼수 있도록 제공하고 있다. 이 책 하나만 으로도 Next.js를 실전에서 쓸수있을 정도의 책이라고 생각하며, Next.js를 실무에 적용하길 검토한다면 꼭 읽어보길 권한다.

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

 

 

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

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

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

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

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

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

한빛미디어의 "실전에서 바로 쓰는 Next.js"는 기존 React 개발자 혹은 자바스크립트 가능한 개발자, 백엔드 프로그래밍 개발자가 코드 예제를 따라 하면서 언어를 배울 수 있는 자습서 개념의 도서입니다. 아주 초심자 레벨이기보다는 기존의 언어를 몇 개 습득한 분들에게 더욱 도움이 될 수 있을 정도의 난이도를 가지고 있다고 생각됩니다.
 
도서의 두께와 크기는 그렇게 두꺼운 내용의 바이블 도서는 아닙니다. 충분히 들고 다니면서 학습할 수 있는 가벼움과 중간 사이즈의 도서이지만 내용 구성은 상당히 알찹니다.
 
Next.js가 리액트의 어떤 한계를 개선한 것인지는 기술 문서에 잘 나와있습니다만 가장 큰 특징은 개인적으로 SSR의 한계를 극복하기 위해 노력한 프레임워크라는 부분입니다.
 
서버 사이드 렌더링(SSR) 언어의 경우 CSR과 다르게 요청 이후 콘텐츠가 생성되면서 검색 엔진들이 자주 사용하는 키워드 검색이나 본문 검색 결과에서 누락되는 경우가 많기 때문에 서버 사이트 렌더링 시 검색엔진 최적화(SEO: Search Engine Optimization)의 문제를 해결할 수 있습니다. 이 내용은 2장 렌더링 전략에 여러 토픽을 통해 충실하게 나와있습니다.
 
1장의 서론 파트에서 다루는 내용인데 리액트를 사용해 본 개발자라면 Next.js가 그리 어렵지 않습니다. 모든 언어의 짜임새와 철학이 거의 유사하기 때문입니다. 이 도서는 React-Next.js의 혼용과 더불어 Next.js를 단독으로 사용하는 경우도 다루고 있습니다. 또한 리액트, Nest.js에 빠지지 않는 타입스크립트 지원이 Next.js에서도 그대로 연속됩니다.
 
PART2를 통해 기본 Next.js의 기능을 배우게 됩니다. 특히 10장의 내용이 리액트와 구본 되는 내용을 담은 하이라이트입니다. getStaticProps라는 함수를 통해 가능합니다. 페이지가 첫 요청될 때 한 번 실행되는 빌드 타임에 데이터를 불러와 페이지를 미리 만들어 둘 수 있습니다. 이렇게 미리 만들어진 페이지는 정적 파일로 저장되어, 다음에 같은 요청이 들어올 때는 캐싱된 페이지를 보여주기 때문에 속도가 빠릅니다.
 
개인적으로는 3장의 자동 이미지 최적화 내용이 흥미로웠습니다. 아직도 바이트 낭비 및 다양한 크기의 해상도 지원을 위해 외부 라이브러리를 사용하거나 서버리스 방식의 클라우드 리소스를 사용하는 경우가 많은데 백엔드 단에서 이 부분을 직접 해결이 가능하기 때문입니다.
 
PART3는 현업에서 웹 서비스 개발 시 자주 필요한 기능을 담고 있는 아주 실질적인 내용들입니다. 특히 토큰 형식의 JWT(JSON Web Token)을 통한 인증은 꼭 필요한 기능이고 사용자 세션 관리는 늘 중요합니다. 13장의 온라인 상거래 예제를 통해 CMS를 활용한 데이터의 추출과 표현, CRUD 기능을 충실히 다루었습니다.
 
마지막 14장에서는 앞에서 다룬 내용들을 독자에게 리마인드 시키고 앞으로 더 배워야 할 내용들을 책 이외의 내용을 포함하여 독자에게 알려주는 저자의 센스가 담겨있습니다.
 
(웹 ) 프레임워크를 고를 때는 프레임워크를
둘러싼 수많은 커뮤니티와 아이디어,
생태계를 고려해야 합니다.
-- 14장 내용 중에서,
 
Nest.js는 무궁무진한 가능성을 가진 프레임워크입니다. 이 책을 통해 핵심 내용을 스터디하고 다양한 커뮤니티내 지식과 예제를 통해 본인만의 기능을 개발하다 보면 어느새 Next.js 전문가가 되실 거라 생각합니다.
"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."
 
 
실전에서 바로 쓰는 Next.js
실전에서 바로 쓰는 Next.js
저자
미셸 리바
출판
한빛미디어
발매
2023.01.20.
 


이 책은 제목처럼 실전에서 사용할 수 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

SSR부터 SEO, 배포까지 확장성 높은 풀스택 서비스 구축 가이드

미셸 리바 지음, 박수현 역, 한빛미디어, 2023

 

 

20230226_162716.jpg

 

20230226_162725.jpg

 

 

웹 사이트를 만들 때 서비스의 성격에 적합한 렌더링 전략을 선택해야 합니다. 그러나 리액트로 개발한 애플리케이션의 가장 큰 문제는 클라이언트에서만 랜더링할 수 있다는 점이었습니다. 최초 한번 전체 페이지를 다 불러오고 필요시 응답 데이터를 사용해 페이지 특정부분을 브라우저에서 렌더링해서 변경해주는 방식인 Single Page Application(SPA)으로 만들어지는 서비스는 사이트의 규모가 커짐에 따라 첫 접속시 로딩 시간이 길어지고 이에 따라 사용자가 기다리지 못하고 웹을 이탈하게 되는 경우도 생깁니다. 지금 운영중인 서비스가 이러한 문제점을 가지고 있어서, 이를 서버 사이드 렌더링(SSR) 방식으로 해결하고자 한다면 이 책을 통해 많은 도움을 받을 수 있습니다.

 

 

20230226_163055.jpg

 

 

Next.js를 사용하면 일반적으로 구현하기 어려운 SSR과 다양한 웹 애플리케이션의 기능들을 손쉽게 구현할 수 있습니다. 이 책은 Next.js의 핵심 개념을 자세히 설명할 뿐만 아니라 최신 UI 프레임워크와 테스트 코드 작성 방법까지 다룹니다. 리액트로 만들어진 프로젝트를 Next.js로 전환하려는 개발자들과 점진적으로 Next.js를 적용하려는 Next.js 입문자들에게 좋은 안내서 역할을 할 것 입니다.

 

 

Next.js에 대한 쉬운 이해를 위해 상세한 설명과 다양한 코드샘플들을 이용하여 자세히 설명하고 있습니다. 웹 사이트를 만들 때 필요한 기능들을 차근 차근 구현해 가다, 끝으로 온라인 상거래 웹 사이트를 직접 구축해 보면서 Next.js와 리액트를 함께 사용하는 방법까지 다루고 있습니다.

 

다만, 이로 인해 이 책의 대상 독자는 이미 중급 정도의 실력을 가지고 있어야 합니다. 즉, 이 책은 리액트 웹개발자 중 Next.js 프레임워크를 사용하여 확장과 유지보수가 쉬운 풀스택 애플리케이션을 개발하려는 사람들을 독자층으로 하며, 중급 수준 이상의 ES6+, 리액트, Node.js, REST 관련 지식이 있어야 책을 읽어갈 수 있습니다.

 

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

 

 

 

20230226_144523.jpg

Next.js 이책은

한마디로 말하면 바로 이것이다. SSR부터 SEO, 배포까지 확장성 높은 풀스택 서비스를 구현하도록 이끌어 주는 책이다 라고 이야기하고 있다.

Next.js 는 최근에 가장 주목받는 프레임워크라고 말할 수 있다.

Next.js 를 사용하면 일반적으로 구현하기 어려운 서버 사이드 렌더링(SSR)과 다양한 웹 애플리케이션 기능들을 아주 손쉽게 구현할 수 있다고 한다. 그래서 이 책에서는 Next.js의 핵심 개념을 자세히 설명하고 최신 UI 프레임워크와 테스트 코드 작성 방법까지 자세하게 다룬다. 이 책은 next.js 입문자도 볼 수 있도로 구성된 아주 좋은 안내서이기도 하다. 다만 난이도는 어느정도 있다고 봐야한다. 읽기가 쉽지는 않을지도 모른다.

이 책에서 다루는 내용


하이브리드 랜더링,

라우트 프리페칭,

자동 이미지 최적화,

국제화 등 여러 가지 기능에 대해서 다루고 있습니다.

총 챕터는 14개로 구성 되어져 있습니다.

각 구성 내용은 1장은 프레임워크에 대해서 간단하게 소개하고 새로운 프로젝트를 만들고 설정하고 수정하는 방법에 대한 이야기로 이루어져 있어 쉽게 넘어갈 수 있고

2장은 다양한 렌더링 메서드를 살펴보면서 서버 사이드 렌더링, 정적 사이트 생성과 증분 정적 재생성의 방법에 대해서 차근 차근 설명해줍니다.

3장에서는 검색 엔진 최적화 및 성능 관점에 대해서 이야기합니다.

4장에서는 Next.js 프로젝트를 구성하는 유용한 방법과 데이터를 가져오는 방법에 대해서 설명하고 이해하도록 하고 있습니다.

5장에서는 리액트 콘텍스트와 Redux를 사용한 상태 관리 방법에 대한 소개와 함께 컴포넌트 수준에서의 상태를 다루는 방법을 알려줍니다.

6장에서는 기본 스타일링 메서드를 소개하고 있고, 7장에서는 최신 UI 프레임워크를 사용하는 방법에 대해 설명합니다.

8장에서는 Next.js에서 커서텀 서버를 사용하는 경우와 그렇지 않은 경우에 대해서 자세히 설명하고 다루고 있습니다. 9장에서는 단위테스 및 엔드 투 엔드 테스트 방법에 대해서 어떠한 구성으로 접근해야 하는지 설명합니다.

10장에서는 성능 향상에 대한 내용, 11장에서는 애플리케이션을 배포하기 위해 알맞은 플랫폼을 선택하는 법, 12장에서는 사용자 인증 처리를 위해서 안전하게 접근하고 적용하는 방법에 대해, 13장에서는 실습을 위한 웹 사이트를 만들어 보고 전체적인 Next.js 에 대해 이해 하도록 유도하고 있습니다. 마지막으로 14장에서는 좀 더 실력을 키울 수 있도록 몇 가지 예제 프로젝트르 소개하며 마무리 하고 있습니다.

이 책은 어느정도 리액트에 대해 알고 있어야 이해 할 수 있는 책입니다. 물론 몰라도 읽고 따라해 보기는 할 수 있지만 Next.js를 체계적으로 알고 사용하려고 한다면 리액트를 기본적인 도서 한권 정도 읽고 접근하는게 좋다고 생각합니다. 중간 중간 어려운 부분도 있기 때문입니다.


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

 

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

 

대상독자 : 리액트 웹 개발자에서 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 를 깨닫게 해 주는 책이었던것 같네요.

 

 

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

결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 도서명 :
실전에서 바로 쓰는 Next.js
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
실전에서 바로 쓰는 Next.js
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
실전에서 바로 쓰는 Next.js
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실