홈앤서비스 SK BROADBAND

주니어 프론트엔드 개발자를 위한 타입스크립트+리액트 온보딩 가이드

우아한형제들은 자바스크립트와 자체 개발 웹 프레임워크인 WoowahanJS를 사용했었다. 그러나 서비스가 대규모 웹 애플리케이션으로 성장하면서 기존 기술의 한계를 느끼고 타입스크립트와 리액트를 프론트엔드 표준 기술로 도입했다. 타입스크립트는 자바스크립트와 100% 호환되는 확장 언어로, 정적 타입을 지원하여 안정성과 유지보수성을 높여준다. 또한 객체 지향 프로그래밍을 지원하여 복잡한 애플리케이션을 개발하는 데 적합하다. 리액트는 UI를 개발하기 위한 라이브러리로 컴포넌트 기반의 개발 방식을 지원하여 코드의 재사용성과 유지보수성을 높여준다. 이 책은 우아한형제들의 실제 코드를 기반으로 타입스크립트의 기본 개념 및 특성과 리액트 환경에서의 타입스크립트 활용법을 알려준다. 또한 배달의민족 개발 사례와 우아한형제들 구성원의 인터뷰를 통해 실무에 바로 적용할 수 있는 다양한 기술 활용 팁을 소개한다.

1장 들어가며

1.1 웹 개발의 역사
1.2 웹자바스크립트의 한계

2장 타입

2.1 타입이란
2.2 타입스크립트의 타입 시스템
2.3 원시 타입
2.4 객체 타입

3장 고급 타입

3.1 타입스크립트만의 독자적 타입 시스템
3.2 타입 조합
3.3 제네릭 사용법

4장 타입 확장하기·좁히기

4.1 타입 확장하기
4.2 타입 좁히기 - 타입 가드
4.3 타입 좁히기 - 식별할 수 있는 유니온
4.4 Exhaustiveness Checking으로 정확한 타입 분기 유지하기

5장 타입 활용하기

5.1 조건부 타입
5.2 템플릿 리터럴 타입 활용하기
5.3 커스텀 유틸리티 타입 활용하기
5.4 불변 객체 타입으로 활용하기
5.5 Record 원시 타입 키 개선하기

6장 타입스크립트 컴파일

6.1 자바스크립트의 런타임과 타입스크립트의 컴파일
6.2 타입스크립트 컴파일러의 동작
6.3 타입스크립트 컴파일러의 구조

7장 비동기 호출

7.1 API 요청
7.2 API 상태 관리하기
7.3 API 에러 핸들링
7.4 API 모킹

8장 JSX에서 TSX로

8.1 리액트 컴포넌트의 타입
8.2 타입스크립트로 리액트 컴포넌트 만들기
8.3 정리

9장 훅

9.1 리액트 훅
9.2 커스텀 훅

10장 상태 관리

10.1 상태 관리
10.2 상태 관리 라이브러리

11장 CSS-in-JS

11.1 CSS-in-JS란
11.2 유틸리티 함수를 활용하여 styled-components의 중복 타입 선언 피하기

12장 타입스크립트 프로젝트 관리

12.1 앰비언트 타입 활용하기
12.2 스크립트와 설정 파일 활용하기
12.3 타입스크립트 마이그레이션
12.4 모노레포

13장 타입스크립트와 객체 지향

13.1 타입스크립트의 객체 지향
13.2 우아한형제들의 활용 방식
13.3 캡슐화와 추상화
13.4 정리