대규모 리액트 웹 앱 개발
2025년 03월 10일 출간
국내도서 : 2025년 02월 07일 출간
- eBook 상품 정보
- 파일 정보 PDF (26.24MB) | 390 쪽
- ISBN 9791194587118
- 지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
-
교보eBook App
듣기(TTS) 불가능
TTS 란?텍스트를 음성으로 읽어주는 기술입니다.
- 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를 읽을 수 있습니다.
- 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.
PDF 필기가능 (Android, iOS)

판매가 17,640원
10% 할인 | 5%P 적립이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.
카드&결제 혜택
- 5만원 이상 구매 시 추가 2,000P
- 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
- 리뷰 작성 시, e교환권 추가 최대 200원
작품소개
이 상품이 속한 분야
베타리더 후기 xii
머리말 xiv
CHAPTER 1 시작하며 1
CHAPTER 2 소프트웨어 복잡성 관리하기 6
2.1 복잡성 설명하기 8
2.2 복잡성의 근본 원인 파악하기 9
2.3 소프트웨어 설계 철학 11
2.4 타르 웅덩이 밖으로 12
2.5 단순함이 쉬움을 만든다 13
2.6 은탄환은 없다 14
2.7 시스템 디자인과 아키텍처 복잡성의 비용 15
2.8 팀은 어떻게 복잡성을 관리할 수 있는가? 17
2.9 최고의 해결책은 단순하지만 간단하지 않다 18
2.10 때때로 (필수적인) 복잡성은 다른 어딘가에는 살아남아야 한다 19
2.11 복잡성을 관리하는 데 지속되는 어려움은 무엇인가? 20
2.12 결론 21
2.13 더 읽을 거리 21
CHAPTER 3 모듈성 23
3.1 자바스크립트에서의 모듈 24
3.2 지연 로딩 32
3.3 코드 분할 37
3.4 정리 41
CHAPTER 4 성능 42
4.1 브라우저는 어떻게 작동하는가? 43
4.2 자바스크립트에서의 비용 이해하기와 줄이기 47
4.3 상호작용 최적화 50
4.4 네트워킹 50
4.5 서드파티 의존성의 영향 줄이기 51
4.6 렌더링 패턴 54
4.7 인지된 성능 최적화하기 55
4.8 성능 최적화 자료 58
4.9 성능 문화 61
CHAPTER 5 디자인 시스템 63
5.1 코딩 스타일 가이드 64
5.2 디자인 토큰 66
5.3 컴포넌트 라이브러리 71
5.4 접근성 74
5.5 성능 76
5.6 문서화 77
5.7 케이스 스터디 78
5.8 정리 82
CHAPTER 6 데이터 가져오기 83
6.1 브라우저 API와 간단한 HTTP 클라이언트 83
6.2 보다 세련된 데이터 가져오기 라이브러리 85
6.3 캐시 업데이트하기 92
6.4 효율적인 데이터 가져오기를 위한 팁 100
CHAPTER 7 상태 관리 106
7.1 컴포넌트 간 데이터 관리하기 107
7.2 prop 내려보내기 110
7.3 단순한 상태 관리 113
7.4 상태 관리 전용 라이브러리 115
7.5 마지막 고려 사항 120
CHAPTER 8 국제화 122
8.1 코드에서 텍스트와 콘텐츠를 분리하라 123
8.2 서드파티 지역화 라이브러리를 활용하라 125
8.3 동적 로딩 130
8.4 여러 언어에서의 복수형 처리하기 132
8.5 날짜, 시간, 숫자 형식 나타내기 134
8.6 오른쪽에서 왼쪽으로 쓰는 언어를 고려하라 138
8.7 정리 145
CHAPTER 9 코드 조직화하기 146
9.1 폴더와 파일 구조 147
9.2 명명 규칙 150
9.3 배럴 익스포트 151
9.4 그 밖의 다른 좋은 프랙티스들 152
9.5 정리 157
CHAPTER 10 개인화와 A/B 테스팅 158
10.1 개인화 159
10.2 A/B 테스팅 161
10.3 기능 플래그 168
10.4 정리 172
CHAPTER 11 확장 가능한 웹 아키텍처 173
11.1 확장성 173
11.2 확장 가능한 애플리케이션의 특성 178
11.3 쿠버네티스와 도커는 어디에 적합한가? 179
11.4 Vercel과 Netlify 같은 기술은 어디에 적합한가? 182
11.5 정리 184
CHAPTER 12 테스팅 185
12.1 단위 테스트 186
12.2 엔드-투-엔드 테스트 191
12.3 통합 테스트 200
12.4 스냅숏 테스트 203
12.5 애플리케이션을 어떻게 테스트해야 하는가? 207
CHAPTER 13 툴링 212
13.1 버전 관리: 깃 212
13.2 지속적 통합 215
13.3 번들러 216
13.4 린팅 218
13.5 로깅과 성능 모니터링 219
13.6 정리 221
CHAPTER 14 기술적 마이그레이션 222
14.1 다양한 마이그레이션 전략 223
14.2 마이그레이션 전략 225
14.3 코드모드 226
14.4 생성형 AI의 역할 231
CHAPTER 15 타입스크립트 235
15.1 타입 안전성 235
15.2 빌드 도구와 타입스크립트 238
15.3 구성과 린팅 238
15.4 리액트 + 타입스크립트 242
15.5 선언 파일들 261
15.6 API 결과에 타입 자동 생성 263
15.7 기존 리액트 애플리케이션을 타입스크립트로 마이그레이션하기 270
CHAPTER 16 라우팅 274
16.1 사용자에게 라우팅이 중요한 이유는 무엇인가? 274
16.2 리액트의 라우팅 설루션 279
16.3 정리 290
CHAPTER 17 사용자 중심 API 디자인 292
17.1 일관성 294
17.2 에러 핸들링 300
17.3 문서화 303
17.4 버저닝 305
17.5 보안 309
17.6 이해관계자 참여 315
17.7 최종 고려 사항 316
17.8 더 읽을 거리 317
CHAPTER 18 리액트의 미래 318
18.1 무엇이 달라지는가? 319
18.2 새로운 훅과 API 319
18.3 리액트 컴파일러 333
18.4 리액트 서버 컴포넌트 343
18.5 더 읽을 거리 357
CHAPTER 19 맺음말 358
찾아보기 364
대규모 웹/자바스크립트 애플리케이션 구축과 유지보수의 개념은 매우 방대하다. 아키텍처 설계부터 성능 최적화에 이르기까지 다양한 주제들을 다룰 수 있으며, 주제의 범위를 모두 다루려면 다양한 책들이 필요할 것이다. (…) 주로 리액트에 초점을 두긴 하겠지만, 앞에서 언급한 이 책에서 다루는 대부분의 주제는 거의 모든 자바스크립트 프레임워크 또는 라이브러리에 적용할 수 있는 것이다. (…) 어떠한 단일 도구 혹은 라이브러리도 문제에 관한 보편적 해결책이 아니기 때문이다. 우리는 통찰력과 방법론을 제공하며, 여러분은 이를 활용해 각자의 구체적인 니즈와 콘텍스트에 가장 적합한 도구 혹은 라이브러리가 무엇인지 평가하고 선택할 수 있을 것이다. (5쪽)
리액트는 본질적으로 개발자들로 하여금 컴포넌트(component)를 사용해 생각할 것을 권장한다. 각 컴포넌트는 UI의 구분된 조각이며, 올바르게 구축한다면 애플리케이션의 다양한 부분에서 재사용할 수 있다. (…) 리액트 애플리케이션의 규모가 늘어나면서 컴포넌트들을 확장 가능하고 유지보수 가능한 형태로 조직화할 필요성이 생겨난다. 그렇다면 컴포넌트 라이브러리, 어토믹 설계(atomic design), 또는 도메인 주도 설계(domain-driven design, DDD) 같은 개념을 사용할 때이다. 이들 중 몇 가지 개념에 대해서는 책 후반부에서 다룰 것이다. (25쪽)
자바스크립트는 상호작용할 수 있는 사용자 경험과 동적 콘텐츠를 사용 가능하게 함으로써 모던 웹 개발의 핵심 요소가 되었다. 하지만 자바스크립트를 사용하는 비용은 성능, 구체적으로는 다운로드 시간과 CPU 실행 시간과 관련해 부정적인 영향을 미칠 수 있다. 이는 페이지 로딩 시간을 늦추고, 상호작용성을 줄이고, 형편없는 사용자 경험(특히 느린 CPU가 탑재된 랩톱과 모바일 기기를 사용하는 사용자들이 해당함)을 만든다. / 자바스크립트 CPU 실행 최적화를 통해 총 차단 시간(total blocking time, TBT) 및 다음 페인트와의 상호작용(interaction to next paint, INP) 같은 상호작용성 지표를 개선할 수 있다. (47쪽)
앞의 예시에서 useQuery 훅이 내장된 요청 상태를 제공함으로써 데이터를 가져올 때 API 호출의 여러 단계를 관리하는 방법을 확인할 수 있었다. 이 훅은 또한 개발자들에게 강력한 도구가 될 수 있는 추가적인 기능들을 제공한다. (…) 리액트 쿼리 같은 라이브러리의 두드러진 기능 중 하나는 캐싱(caching)이다. 데이터 가져오기라는 콘텍스트에서 캐싱은 가져온 데이터를 저장해두는 것을 의미한다. 미래에 요청이 왔을 때 다른 네트워크 요청을 만드는 대신 캐시에서 데이터를 꺼내 보다 빠르게 제공하는 것이다. (89쪽)
직접 기능 플래그 시스템을 구현할 수도 있지만 많은 기업과 조직은 Statsig, Growthbook, Optimizely 같은 서드파티 도구를 사용해 플래그를 관리하는 것을 선호한다. 이 도구들은 A/B 테스팅과 실험을 매끄럽게 수행할 수 있도록 해주며, 심지어 기능 플래그를 만들고 관리할 수 있는 강력한 기능도 제공한다. / Statsig을 기능 플래그와 실험 도구로 활용하는 예시에 관해 계속 살펴보자. Statsig 대시보드를 사용하면 애플리케이션을 위한 기능 플래그를 만들 수 있다. 애플리케이션의 새로운 버튼 색상 공개를 제어하는 기능 플래그를 만든다고 가정해보자. (169쪽)
서버 컴포넌트(Server Component)는 리액트의 새로운 기능이다. 이를 활용하면 서버에서 실행되는 상태가 없는 리액트 컴포넌트를 만들 수 있다. 이 컴포넌트들은 리액트 아키텍처에 서버 사이드 프로세싱의 능력을 더해주며, 이를 통해 몇 가지 계산 및 데이터 가져오기 태스크를 클라이언트로부터 서버로 옮긴다. / 한편, 클라이언트 컴포넌트(Client Component)는 클라이언트 사이드에서 실행되면서 애플리케이션의 상호작용 측면(예: 사용자 입력 및 동적 업데이트 등)을 처리한다. / Next.js 앱 라우터를 사용하면 서버 컴포넌트/클라이언트 컴포넌트 모두를 강력하고 효율적인 방법으로 활용할 수 있다. (287쪽)
역사적으로 리액트 개발자들은 React.memo, useMemo, useCallback을 사용해서 불필요한 재렌더링, 컴포넌트 안의 컴포넌트 및 값과 함수의 불필요한 계산을 방지했다. 이 기법들은 효과적이지만 무엇을 언제 메모화할지는 개발자가 직접 결정해야만 한다. 이 수동 프로세스는 시간이 들 뿐만 아니라 실수를 발생시킬 수 있고 이는 모두 애플리케이션의 성능을 저하시킬 수 있다. / 이런 이유에서 리액트 컴파일러가 등장했다. 리액트 컴파일러는 ‘리액트의 규칙(Rules of React)’을 이해하며, 고급 정적 분석을 활용해 컴포넌트와 리액트 애플리케이션의 훅 사이에 메모이제이션을 지능적으로 적용한다. (337~338쪽)
거대 자바스크립트 웹 애플리케이션을 구축하기 위해 알아야 할 모든 것
오늘날 웹 애플리케이션은 풍부한 기능을 제공하기 위해 점점 복잡해지고 있다. 프런트엔드 개발자들은 마치 거대 괴수처럼 덩치가 커져버린 대규모 애플리케이션을 구축하고 유지보수해야 하는 어려움에 직면했다. 바닐라 자바스크립트로 뚝딱뚝딱 프로토타입을 만들고 점차 필요한 기능을 추가해나가는 식으로는 결코 이 도전적인 과업을 달성할 수 없다. 세심한 계획이 필요하다.
이 책은 대규모의, 유지보수 가능한, 확장성을 가진 자바스크립트 웹 애플리케이션을 구축하기 위해 알아야 할 지식, 도구, 기술, 전략을 집대성한 가이드북이다. 코드 예시는 프런트엔드의 사실상 표준인 리액트로 작성되어 있지만 특정 라이브러리에 종속되는 것이 아니라, 개념 설명에 초점을 두면서 구체적인 라이브러리 또는 도구를 통해 개념을 묘사하는 방식이다.
책은 소프트웨어 복잡성에 관한 고찰로 시작한다. 이어서 브라우저의 작동 원리부터 성능 최적화, 성능 문화까지 성능에 관해서도 깊이 있게 살펴보고, 디자인 시스템, 데이터 가져오기, 상태 관리 같은 핵심 개념을 설명한다. 번역과 국제화, 폴더와 파일의 조직화도 다룬다. 책의 후반부는 좀 더 심화된 주제들로, 개인화, A/B 테스팅, 확장성 있는 웹 아키텍처, 테스팅, 툴링, 기술적 마이그레이션, 타입스크립트 등에 관해 논의한다. 마지막 장에서는 리액트 컴파일러나 리액트 서버 컴포넌트를 비롯해 비교적 새로운 리액트의 기능과 API를 설명한다.
웹 개발의 지평은 매우 넓고 지금 이 순간에도 진화를 거듭하고 있다. 알아야 할 게 많은 대규모 웹 개발의 여러 영역을 충실하게 조망하는 이 책이 어려운 도전을 극복하는 데 큰 통찰을 줄 것이다. 원서에서 제공하지 않는 예제 코드와 추가 자료 URL 모음을 번역서 깃허브 저장소에서 제공한다는 점도 본 번역서의 큰 미덕이다.
주요 내용복잡성, 모듈성, 성능, 디자인 시스템, 데이터 페칭 등 대규모 웹 앱 개발의 핵심 개념번역과 국제화, 리액트 애플리케이션을 구조화하고 효과적으로 확장하는 방법개인화, A/B 테스팅, 확장 가능한 웹 아키텍처, 캐싱 전략, 기술 마이그레이션리액트 코드를 안전하게 만드는 타입스크립트와 테스팅
작가정보
저자(글) 하산 지르데(Hassan Djirdeh)
다양한 웹 기술/프레임워크에 능숙한 소프트웨어 엔지니어. 리액트, 그래프QL, 타입스크립트 등에 특히 정통하며, 2019년에는 캐나다의 젊은 개발자 30인에 선정되었다. Doordash, Instacart, Shopify 등에서 대규모 프로덕션 애플리케이션 구축에 참여했다.
대학 졸업 후 소프트웨어 엔지니어, 소프트웨어 품질 엔지니어, 애자일 코치 등 다양한 부문에서 소프트웨어 개발에 참여했다. 재미있는 일, 나와 조직이 성장하고 성과를 내도록 돕는 일에 보람을 느껴 2019년부터 번역을 시작했다. 저서로 《코드 품질 시각화의 정석》(지앤선)이 있고, 옮긴 책은 《파이썬과 자바스크립트로 배우는 OpenAI 프로그래밍》(제이펍), 《시작! AWS》(한빛미디어), 《문제풀이로 완성하는 알고리즘+자료구조》(위키북스), 《React 18 디자인 패턴과 베스트 프랙티스 4/e》(에이콘출판사) 등 다수다.
이 상품의 총서
Klover리뷰 (0)
- - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
- - 리워드는 1,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다. (5,000원 이상 상품으로 변경 예정, 2024년 9월 30일부터 적용)
- - 리워드는 한 상품에 최초 1회만 제공됩니다.
- - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
- 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
- 도서와 무관한 내용의 리뷰
- 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
- 의성어나 의태어 등 내용의 의미가 없는 리뷰
구매 후 리뷰 작성 시, e교환권 100원 적립
문장수집
- 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
- e교환권은 적립일로부터 180일 동안 사용 가능합니다.
- 리워드는 1,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다. (5,000원 이상 eBook으로 변경 예정, 2024년 9월 30일부터 적용)
- 리워드는 한 상품에 최초 1회만 제공됩니다.
- sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.
구매 후 문장수집 작성 시, e교환권 100원 적립
신규가입 혜택 지급이 완료 되었습니다.
바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

- 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
- 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
- 콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공
가장 와 닿는 하나의 키워드를 선택해주세요.
총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.
신고 사유를 선택해주세요.
신고 내용은 이용약관 및 정책에 의해 처리됩니다.
허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
있으니 유의하시어 신중하게 신고해주세요.
이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.
구매 후 90일 이내 작성 시, e교환권 100원 적립
eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.
차감하실 sam이용권을 선택하세요.
차감하실 sam이용권을 선택하세요.
선물하실 sam이용권을 선택하세요.
-
보유 권수 / 선물할 권수0권 / 1권
-
받는사람 이름받는사람 휴대전화
- 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
- 열람권은 1인당 1권씩 선물 가능합니다.
- 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
- 선물한 열람권의 등록유효기간은 14일 입니다.
(상대방이 기한내에 등록하지 않을 경우 소멸됩니다.) - 무제한 이용권일 경우 열람권 선물이 불가합니다.
첫 구매 시 교보e캐시 지급해 드립니다.

- 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
- 한 ID당 최초 1회 지급 / sam 이용권 제외
- 구글바이액션을 통해 교보eBook 구매 이력이 없는 회원 대상
- 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)