자바스크립트 + 리액트 디자인 패턴 : 자바스크립트와 리액트의 최신 패턴과 렌더링, 성능 패턴까지
- 저자애디 오스마니 저/윤창식 역
- 출판사한빛미디어
- 출판일2024-08-05
- 등록일2024-11-14
보유 1, 대출 0,
예약 0, 누적대출 0, 누적예약 0
책소개
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 결론
