대규모 웹/자바스크립트 애플리케이션 구축과 유지보수의 개념은 매우 방대하다. 아키텍처 설계부터 성능 최적화에 이르기까지 다양한 주제들을 다룰 수 있으며, 주제의 범위를 모두 다루려면 다양한 책들이 필요할 것이다. (…) 주로 리액트에 초점을 두긴 하겠지만, 앞에서 언급한 이 책에서 다루는 대부분의 주제는 거의 모든 자바스크립트 프레임워크 또는 라이브러리에 적용할 수 있는 것이다. (…) 어떠한 단일 도구 혹은 라이브러리도 문제에 관한 보편적 해결책이 아니기 때문이다. 우리는 통찰력과 방법론을 제공하며, 여러분은 이를 활용해 각자의 구체적인 니즈와 콘텍스트에 가장 적합한 도구 혹은 라이브러리가 무엇인지 평가하고 선택할 수 있을 것이다.
--- p.5

리액트는 본질적으로 개발자들로 하여금 컴포넌트(component)를 사용해 생각할 것을 권장한다. 각 컴포넌트는 UI의 구분된 조각이며, 올바르게 구축한다면 애플리케이션의 다양한 부분에서 재사용할 수 있다. (…) 리액트 애플리케이션의 규모가 늘어나면서 컴포넌트들을 확장 가능하고 유지보수 가능한 형태로 조직화할 필요성이 생겨난다. 그렇다면 컴포넌트 라이브러리, 어토믹 설계(atomic design), 또는 도메인 주도 설계(domain-driven design, DDD) 같은 개념을 사용할 때이다. 이들 중 몇 가지 개념에 대해서는 책 후반부에서 다룰 것이다.
--- p.25

자바스크립트는 상호작용할 수 있는 사용자 경험과 동적 콘텐츠를 사용 가능하게 함으로써 모던 웹 개발의 핵심 요소가 되었다. 하지만 자바스크립트를 사용하는 비용은 성능, 구체적으로는 다운로드 시간과 CPU 실행 시간과 관련해 부정적인 영향을 미칠 수 있다. 이는 페이지 로딩 시간을 늦추고, 상호작용성을 줄이고, 형편없는 사용자 경험(특히 느린 CPU가 탑재된 랩톱과 모바일 기기를 사용하는 사용자들이 해당함)을 만든다. / 자바스크립트 CPU 실행 최적화를 통해 총 차단 시간(total blocking time, TBT) 및 다음 페인트와의 상호작용(interaction to next paint, INP) 같은 상호작용성 지표를 개선할 수 있다.
--- p.47

앞의 예시에서 useQuery 훅이 내장된 요청 상태를 제공함으로써 데이터를 가져올 때 API 호출의 여러 단계를 관리하는 방법을 확인할 수 있었다. 이 훅은 또한 개발자들에게 강력한 도구가 될 수 있는 추가적인 기능들을 제공한다. (…) 리액트 쿼리 같은 라이브러리의 두드러진 기능 중 하나는 캐싱(caching)이다. 데이터 가져오기라는 콘텍스트에서 캐싱은 가져온 데이터를 저장해두는 것을 의미한다. 미래에 요청이 왔을 때 다른 네트워크 요청을 만드는 대신 캐시에서 데이터를 꺼내 보다 빠르게 제공하는 것이다.
--- p.89

직접 기능 플래그 시스템을 구현할 수도 있지만 많은 기업과 조직은 Statsig, Growthbook, Optimizely 같은 서드파티 도구를 사용해 플래그를 관리하는 것을 선호한다. 이 도구들은 A/B 테스팅과 실험을 매끄럽게 수행할 수 있도록 해주며, 심지어 기능 플래그를 만들고 관리할 수 있는 강력한 기능도 제공한다. / Statsig을 기능 플래그와 실험 도구로 활용하는 예시에 관해 계속 살펴보자. Statsig 대시보드를 사용하면 애플리케이션을 위한 기능 플래그를 만들 수 있다. 애플리케이션의 새로운 버튼 색상 공개를 제어하는 기능 플래그를 만든다고 가정해보자.
--- p.169

서버 컴포넌트(Server Component)는 리액트의 새로운 기능이다. 이를 활용하면 서버에서 실행되는 상태가 없는 리액트 컴포넌트를 만들 수 있다. 이 컴포넌트들은 리액트 아키텍처에 서버 사이드 프로세싱의 능력을 더해주며, 이를 통해 몇 가지 계산 및 데이터 가져오기 태스크를 클라이언트로부터 서버로 옮긴다. / 한편, 클라이언트 컴포넌트(Client Component)는 클라이언트 사이드에서 실행되면서 애플리케이션의 상호작용 측면(예: 사용자 입력 및 동적 업데이트 등)을 처리한다. / Next.js 앱 라우터를 사용하면 서버 컴포넌트/클라이언트 컴포넌트 모두를 강력하고 효율적인 방법으로 활용할 수 있다.
--- p.287

역사적으로 리액트 개발자들은 React.memo, useMemo, useCallback을 사용해서 불필요한 재렌더링, 컴포넌트 안의 컴포넌트 및 값과 함수의 불필요한 계산을 방지했다. 이 기법들은 효과적이지만 무엇을 언제 메모화할지는 개발자가 직접 결정해야만 한다. 이 수동 프로세스는 시간이 들 뿐만 아니라 실수를 발생시킬 수 있고 이는 모두 애플리케이션의 성능을 저하시킬 수 있다. / 이런 이유에서 리액트 컴파일러가 등장했다. 리액트 컴파일러는 ‘리액트의 규칙(Rules of React)’을 이해하며, 고급 정적 분석을 활용해 컴포넌트와 리액트 애플리케이션의 훅 사이에 메모이제이션을 지능적으로 적용한다.