자바스크립트 + 리액트 디자인 패턴 - 자바스크립트와 리액트의 최신 패턴과 렌더링 성능 패턴까지

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 결론