레벨업 리액트 프로그래밍 with Next.js

웹앱의 작동 원리부터 SSR 방식을 적용한 현대적 접근까지

팍스 지음

비제이퍼블릭 2024년 06월 04일 출간 종이책 : 2024년 05월 31일 출간

작품소개

책소개

리액트는 여전히 전 세계에서 가장 인기 있는 프레임워크로 자리잡고 있습니다. 그리고 갑작스레 떠올라 국내 웹 생태계에 정착한 Next.js는 서버 사이드 렌더링(SSR) 방식의 회귀를 증명했습니다. 이 책과 함께 웹과 프레임워크의 역사, 앱의 작동 원리, 렌더링 방식과 실행 구조에 대해 속속들이 살펴보며 리액트 개발자로서의 기반을 탄탄하게 다져봅시다. 그리고 Next.js 기술의 활용 방법을 예시 코드와 실습 문제로 익히며 실력을 쑥쑥 키워봅시다. 차트 중심 대시보드, AI 챗봇을 통합하는 웹앱, 전자 상거래 사이트를 직접 제작해보는 경험은 실무에서의 든든한 발판이 되어줄 것입니다.

목차

1부 현대 웹 개발의 기초
_1장 리액트와 Next.js를 통한 웹 개발 혁신
__1.1 리액트와 Next.js는 무엇인가?
__1.2 리액트와 Next.js로 얻는 사용자 경험 향상
__1.3 리액트와 Next.js를 통한 개발자 생산성의 제고
__1.4 왜 Next.js인가?
__1.5 요약 및 연습 문제

_2장 웹 세계의 이해
__2.1 웹의 기초: 웹 개발 히스토리
__2.2 렌더링의 이해: 브라우저에서의 웹 페이지 렌더링 메커니즘
__2.3 웹의 기본 구성 요소: HTML, CSS, 자바스크립트
__2.4 네트워킹 기초: 도메인, URL, 라우팅
__2.5 인프라 구조: 웹 서버, 엣지, CDN
__2.6 웹 개발의 필수 구성 요소: 주요 기술과 도구의 통합
__2.7 요약 및 연습 문제

_3장 현대 웹 개발의 고급 기법
__3.1 Next.js 렌더링의 신세계: SSR, CSR, 하이드레이션, 웹 스트리밍
__3.2 코드 유지 보수성의 탁월함: 모듈화와 함수형 프로그래밍 접근 방식
__3.3 배포 및 운영 최적화 전략: 서버 아키텍처의 다양한 옵션
__3.4 현대 웹 프레임워크와 라이브러리: 리액트, 앵귤러, 뷰, 스벨트
__3.5 코어 웹 바이탈: 사용자 경험을 개선하는 접근
__3.6 요약 및 연습 문제

2부 리액트&Next.js 실전 마스터
_4장 효율적인 웹 개발 환경 구축
__4.1 개발 도구 및 라이브러리 설치
__4.2 Next.js 설치
__4.3 첫 Next.js 프로젝트 시작: 보일러플레이트 애플리케이션
__4.4 생산성을 높이는 개발 환경 설정
__4.5 개발 환경의 보안과 유지 보수

_5장 웹 애플리케이션의 뼈대 만들기
__5.1 Next.js를 위한 리액트 개요
__5.2 리액트 컴포넌트와 속성
__5.3 리액트 사용자 상호 작용과 상태 관리
__5.4 리액트의 고급 개념과 패턴
__5.5 반응형 내비게이션 메뉴 실습하기

_6장 최적의 Next.js 애플리케이션 구조 설계
__6.1 Next.js 프로젝트 구조와 조직화
__6.2 Next.js 앱 라우터 기반 라우팅 기법
__6.3 라우팅 시 특정 상황에 대한 UI 처리
__6.4 CSS 스타일과 디자인 적용
__6.5 Next.js의 내장 기능을 활용한 이미지, 폰트, 외부 스크립트 최적화

_7장 Next.js 아키텍처와 작동 원리
__7.1 리액트 서버와 클라이언트를 활용한 렌더링 방식
__7.2 백엔드와 프런트엔드에서 데이터 가져오기
__7.3 빌드 타임 및 런 타임에서의 서버 렌더링 전략과 기법
__7.4 서버 렌더링 결과와 요청 데이터에 대한 캐싱
__7.5 서버와 클라이언트 컴포넌트의 유연한 조합 전략

3부 Next.js의 심화 전략 및 최적화와 성능 관리
_8장 Next.js 고급 기법 탐구
__8.1 병렬 라우트 및 경로 가로채기
__8.2 라우터 핸들러: 동적 라우팅 관리
__8.3 미들웨어: 서버의 요청 완료 전 효율적 처리
__8.4 i18n: 다국어 제공
__8.5 폼 및 변형: 서버 액션
__8.6 메타데이터 관리
__8.7 지연 로딩 성능 최적화
__8.8 MDX 사용
__8.9 콘텐츠 개발을 효율화하는 초안 모드
__8.10 콘텐츠 보안 정책
__8.11 인증: 사용자 보안 관리

_9장 안정적으로 서비스하는 배포 및 전략
__9.1 웹 애플리케이션을 운영하는 빌드 최적화
__9.2 다양한 배포 옵션
__9.3 Next.js 배포 최적화 및 관리 전략
__9.4 소프트웨어 장애 복구와 안정성

_10장 Next.js 애플리케이션 테스팅 및 성능 측정과 최적화
__10.1 단위 및 통합 테스트: Jest와 리액트 테스팅 라이브러리
__10.2 E2E 테스트: Cypress, Playwright
__10.3 웹 바이탈: Next.js의 내장 기능을 활용한 성능 측정
__10.4 성능을 최적화하는 크롬 개발자 도구와 라이트 하우스

4부 실전! 웹 애플리케이션 개발 프로젝트
_11장 차트 중심 대시보드 설계
__11.1 프로젝트 소개 및 라이브러리 설정
__11.2 웹 애플리케이션 스타일링 및 메인 페이지 구축
__11.3 버셀 Postgres 데이터베이스 생성 및 환경 변수 설정
__11.4 인증 환경 설정과 회원가입 및 로그인 구현
__11.5 대시보드 사용자 인터페이스 개선: 사이드 메뉴 구현
__11.6 사용자 계정 관리 및 API 사용 키 발급
__11.7 프로젝트 관리
__11.8 웹 바이탈 지표 정보 추출과 수집
__11.9 라우터 핸들러를 통한 데이터 수신 및 데이터베이스 저장
__11.10 대시보드 UI 구성
__11.11 버셀 배포 플랫폼에 배포 및 업데이트 필요 사항

_12장 AI 챗봇을 통합하는 웹 애플리케이션
__12.1 프로젝트 소개와 라이브러리 설정
__12.2 웹 애플리케이션 스타일링 및 메인 레이아웃 구성
__12.3 OpenAI API와 버셀 AI SDK 알아보기
__12.4 날씨 대화에서 구조화된 데이터 추출하기
__12.5 현재 날씨 정보를 컴포넌트 UI로 제공하는 챗봇 만들기
__12.6 날씨 AI 챗봇 구현 완성
__12.7 추가로 고려해볼 사항

_13장 전자 상거래 사이트
__13.1 프로젝트 소개 및 라이브러리 설정
__13.2 쇼피파이와의 헤드리스 스토어프런트 통합
__13.3 전자 상거래 사이트를 개발하는 베스트 프랙티스
__13.4 추가로 고려해볼 사항

부록 A 리액트와 Next.js를 위한 필수 자바스크립트
부록 B 타입스크립트 기본
부록 C 테일윈드CSS 기본
부록 D Next.js 세그먼트 구성 옵션

출판사 서평

이 책의 특징
- 웹과 프레임워크의 역사, 작동 원리, 실행 구조를 꼼꼼하게 알아봅니다.
- 웹앱 개발을 라우터 기반 코드 아키텍처로 자세하고 친절하게 설명합니다.
- 연관 내용을 현대 국내 실정에 맞게 백과사전 수준으로 세밀하게 다룹니다.
- 독자의 자가진단을 위한 챕터별 내용 요약과 이론 및 실습 문제를 제공합니다.

이 책이 필요한 독자
- 웹과 리액트, Next.js에 대해 샅샅이 파헤치고 싶은 분
- 다시 돌아온 SSR 방식에 대해 정확하게 직면하고 싶은 분
- 리액트 기반의 모던 웹 기술에 관심 있는 분
- Next.js를 깊게 파고들며 리액트 실전 능력을 레벨업하고 싶은 분가장

작가정보

저자(글) 팍스

삼성전자 삼성리서치에서 다양한 플랫폼과 웹 기술을 다루며 광범위한 소프트웨어 아키텍처 경험을 쌓았습니다. 실시간 OS, 임베디드 시스템, 안드로이드 및 타이젠 플랫폼뿐만 아니라 크로미엄(Chromium)과 웹킷(Webkit) 기반의 웹앱 및 JSP, ASP.NET, 장고(Django), 스프링 프레임워크를 활용한 백엔드 등을 구축하며 성능 최적화를 진행했습니다.
카이스트 전산학과 석사 출신으로 다수의 IEEE 논문을 발표하며 성능 및 저전력 시스템 설계 분야에서 전문성을 인정받았고 임베디드 소프트웨어 공모전에서 대상(정보통신부 장관상)을 수상하는 등 이력이 있습니다. 현재는 웹, 모바일, AI를 결합한 혁신적인 서비스 개발에 주력하고 있으며 이 책을 통해 사용자 중심의 소프트웨어 설계와 지속 가능한 개발 방법론을 공유하고자 합니다.
X @PaxCodeXyz
위키독스 팍스 wikidocs.net/profile/info/book/18596
리액트넥스트센터 reactnext-central.xyz