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