레벨업 리액트 프로그래밍 with Next.js
- Published on
- 웹앱의 작동 원리부터 SSR 방식을 적용한 현대적 접근까지
도서 소개
『레벨업 리액트 프로그래밍 with Next.js (웹앱의 작동 원리부터 SSR 방식을 적용한 현대적 접근까지)』 책은 리액트와 Next.js를 사용하여 현대적인 웹 애플리케이션을 구축하는 방법을 단계별로 설명합니다.
목차
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의 내장 기능을 활용한 이미지, 폰트, 외부 스크립트 최적화
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 추가로 고려해볼 사항
피드백 및 논의하기
이 책에 대한 피드백이나 리액트 및 Next.js 관련 논의에 참여해 주세요. Github 계정을 통해 gitcus 게시판을 사용하여 새로운 트렌드와 팁을 나누는 공간입니다.