자바스크립트 + 리액트 디자인 패턴

애디 오스마니 지음 | 윤창식 옮김

한빛미디어 2024년 08월 05일 출간 국내도서 : 2024년 08월 01일 출간

작품소개

책소개

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

출판사 서평

최신 디자인 패턴을 자바스크립트와 리액트에 적용한다!
기초부터 고급 주제의 패턴까지 체계적으로 배우며 성능, 렌더링 패턴까지!
디자인 패턴은 코드를 체계화하기 위한 공통적인 패턴을 제공해 코드를 쉽게 이해하도록 돕고, 다른 개발자와의 의사소통을 원활하게 해줍니다. 이 책은 이러한 디자인 패턴을 자바스크립트와 리액트에 적용하여 보다 구조적이고, 효율적인 웹 개발을 가능하게 합니다. 또한, 디자인 패턴만을 다루는 것에 그치지 않고, 패턴을 적용하는 여러 모범 사례와 함께 코드의 구성, 성능, 렌더링과 같이 좋은 웹 애플리케이션을 개발할 때 필요한 주제도 다루고 있습니다. 따라서 이 책을 다 읽게 되면, 디자인 패턴에 대한 깊은 이해와 함께 어떻게 패턴을 자바스크립트 코드와 리액트 애플리케이션에 적용할지 파악하는 능력을 갖추게 될 것입니다. 효율적인 웹 개발을 향한 길이 바로 여기에 있습니다.

주요 내용
● 컴포넌트와 애플리케이션을 구조화하기 위한 아키텍처 패턴
● 모든 수준의 개발자가 활용할 수 있는 20가지 이상의 자바스크립트, 리액트 디자인 패턴
● 생성, 구조, 행위 패턴 등 다양한 디자인 패턴의 분류
● 동적 가져오기와 코드 스플리팅 등 성능에 영향을 주는 필수 패턴
● 서버 사이드 렌더링, 하이드레이션, 아일랜드 아키텍처 등 렌더링 패턴

작가정보

저자(글) 애디 오스마니

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

번역 윤창식

어릴 적부터 컴퓨터에 매료되어 프론트엔드 개발자의 길을 걸어왔으며, 현재는 개발자 교육에 전념하고 있습니다. 오픈 소스와 토이 프로젝트를 즐기며, 다양한 개발자들과 소통하는 커뮤니티 활동에도 적극적으로 참여하고 있습니다. 기술의 빠른 진화에 적응하는 방법과 깔끔한 코드 작성의 중요성을 강조하며, 이를 통해 지속 가능한 개발 문화를 만들어가고자 노력하고 있습니다.