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

Table of Contents

도서 소개
- 목차
피드백 및 논의하기
출간 후 온라인 추가 자료
- 「12장. AI 챗봇을 통합하는 웹 애플리케이션」의 실습 프로젝트의 업데이트 버전

도서 소개

『레벨업 리액트 프로그래밍 with Next.js (웹앱의 작동 원리부터 SSR 방식을 적용한 현대적 접근까지)』 책은 리액트와 Next.js를 사용하여 현대적인 웹 애플리케이션을 구축하는 방법을 단계별로 설명합니다.

온라인 서점 구매: 예스24, 교보문고, 알라딘, 인터파크, 네이버
소스코드 다운로드: Github 링크

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 게시판을 사용하여 새로운 트렌드와 팁을 나누는 공간입니다.

도서 내용 피드백

오타, 내용 추가, 소스 코드 설명 등 피드백을 남겨 주세요.

리액트와 Next.js 웹 개발 논의

최신 리액트와 Next.js에 대한 논의 및 도서에 없는 기술을 요청하세요.

출간 후 온라인 추가 자료

「12장. AI 챗봇을 통합하는 웹 애플리케이션」의 실습 프로젝트의 업데이트 버전

『레벨업 리액트 프로그래밍 with Next.js』 책의 '12장 AI 챗봇을 통합하는 웹 애플리케이션' 실습 프로젝트는 2.x 버전으로 구현되었습니다. 버전 2.x에서는 기본적인 텍스트 생성 및 채팅 기능을 지원했지만, 대규모 언어 모델에 대한 접근 및 관리 기능이 제한적이었으며 새로운 기능 추가에 대한 유연성이 부족했습니다.

버전 3.x로 업그레이드되면서 많은 변화가 있었습니다.

성능 향상, 새로운 스트리밍 텍스트 프로토콜 도입, useCompletion 훅 추가 등의 새로운 기능이 추가되었으며 기존의 StreamingTextResponse API가 새로운 프로토콜로 대체되었습니다. 버전 3.1에서는 클라이언트와 서버 간의 데이터 스트리밍 기능이 개선되고 다양한 AI 모델 제공자에 대한 지원이 강화되었습니다. 버전 3.2에서는 버그 수정 및 안정성 개선, 성능 최적화, 새로운 기능의 도입이 이루어졌습니다.

그래서 여기 웹 페이지를 통해 아래 소스 코드와 블로그에서 추가 정보를 제공합니다.

날씨 AI 챗봇 v2

업데이트된 버전은 최신 버셀 AI SDK를 사용하고 OpenAI의 Chat Completion과 Assistants를 이용하여 구현된 예제를 설명합니다.