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

TypeScript/React/Next.js로 빠르고 견고한 모던 웹 애플리케이션 만들기

테지마 타쿠야 , 요시다 타케토 , 타카바야시 요시키 지음 | 김모세 옮김

위키북스 2023년 10월 15일 출간 종이책 : 2023년 05월 30일 출간

작품소개

책소개

《타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발》은 타입스크립트와 리액트, Next.js로 실무에서 사용하는 웹 애플리케이션을 개발하는 입문서입니다. 특히 Next.js의 기초를 확실히 이해할 수 있도록 설명하고 샘플 애플리케이션 개발을 통해 실무에 그대로 도움이 되는 실전적인 스킬을 익힐 수 있도록 구성했습니다.

리액트와 Next.js의 기초부터 시작해 실전적인 애플리케이션 개발까지 설명하며 다음과 같은 웹 프런트엔드 개발에 관여하는 분들을 대상으로 합니다.

◎ 리액트를 처음 접하는 웹 프런트엔드 개발자
◎ 리액트를 경험한 적이 있지만 Next.js는 사용해 본 적이 없는 프런트엔드 개발자
◎ 리액트와 Next.js의 기초는 이해하지만 좀 더 실전적인 서비스를 개발하고자 하는 프런트엔드 개발자
◎ 타입스크립트를 중심으로 한 웹 프런트엔드 개발에 관심 있는 엔지니어
◎ Atomic Design이나 Storybook 등 컴포넌트 중심의 개발에 관심 있는 엔지니어

목차

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

작가정보

저자(글) 테지마 타쿠야

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

저자(글) 요시다 타케토

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

저자(글) 타카바야시 요시키

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

번역 김모세

([e-mail])

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