본문으로 바로가기
070-8209-4271~2
고객지원센터
로그인 회원가입
평면표지(2D 앞표지)
입체표지(3D 표지)
2D 뒤표지

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

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

  • ISBN-13
    979-11-6921-257-1 (93000)
  • 출판사 / 임프린트
    한빛미디어(주) / 한빛미디어
  • 정가
    28,000 원 확정정가
  • 발행일
    2024-08-01
  • 출간상태
    출간
  • 저자
    애디 오스마니
  • 번역
    윤창식
  • 메인주제어
    웹그래픽과 디자인
  • 추가주제어
    웹 접근성 및 디지털 디자인 , 프로그래밍 및 스크립트언어 / 일반
  • 키워드
    #자바스크립트 #JavaScript #리액트 #React #디자인 패턴 #Design Pattern #패턴 #Pattern #성능 패턴 #렌더링 패턴 #안티 패턴 #하이드레이션 #아일랜드 아키텍처 #웹 접근성 및 디지털 디자인 #프로그래밍 및 스크립트언어 / 일반 #웹그래픽과 디자인
  • 도서유형
    종이책, 무선제본
  • 대상연령
    모든 연령, 성인 일반 단행본
  • 도서상세정보
    183 * 235 mm, 384 Page

책소개

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

본문인용

-

서평

-

저자소개

저자 : 애디 오스마니
구글 크롬 개발 팀을 이끄는 엔지니어링 리더. 크롬 개발자 경험 팀을 총괄하며 웹을 빠르고 즐겁게 개발할 수 있도록 힘쓰고 있습니다. 여러 오픈 소스 프로젝트를 진행했으며, 다수의 책을 저술했습니다. 개인 블로그 주소는 addyosmani.com입니다.
번역 : 윤창식
어릴 적부터 컴퓨터에 매료되어 프론트엔드 개발자의 길을 걸어왔으며, 현재는 개발자 교육에 전념하고 있습니다. 오픈 소스와 토이 프로젝트를 즐기며, 다양한 개발자들과 소통하는 커뮤니티 활동에도 적극적으로 참여하고 있습니다. 기술의 빠른 진화에 적응하는 방법과 깔끔한 코드 작성의 중요성을 강조하며, 이를 통해 지속 가능한 개발 문화를 만들어가고자 노력하고 있습니다.
공지사항 자주 묻는 질문 자료실