[목 차]
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를 깊게 파고들며 리액트 실전 능력을 레벨업하고 싶은 분가장