홈앤서비스 SK BROADBAND

TypeScript/React/Next.js로 실전적인 모던 웹 애플리케이션을 만들어 보자!

《타입스크립트, 리액트, 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 대응