홈앤서비스 SK BROADBAND

근본과 정도를 지휘하는 현대적 접근
리액트의 정석과 넥스트JS피디아를 한 번에 맛보다

리액트는 여전히 전 세계에서 가장 인기 있는 프레임워크로 자리잡고 있다. 그리고 갑작스레 떠올라 국내 웹 생태계에 정착한 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 세그먼트 구성 옵션