20가지 이상의 디자인 패턴으로 배우는 최신 웹 개발

유지보수가 쉬운 구조적인 코드를 만들고 싶은가? 최신 웹 개발 모범 사례를 참고하고 싶은가? 그렇다면 『자바스크립트 + 리액트 디자인 패턴』이 해답이다. 이 책은 모듈, 믹스인, 관찰자, 중재자 패턴을 포함한 최신 디자인 패턴을 자바스크립트와 리액트에 적용하는 방법을 소개한다. 그리고 코드 스플리팅, 서버 사이드 렌더링 등 실무에 필요한 성능과 렌더링 관련 내용을 실용적인 예제와 함께 설명한다. 또한, 여러 안티 패턴도 함께 다루고 있어 웹 개발을 할 때 흔하게 발생하는 실수를 줄이는 노하우까지 배울 수 있다. 이 책에 담긴 20가지 이상의 디자인 패턴을 익혀 더 나은 웹 개발자에 한 걸음 더 다가가자.

구글 크롬 개발 팀을 이끄는 엔지니어링 리더. 크롬 개발자 경험 팀을 총괄하며 웹을 빠르고 즐겁게 개발할 수 있도록 힘쓰고 있다. 여러 오픈 소스 프로젝트를 진행했으며, 다수의 책을 저술했다.

CHAPTER 01 디자인 패턴 소개

_1.1 디자인 패턴의 역사
_1.2 패턴이란 무엇인가
_1.3 디자인 패턴의 일상 활용 사례
_1.4 마치며

CHAPTER 02 패턴성 검증, 프로토 패턴 그리고 세 가지 법칙

_2.1 프로토 패턴이란?
_2.2 패턴성 검증
_2.3 세 가지 법칙
_2.4 마치며

CHAPTER 03 패턴 구조화 및 작성

_3.1 디자인 패턴의 구조
_3.2 모범 패턴
_3.3 패턴 작성하기
_3.4 마치며

CHAPTER 04 안티 패턴

_4.1 안티 패턴이란?
_4.2 자바스크립트 안티 패턴
_4.3 마치며

CHAPTER 05 최신 자바스크립트 문법과 기능

_5.1 애플리케이션 분리의 중요성
_5.2 모듈 가져오기와 내보내기
_5.3 모듈 객체
_5.4 외부 소스로부터 가져오는 모듈
_5.5 정적으로 모듈 가져오기
_5.6 동적으로 모듈 가져오기
__5.6.1 사용자 상호작용에 따라 가져오기
__5.6.2 화면에 보이면 가져오기
_5.7 서버에서 모듈 사용하기
_5.8 모듈을 사용하면 생기는 이점
_5.9 생성자, 게터, 세터를 가진 클래스
_5.10 자바스크립트 프레임워크와 클래스
_5.11 마치며
_5.12 관련 자료

CHAPTER 06 디자인 패턴의 유형

_6.1 배경
_6.2 생성 패턴
_6.3 구조 패턴
_6.4 행위 패턴
_6.5 디자인 패턴의 분류
_6.6 마치며

CHAPTER 07 자바스크립트 디자인 패턴

_7.1 생성 패턴
_7.2 생성자 패턴
__7.2.1 객체 생성
__7.2.2 생성자의 기본 특징
__7.2.3 프로토타입을 가진 생성자
_7.3 모듈 패턴
__7.3.1 객체 리터럴
__7.3.2 모듈 패턴
__7.3.3 모듈 패턴의 변형
__7.3.4 WeakMap을 사용하는 최신 모듈 패턴
__7.3.5 최신 라이브러리와 모듈
_7.4 노출 모듈 패턴
__7.4.1 장점
__7.4.2 단점
_7.5 싱글톤 패턴
__7.5.1 리액트의 상태 관리
_7.6 프로토타입 패턴
_7.7 팩토리 패턴
__7.7.1 팩토리 패턴을 사용하면 좋은 상황
__7.7.2 팩토리 패턴을 사용하면 안 되는 상황
__7.7.3 추상 팩토리 패턴
_7.8 구조 패턴
_7.9 퍼사드 패턴
_7.10 믹스인 패턴
_7.11 서브클래싱
_7.12 믹스인
__7.12.1 장점과 단점
_7.13 데코레이터 패턴
_7.14 의사 클래스 데코레이터
__7.14.1 인터페이스
__7.14.2 추상 데코레이터
_7.15 장점과 단점
_7.16 플라이웨이트 패턴
__7.16.1 사용법
__7.16.2 데이터 공유
__7.16.3 전통적인 플라이웨이트 구현 방법
__7.16.4 플라이웨이트로 변환하기
__7.16.5 기본 팩토리
__7.16.6 외부 상태 관리하기
__7.16.7 플라이웨이트 패턴과 DOM 객체
__7.16.8 예시: 중앙 집중식 이벤트 핸들링
_7.17 행위 패턴
_7.18 관찰자 패턴
__7.18.1 관찰자 패턴과 발행/구독 패턴의 차이점
__7.18.2 장점
__7.18.3 단점
__7.18.4 발행/구독 패턴 구현하기
_7.19 중재자 패턴
__7.19.1 간단한 중재자 구현
__7.19.2 유사점과 차이점
__7.19.3 이벤트 집합 패턴의 활용
__7.19.4 중재자 패턴의 활용
__7.19.5 이벤트 집합 패턴(발행/구독)과 중재자 패턴 결합하기
__7.19.6 최신 자바스크립트에서의 중재자 패턴과 미들웨어
__7.19.7 중재자 패턴 vs 퍼사드 패턴
_7.20 커맨드 패턴
_7.21 마치며

CHAPTER 08 자바스크립트 MV* 패턴

_8.1 MVC 패턴
__8.1.1 Smalltalk-80의 MVC 패턴
_8.2 자바스크립트의 MVC
__8.2.1 모델
__8.2.2 뷰
__8.2.3 템플릿
__8.2.4 컨트롤러
_8.3 MVC를 사용하는 이유는?
_8.4 자바스크립트와 Smalltalk-80의 MVC
_8.5 MVC 정리
_8.6 MVP 패턴
__8.6.1 모델, 뷰, 프리젠터
__8.6.2 MVP vs MVC
_8.7 MVVM 패턴
__8.7.1 역사
__8.7.2 모델
__8.7.3 뷰
__8.7.4 뷰모델
__8.7.5 뷰와 뷰모델 복습
__8.7.6 뷰모델 vs 모델
_8.8 장단점
__8.8.1 장점
__8.8.2 단점
_8.9 MVC vs MVP vs MVVM
_8.10 최신 MV* 패턴
__8.10.1 MV* 패턴과 리액트
_8.11 마치며

CHAPTER 09 비동기 프로그래밍 패턴

_9.1 비동기 프로그래밍
_9.2 배경
_9.3 프로미스 패턴
__9.3.1 프로미스 체이닝
__9.3.2 프로미스 에러 처리
__9.3.3 프로미스 병렬 처리
__9.3.4 프로미스 순차 실행
__9.3.5 프로미스 메모이제이션
__9.3.6 프로미스 파이프라인
__9.3.7 프로미스 재시도
__9.3.8 프로미스 데코레이터
__9.3.9 프로미스 경쟁
_9.4 async/await 패턴
__9.4.1 비동기 함수 조합
__9.4.2 비동기 반복
__9.4.3 비동기 에러 처리
__9.4.4 비동기 병렬
__9.4.5 비동기 순차 실행
__9.4.6 비동기 메모이제이션
__9.4.7 비동기 이벤트 처리
__9.4.8 async/await 파이프라인
__9.4.9 비동기 재시도
__9.4.10 async/await 데코레이터
_9.5 실용적인 예제 더보기
__9.5.1 HTTP 요청 보내기
__9.5.2 파일 시스템에서 파일 읽어오기
__9.5.3 파일 시스템에 파일 쓰기
__9.5.4 여러 비동기 함수를 한 번에 실행하기
__9.5.5 여러 비동기 함수를 순서대로 실행하기
__9.5.6 함수의 결과를 캐싱하기
__9.5.7 async/await로 이벤트 처리하기
__9.5.8 비동기 함수 실패 시 자동으로 재시도하기
__9.5.9 async/await 데코레이터 작성하기
_9.6 마치며

CHAPTER 10 모듈형 자바스크립트 디자인 패턴

_10.1 스크립트 로더에 대한 참고사항
_10.2 AMD
__10.2.1 모듈 알아보기
__10.2.2 AMD 모듈과 jQuery
__10.2.3 AMD에 대한 결론
_10.3 CommonJS
__10.3.1 CommonJS 시작하기
__10.3.2 여러 의존성 동시에 사용하기
__10.3.3 Node.js 환경에서의 CommonJS
__10.3.4 CommonJS는 브라우저 환경에 적합할까?
__10.3.5 CommonJS 관련 참고 자료
_10.4 AMD vs CommonJS: 동상이몽
__10.4.1 UMD: 플러그인을 위한 AMD 및 CommonJS 호환 모듈
_10.5 마치며

CHAPTER 11 네임스페이스 패턴

_11.1 네임스페이스의 기초
_11.2 단일 전역 변수 패턴
_11.3 접두사 네임스페이스 패턴
_11.4 객체 리터럴 표기법 패턴
_11.5 중첩 네임스페이스 패턴
_11.6 즉시 실행 함수 표현식 패턴
_11.7 네임 스페이스 주입 패턴
_11.8 고급 네임스페이스 패턴
__11.8.1 중첩 네임스페이스 자동화 패턴
__11.8.2 의존성 선언 패턴
__11.8.3 심층 객체 확장 패턴
_11.9 권장하는 패턴
_11.10 마치며

CHAPTER 12 리액트 디자인 패턴

_12.1 리액트 소개
__12.1.1 리액트 용어 소개
__12.1.2 리액트의 기본 개념
_12.2 고차 컴포넌트
__12.2.1 고차 컴포넌트 조합하기
__12.2.2 장점
__12.2.3 단점
_12.3 렌더링 Props 패턴
__12.3.1 상태 끌어올리기
__12.3.2 컴포넌트의 자식으로 함수 전달하기
__12.3.3 장점
__12.3.4 단점
_12.4 리액트 Hooks 패턴
__12.4.1 클래스 컴포넌트
__12.4.2 구조 변경의 필요성
__12.4.3 복잡성 증가
__12.4.4 Hooks
_12.5 상태 Hook
__12.5.1 이펙트 Hook
__12.5.2 커스텀 Hook
__12.5.3 Hook 관련 추가 정보
__12.5.4 Hook의 장단점
__12.5.5 Hook vs Class
_12.6 정적 가져오기
_12.7 동적 가져오기
__12.7.1 로더블 컴포넌트
__12.7.2 상호작용 시 가져오기
__12.7.3 화면에 보이는 순간 가져오기
_12.8 코드 스플리팅
__12.8.1 경로 기반 분할
__12.8.2 번들 분할
_12.9 PRPL 패턴
_12.10 로딩 우선순위
__12.10.1 SPA의 Preload
__12.10.2 Preload + async 기법
__12.10.3 크롬 95+ 버전에서의 Preload
_12.11 리스트 가상화
__12.11.1 윈도잉/가상화의 작동 방식
__12.11.2 List 컴포넌트
__12.11.3 Grid 컴포넌트
__12.11.4 웹 플랫폼의 발전
_12.12 결론
_12.13 마치며

CHAPTER 13 렌더링 패턴

_13.1 렌더링 패턴의 중요성
_13.2 클라이언트 사이드 렌더링(CSR)
_13.3 서버 사이드 렌더링(SSR)
_13.4 정적 렌더링
__13.4.1 점진적 정적 생성(ISR)
__13.4.2 On-demand ISR
__13.4.3 정적 렌더링 요약
_13.5 스트리밍 SSR
_13.6 엣지 SSR
_13.7 하이브리드 렌더링
_13.8 점진적 하이드레이션
_13.9 아일랜드 아키텍처
__13.9.1 아일랜드 아키텍처 구현하기
__13.9.2 아일랜드 아키텍처의 장점과 단점
_13.10 리액트 서버 컴포넌트
__13.10.1 RSC와 Next.js App Router를 활용한 하이브리드 렌더링
_13.11 마치며

CHAPTER 14 리액트 애플리케이션 구조

_14.1 소개
__14.1.1 모듈, 기능 또는 경로별 그룹화
__14.1.2 파일 유형별 그룹화
__14.1.3 도메인 및 공통 컴포넌트 기반의 혼합 그룹화
_14.2 최신 리액트 기능을 위한 애플리케이션 구조
__14.2.1 리덕스
__14.2.2 컨테이너
__14.2.3 Hooks
__14.2.4 Styled Components
_14.3 기타 모범 사례
_14.4 Next.js 애플리케이션을 위한 애플리케이션 구조
_14.5 마치며

CHAPTER 15 결론