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

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

팍스

비제이퍼블릭(BJ퍼블릭)

$53.13

SKU

9791165922795

[Free shipping over $100]

Standard Shipping estimated by Thu 12/5 - Wed 12/11 (주문일로부 10-14 영업일)

Express Shipping estimated by Mon 12/2 - Wed 12/4 (주문일로부 7-9 영업일)

* 안내되는 배송 완료 예상일은 유통사/배송사의 상황에 따라 예고 없이 변동될 수 있습니다.

Publication Date	2024/05/31
Pages/Weight/Size	17424840mm
ISBN	9791165922795
Categories	IT 모바일 > 웹사이트

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Description

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

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

Contents

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 세그먼트 구성 옵션

Author

팍스

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