타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발

테지마 타쿠야

IBM과 LINE에서 약 7년간 주로 웹 제품 개발을 담당. 이후 공동창업자 겸 CTO로서 태국에서 창업, 사업 양도를 경험했다. 현재는 싱가포르를 거점으로 동남아시아에서 출발한 스타트업 스튜디오 GAOGAO를 설립하여 대표를 맡고 있다. 이 책의 1~2장을 집필했다.

요시다 타케토

니혼게이자이신문사, 태국의 종합상사 계열 기업에서 애플리케이션 개발을 경험했다. 현재는 Adobe 주식회사에서 Software Development Engineer로 근무하고 있으며, DX(디지털 경험) 계열의 제품 개발과 현지화 기술의 연구개발에 종사하고 있다. 이 책의 5~7장을 집필했다.

타카바야시 요시키

싱가포르의 금융계 스타트업에 웹 프런트엔드 엔지니어로 입사하여 거래 툴을 개발했다. 이후 프리랜서로 여러 웹 앱 개발 프로젝트에 참여했다. 현재는 의료계 스타트업의 웹 앱 개발에 풀스택 엔지니어로 참여하면서 블록체인 OSS 프로젝트 개발에 종사하고 있다. 이 책의 3~4, 7장을 집필했다.

김모세 (creatinov.kim@gmail.com)

소프트웨어 엔지니어, 소프트웨어 품질 엔지니어, 애자일 코치 등 다양한 부문에서 소프트웨어 개발에 참여했다. 재미있는 일, 나와 조직이 성장하고 성과를 내도록 돕는 일에 보람을 느끼며 스스로 더 나은 사람이 되기 위해 항상 노력하고 있다. 저서로 《코드 품질 시각화의 정석》(지앤선, 2015)이 있고, 옮긴 책으로는 《그림과 작동 원리로 쉽게 이해하는 웹의 기초》 《그림과 작동 원리로 쉽게 이해하는 서버의 기초》 《시스템을 잘 만들게 하는 기술》(이상 위키북스, 2023), 《전문가를 위한 파이썬 프로그래밍》 《AWS로 시작하는 인프라 구축의 정석》 (이상 제이펍, 2022), 《구글 앱스 스크립트 완벽 가이드》 《동시성 프로그래밍》(이상 한빛미디어, 2022), 《좋은 팀을 만드는 24가지 안티패턴 타파 기법》(에이콘, 2022) 등이 있다.

• ▣ 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 대응

GitHub 저장소

• https://github.com/wikibook/typescript-and-nextjs
• https://github.com/wikibook/ts-nextbook-app
• https://github.com/wikibook/ts-nextbook-json

• 138쪽, 본문 밑에서 3번째 줄

  pages 아래에 새롭게 ssg.txt라는 이름의 파일을

  ==>

  pages 아래에 새롭게 ssg.tsx라는 이름의 파일을

• 207쪽, 본문 5번째 줄

  콜백이 호출 여부 등을

  ==>

  콜백의 호출 여부 등을

• 207쪽, 본문 밑에서 4번째 줄

  toHaveTextContext를 사용해서 확인합니다.

  ==>

  toHaveTextContent를 사용해서 확인합니다.

• 240쪽, 페이지 하단 명령어

  $ npm install --save-dev @testing-library/jest-dom @testing-library/react jest jest-environ-ment-jsdom

  ==>

  $ npm install --save-dev @testing-library/jest-dom @testing-library/react jest jest-environment-jsdom

• 293쪽, 페이지 상단 예제 코드의 9번째 줄

  text-decoration: 'none';

  ==>

  text-decoration: none;