▣ 01장: Next.js와 타입스크립트를 활용한 모던 개발 1.1 Next.js와 타입스크립트 1.2 프런트엔드 개발의 변천 __1.2.1 자바스크립트 여명기와 제이쿼리의 인기 __1.2.2 SPA의 등장과 MVC/MVVM 프레임워크 __1.2.3 리액트의 등장과 컴포넌트 지향/상태 관리 __1.2.4 Node.js의 약진 __1.2.5 AltJS의 유행과 타입스크립트의 꾸준한 확산 __1.2.6 빌드 도구와 태스크 러너 __1.2.7 SSR/SSG의 필요성 __1.2.8 Next.js 등장 1.3 모던 프런트엔드 개발의 설계 사상 __1.3.1 프런트엔드 기술의 복잡화 __1.3.2 컴포넌트 지향 __1.3.3 Next.js가 필요해진 이유 ▣ 02장: 타입스크립트 기초 2.1 타입스크립트 기초 지식 __2.1.1 타입스크립트 등장 배경 __2.1.2 타입스크립트와 Visual Studio Code __2.1.3 타입스크립트와 자바스크립트의 차이 __2.1.4 타입스크립트 커맨드라인 도구를 사용한 컴파일 2.2 타입 정의 __2.2.1 변수 __2.2.2 원시 타입 __2.2.3 배열 __2.2.4 객체 타입 __2.2.5 any __2.2.6 함수 2.3 기본적인 타입의 기능 __2.3.1 타입 추론 __2.3.2 타입 어서션 __2.3.3 타입 앨리어스 __2.3.4 인터페이스 __2.3.5 클래스 2.4 실제 개발 시 중요한 타입 __2.4.1 Enum 타입 __2.4.2 제네릭 타입 __2.4.3 Union 타입과 Intersection 타입 __2.4.4 리터럴 타입 __2.4.5 never 타입 2.5 타입스크립트 테크닉 __2.5.1 옵셔널 체이닝 __2.5.2 논-널 어서션 연산자 __2.5.3 타입 가드 __2.5.4 keyof 연산자 __2.5.5 인덱스 타입 __2.5.6 readonly __2.5.7 unknown __2.5.8 비동기 Async/Await __2.5.9 타입 정의 파일 2.6 타입스크립트 개발 시 설정 __2.6.1 tsconfig.json __2.6.2 Prettier __2.6.3 ESLint __2.6.4 컴파일 옵션 ▣ 03장: 리액트/Next.js 기초 3.1 리액트 입문 __3.1.1 리액트 시작하기 __3.1.2 리액트 기본 __3.1.3 리액트 컴포넌트 작성하기 3.2 리액트에서의 컴포넌트 __3.2.1 리액트 요소 __3.2.2 컴포넌트(리액트 컴포넌트) 3.3 리액트에서의 타입 3.4 Context(콘텍스트) 3.5 React Hooks(훅) __3.5.1 useState와 useReducer - 상태 훅 __3.5.2 useCallback과 useMemo - 메모이제이션 훅 __3.5.3 useEffect와 useLayoutEffect - 부가 작용 훅 __3.5.4 useContext - Context를 위한 훅 __3.5.5 useRef와 useImperativeHandle - ref 훅 __3.5.6 커스텀 훅과 useDebugValue 3.6 Next.js 입문 __3.6.1 프로젝트 셋업 __3.6.2 프로젝트 기본 구성 3.7 Next.js 렌더링 방법 __3.7.1 정적 사이트 생성(SSG) __3.7.2 클라이언트 사이드 렌더링(CSR) __3.7.3 서버 사이드 렌더링(SSR) __3.7.4 점진적 정적 재생성(ISR) 3.8 페이지와 렌더링 방법 __3.8.1 Next.js의 페이지와 데이터 취득 __3.8.2 SSG를 통한 페이지 구현 __3.8.3 getStaticProps를 사용한 SSG를 통한 페이지 구현 __3.8.4 getStaticPaths를 사용한 여러 페이지의 SSG __3.8.5 SSR을 통한 페이지 구현 __3.8.6 ISR을 통한 페이지 구현 3.9 Next.js의 기능 __3.9.1 링크 __3.9.2 이미지 표시 __3.9.3 API 라우터 __3.9.4 환경 변수/구성 ▣ 04장: 컴포넌트 개발 4.1 아토믹 디자인을 통한 컴포넌트 설계 __4.1.1 프레젠테이션 컴포넌트와 컨테이너 컴포넌트 __4.1.2 아토믹 디자인 __4.1.3 아톰 __4.1.4 몰리큘 __4.1.5 오거니즘 __4.1.6 템플릿 __4.1.7 페이지 4.2 스타일드 컴포넌트를 사용한 스타일 구현 __4.2.1 스타일드 컴포넌트를 Next.js에 도입 __4.2.2 스타일드 컴포넌트를 사용한 컴포넌트 구현 4.3 스토리북을 사용한 컴포넌트 관리 __4.3.1 스토리북 기본 사용 방법 __4.3.2 액션을 사용한 콜백 핸들링 __4.3.3 컨트롤 탭을 사용한 props 제어 __4.3.4 애드온 4.4 컴포넌트의 단위 테스트 __4.4.1 리액트에서의 단위 테스트 __4.4.2 테스트 환경 구축 __4.4.3 리액트 테스팅 라이브러리를 사용한 컴포넌트 단위 테스트 __4.4.4 비동기 컴포넌트의 단위 테스트 ▣ 05장: 애플리케이션 개발 1 - 설계/환경 설정 5.1 이번 장에서 개발하는 애플리케이션 __5.1.1 애플리케이션 사양 __5.1.2 애플리케이션 아키텍처 5.2 개발 환경 구축 __5.2.1 Next.js 프로젝트 작성 __5.2.2 스타일드 컴포넌트 설정 __5.2.3 ESLint 설정 __5.2.4 스토리북 설정 __5.2.5 React Hook Form 도입 __5.2.6 SWR 도입 __5.2.7 React Content Loader 도입 __5.2.8 머티리얼 아이콘 도입 __5.2.9 환경 변수 __5.2.10 테스트 환경 구축 __5.2.11 JSON 서버 설정 ▣ 06장: 애플리케이션 개발 2 - 구현 6.1 애플리케이션 아키텍처와 전체 구현 흐름 6.2 API 클라이언트 구현 __6.2.1 fetcher 함수 __6.2.2 API 클라이언트 함수 __6.2.3 애플리케이션에서 사용되는 데이터 타입 __6.2.4 개발 환경을 위한 API 요청 프락시 6.3 컴포넌트 구현 준비 __6.3.1 반응형 디자인 대응 컴포넌트 __6.3.2 래퍼 컴포넌트 구현 6.4 아토믹 디자인을 사용해 컴포넌트 설계 __6.4.1 아토믹 디자인에 따른 컴포넌트 분할 6.5 아톰 구현 __6.5.1 버튼 - Button __6.5.2 텍스트 - Text __6.5.3 셰이프 이미지 - ShapeImage __6.5.4 텍스트 입력 - Input __6.5.5 텍스트 영역 - TextArea __6.5.6 배지 - Badge 6.6 몰리큘 구현 __6.6.1 체크박스 - Checkbox __6.6.2 드롭다운 - Dropdown __6.6.3 드롭존 - Dropzone __6.6.4 이미지 미리보기 - ImagePreview 6.7 오거니즘 구현 __6.7.1 카트 상품 - CartProduct __6.7.2 글로벌 스피너 - GlobalSpinner __6.7.3 헤더 - Header __6.7.4 상품 카드 - ProductCard __6.7.5 상품 등록 폼 - ProductForm __6.7.6 로그인 폼 - SigninForm __6.7.7 사용자 프로필 - UserProfile 6.8 템플릿 구현 __6.8.1 레이아웃 6.9 페이지 설계와 구현 __6.9.1 로그인 페이지 __6.9.2 사용자 페이지 __6.9.3 톱 페이지 __6.9.4 검색 페이지 __6.9.5 상품 상세 페이지 __6.9.6 쇼핑 카트 페이지 __6.9.7 상품 등록 페이지 6.10 컴포넌트의 단위 테스트 구현 __6.10.1 버튼에 대한 단위 테스트 __6.10.2 드롭다운에 대한 단위 테스트 __6.10.3 드롭존에 대한 단위 테스트 __6.10.4 헤더에 대한 단위 테스트 __6.10.5 로그인 폼에 대한 단위 테스트 __6.10.6 상품 등록 폼에 대한 단위 테스트 ▣ 07장: 애플리케이션 개발 3 - 릴리스와 개선 7.1 배포와 애플리케이션 전체의 시스템 아키텍처 7.2 헤로쿠 7.3 버셀 __7.3.1 버셀로 애플리케이션 배포 7.4 로깅 7.5 검색 엔진 최적화 __7.5.1 메타 태그 __7.5.2 빵 부스러기 리스트 __7.5.3 사이트맵 __7.5.4 robots.txt 7.6 접근성 __7.6.1 시맨틱 __7.6.2 보조 텍스트 __7.6.3 WAI-ARIA 7.7 보안 __7.7.1 프런트엔드 개발에서의 취약성과 그 대책 ▣ 부록: Next.js의 다양한 활용 A.1 스트라이프 __A.1.1 스트라이프 셋업 __A.1.2 스트라이프 API 사용 __A.1.3 스트라이프 공식 문서 A.2 토스 페이먼츠 (한국어 특전) __A.2.1 토스 페이먼츠 셋업 __A.2.2 토스 페이먼츠 API 사용 __A.2.3 토스 페이먼츠 공식 문서 A.3 StoryShots - UI 스냅숏 테스트 __A.3.1 StoryShots __A.3.2 storyshots-puppeteer - 스냅숏 페이지를 사용한 UI 테스트 A.4 AWS Amplify에 Next.js 애플리케이션 배포 __A.4.1 Next.js 애플리케이션을 AWS Amplify에 배포 __A.4.2 SSG를 사용한 Next.js 애플리케이션을 AWS Amplify에 배포 A.5 국제화 도구 i18n __A.5.1 경로에 따른 언어 라우팅 __A.5.2 next-i18n을 사용한 텍스트의 i18n 대응