본문 바로가기

추천 검색어

실시간 인기 검색어

React 18 디자인 패턴과 베스트 프랙티스 4/e

보다 나은 사용자 인터페이스 만들기
웹 프로페셔널
에이콘출판 · 2024년 10월 18일
가장 최근에 출시된 개정판입니다. 구판보기
10.0
10점 중 10점
(3개의 리뷰)
도움돼요 (100%의 구매자)
  • React 18 디자인 패턴과 베스트 프랙티스 4/e 대표 이미지
    React 18 디자인 패턴과 베스트 프랙티스 4/e 대표 이미지
  • A4
    사이즈 비교
    210x297
    React 18 디자인 패턴과 베스트 프랙티스 4/e 사이즈 비교 188x234
    단위 : mm
01 / 02
무료배송 소득공제
10% 34,200 38,000
적립/혜택
1,900P

기본적립

5% 적립 1,900P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,900P
  • 리뷰 작성 시, e교환권 추가 최대 300원
배송안내
무료배송
배송비 안내
국내도서/외국도서
도서 포함 15,000원 이상 구매 시 무료배송
도서+사은품 또는 도서+사은품+교보Only(교보굿즈)

15,000원 미만 시 2,500원 배송비 부과

교보Only(교보배송)
각각 구매하거나 함께 20,000원 이상 구매 시 무료배송

20,000원 미만 시 2,500원 배송비 부과

해외주문 서양도서/해외주문 일본도서(교보배송)
각각 구매하거나 함께 15,000원 이상 구매 시 무료배송

15,000원 미만 시 2,500원 배송비 부과

업체배송 상품(전집, GIFT, 음반/DVD 등)
해당 상품 상세페이지 "배송비" 참고 (업체 별/판매자 별 무료배송 기준 다름)
바로드림 오늘배송
업체에서 별도 배송하여 1Box당 배송비 2,500원 부과

1Box 기준 : 도서 10권

그 외 무료배송 기준
바로드림, eBook 상품을 주문한 경우, 플래티넘/골드/실버회원 무료배송쿠폰 이용하여 주문한 경우, 무료배송 등록 상품을 주문한 경우
주문정보를 불러오는 중입니다.
기본배송지 기준
배송일자 기준 안내
로그인 : 회원정보에 등록된 기본배송지
로그아웃 : '서울시 종로구 종로1' 주소 기준
로그인정확한 배송 안내를 받아보세요!

이달의 꽃과 함께 책을 받아보세요!

1권 구매 시 결제 단계에서 적용 가능합니다.

해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.

북카드

키워드 Pick

키워드 Pick 안내

관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.

React는 컴포넌트라 불리는 조각들을 사용해 사용자 인터페이스를 자유롭게 만들 수 있는 라이브러리이다. 이 책을 읽고 나면 React 최신 버전인 React 18을 사용해 보다 나은 사용자 인터페이스를 만드는 다양한 사고 방식과 기법을 익힐 수 있을 것이다.

작가정보

저자(글) 카를로스 산타나 롤단

16년 이상의 경력을 가진 소프트웨어 엔지니어이다. 『리액트 디자인 패턴과 모범 사례』(에이콘, 2017)의 2, 3, 4판을 썼다. 라틴아메리카에서 가장 잘 알려진 개발자 커뮤니티 중 하나인 시리즈 프론트엔드(Series Frontend)를 창설했으며, 이 커뮤니티에서 개인을 대상으로 다양한 웹 기술을 교육하고 있다(유튜브: https://www.youtube.com/@SeriesFrontend).

작가의 말

React(React)는 혁신적인 오픈소스 자바스크립트 라이브러리로 컴포넌트(Component)라고 부르는 작고 고립된 덩어리를 사용해 복잡한 사용자 인터페이스를 구성하도록 함으로써 웹 애플리케이션에 생명을 불어넣었다. 이 책은 로드맵의 역할을 할 것이다. React가 제공하는 멋진 세계로 여러분을 안내하는 동시에 품질에 타협하지 않는 효율적인 워크플로우를 도입합으로써 생산성을 개선하도록 할 것이다.
이 과정에서 가장 먼저 React의 핵심적인 측면을 깊이 살펴보고 React의 내부 메커니즘과 아키텍처에 관해 충분히 이해할 것이다. 이를 기반으로 깨끗하고 유지보수할 수 있는 코드를 작성하고, 복잡한 개념들을 어렵지 않게 관리할 수 있는 덩어리로 분해하는 방법을 알려줄 것이다.
이어서 애플리케이션 전체에 걸쳐 일회성이 아니라 재사용 가능한 컴포넌트를 구성하는 기술을 살펴본다. 애플리케이션을 구조화해 조금 더 체계적이고 관리 가능하게 만드는 방법을 알아본다. 효과적인 전략과 기술을 갖춰 나감에 따라 기능적인 형태를 만드는 겉으로 보기에 다소 어려워 보이는 작업이 쉬워질 것이다.
한걸음 더 나아가 React 컴포넌트 스타일링에 관해 다룬다. 애플리케이션의 신속함과 반응성을 유지하면서 미적 매력을 살려내는 방법을 배울 것이다. 또한 애플리케이션의 성능을 향상시키고 구성 요소들을 세세하게 조정해 속도와 효율성을 높이는 비결도 알게 될 것이다.
여행의 마지막 단계에서는 효과적인 테스팅 방법론을 다루면서 이를 활용해 애플리케이션의 품질과 신뢰성을 개선한다. 또한 지속적으로 진화를 주도하는 개발자 대열에 합류해 React 및 그 생태계의 번영에 기여하는 방법에 관한 통찰력도 얻을 수 있게 될 것이다.
이 책을 모두 읽고 나면 시행착오 중심의 프로세스, 개발 허들, 추측에 의존하던 업무들은 모두 과거의 유산이 될 것이다. 여러분은 실제 React 웹 애플리케이션을 자신 있게, 능숙하게 구성하고 배포하는 데 필요한 기술로 무장한 React의 힘을 활용하게 될 것이다.

목차

  • 1장. React 처음 사용하기
    __기술 요구 사항
    __선언적 프로그래밍과 명령적 프로그래밍의 차이
    __React 엘리먼트가 동작하는 방법
    __모든 것 버리기
    __자바스크립트 피로감 이해하기
    ____React에 관한 오해
    ____피로감 없이 React 시작하기
    ____자바스크립트 생태계가 주는 이점
    ____Create-React-App은 이제 그만, Vite 만나기!
    __정리
    2장. 타입스크립트 소개
    __기술 요구 사항
    __타입스크립트의 기능
    __자바스크립트 코드를 타입스크립트로 변환하기
    __타입
    __인터페이스
    __인터페이스와 타입 확장하기
    __인터페이스와 타입 구현하기
    __인터페이스 병합하기
    __열거형
    __이름 공간
    __템플릿 리터럴
    __타입스크립트 구성 파일
    __정리
    3장. 코드 정리하기
    __기술 요구 사항
    __JSX 사용하기
    ____바벨
    ____첫 번째 엘리먼트 만들기
    ____DOM 엘리먼트와 React 컴포넌트
    ____Props
    ____자녀
    ____HTML과의 차이점
    ____전개 속성
    ____템플릿 리터럴
    ____일반적인 (공통) 패턴
    __코드 스타일링하기
    ____EditorConfig
    ____Prettier
    ____ESLint
    __함수형 프로그래밍
    ____1급 함수
    ____순수성
    ____불변성
    ____커링
    ____합성
    __정리
    4장. 인기 있는 합성 패턴 살펴보기
    __기술 요구 사항
    __컴포넌트 간 통신하기
    ____children prop 사용하기
    __컨테이너 패턴 및 프레젠테이셔널 패턴
    __고차 컴포넌트 이해하기
    __FunctionAsChild 이해하기
    __정리
    5장. 브라우저를 위한 코드 작성하기
    __기술 요구 사항
    __폼 이해 및 구현하기
    ____통제되지 않은 컴포넌트
    ____통제된 컴포넌트
    __이벤트 다루기
    __refs 살펴보기
    ____forwardRef 이해하기
    __애니메이션 구현하기
    __SVG 살펴보기
    __정리
    6장. 컴포넌트를 아름답게 보이게 만들기
    __기술 요구 사항
    __자바스크립트에서의 CSS
    __인라인 스타일 이해하기와 구현하기
    __CSS 모듈 사용하기
    ____Webpack 5
    __프로젝트 설정하기
    __로컬 범위 CSS
    ____아토믹 CSS 모듈
    __styled-components 구현하기
    __정리
    7장. 피해야 할 안티 패턴
    __기술 요구 사항
    __속성을 이용해 상태 초기화하기
    __인덱스를 key로 사용하기
    __DOM 엘리먼트에 속성 전파하기
    __정리
    8장. React 훅
    __기술 요구 사항
    __React 훅 소개
    ____기존의 틀을 깨는 변화는 없다
    ____State 훅 사용하기
    __훅 규칙
    ____규칙 1: 톱 레벨에서만 훅을 호출한다
    ____규칙 2: React 함수에서만 훅을 호출한다
    __클래스 컴포넌트를 React 훅으로 마이그레이션하기
    __React 이펙트 이해하기
    ____useEffect 이해하기
    ____조건부로 이펙트 실행하기
    ____useCallback, useMemo, memo 이해하기
    __useReducer 훅 이해하기
    __정리
    9장. React 라우터
    __기술 요구 사항
    __React 라우터 설치 및 구성하기
    __섹션 생성하기
    __라우트에 매개변수 추가하기
    __React 라우터 v6.4
    ____React 라우터 로더
    __정리
    10장. React 18의 새로운 기능들
    __동시 모드
    __자동 배치
    __트랜지션
    __서버에서의 Suspense
    __신규 API
    ____createRoot
    ____hydrateRoot
    ____renderToPipeableStream
    __신규 훅
    ____useId
    ____useTransition
    ____useDeferredValue
    ____useInsertionEffect
    __엄격한 모드
    __Node.js의 최신 기능들
    ____실험적인 Fetch API
    ____실험적인 test runner 모듈
    ____실험적인 node watch
    ____Node 18은 이제 장기 지원 버전이다(LTS)
    __정리
    11장. 데이터 관리하기
    __기술 요구 사항
    __React Context API 소개
    ____첫 번째 컴포넌트 생성하기
    ____프로바이더로 컴포넌트 감싸기
    __useContext를 사용해 컨텍스트 소비하기
    __SWR을 사용한 React 대기 도입하기
    ____SWR 도입하기
    ____Pokedex 만들기
    __리덕스 툴킷: 리덕스에 대한 현대적인 접근 방식
    ____핵심 기능
    ____시작하기
    ____스토어 생성하기
    ____슬라이스 생성하기
    ____리듀서 조합하기
    ____컴포넌트를 스토어와 연결하기
    ____스토어를 React 애플리케이션과 통합하기
    __정리
    12장. 서버 사이드 렌더링
    __기술 요구 사항
    __유니버설 애플리케이션 이해하기
    __SSR을 구현해야 하는 이유
    ____SEO 구현하기
    ____공통 코드 베이스
    ____더 나은 성능
    ____SSR의 복잡성 과소평가하지 말기
    __기본적인 SSR 예제 만들기
    ____웹팩을 사용해 프로젝트 처음부터 구성하기
    ____애플리케이션 생성하기
    __데이터 가져오기 구현하기
    __Next.js를 사용해 React 애플리케이션 생성하기
    __정리
    13장. 실제 프로젝트를 통해 GraphQL 이해하기
    __기술 요구 사항
    __PostgreSQL, Apollo 서버, GraphQL, Sequelize,
    __JSON 웹 토큰을 사용해 백엔드 로그인 시스템 구축하기
    __Postgres 설치하기
    ____PostgreSQL 데이터베이스 관리를 위한 최고의 도구들
    __백엔드 프로젝트 생성하기
    ____.env 파일 구성하기
    ____기본 config 파일 생성하기
    __Apollo 서버 구성하기
    __GraphQL 유형, 쿼리, 뮤테이션 정의하기
    ____스칼라 타입
    ____쿼리
    ____뮤테이션
    ____타입 정의 병합하기
    __리졸버 생성하기
    ____getUsers 쿼리 생성하기
    ____getUser 쿼리 생성하기
    ____뮤테이션 생성하기
    ____리졸버 병합하기
    __Sequelize ORM 사용하기
    ____Sequelize에서 사용자 모델 생성하기
    ____Sequelize를 PostgreSQL 데이터베이스에 연결하기
    __인증 함수
    ____JWT 함수 생성하기
    ____인증 함수 생성하기
    ____타입과 인터페이스 정의하기
    __처음으로 프로젝트 실행하기
    ____GraphQL 쿼리와 뮤테이션 테스팅하기
    ____모델 검증 테스트하기와 사용자 질의하기
    ____로그인 수행하기
    __Apollo 클라이언트를 사용해 프런트엔드 로그인 시스템 구현하기
    ____웹팩 5 구성하기
    ____타입스크립트 구성하기
    ____Express 서버 구성하기
    ____프런트엔드 구성 생성하기
    ____사용자 미들웨어 생성하기
    ____JWT 함수 생성하기
    ____GraphQL 쿼리와 뮤테이션 생성하기
    ____로그인 및 연결된 사용자를 처리하기 위한 사용자 컨텍스트 생성하기
    ____Apollo 클라이언트 구성하기
    ____애플리케이션 라우트 생성하기
    ____페이지 생성하기
    ____로그인 컴포넌트 생성하기
    ____dashboard 컴포넌트 생성하기
    ____로그인 시스템 테스트하기
    __정리
    14장. 단일 저장소 아키텍처
    __기술 요구 사항
    __단일 저장소의 장점과 단일 저장소가 해결하는 문제들
    __NPM Workspaces를 사용해 단일 저장소 생성하기
    __단일 저장소에서 타입스크립트 구현하기
    __웹팩을 사용해 패키지를 컴파일하기 위한 devtools 패키지 생성하기
    ____다양한 색상의 로그 생성하기
    ____웹팩 공통 구성
    ____웹팩 개발 구성
    ____웹팩 프로덕션 구성
    __utils 패키지 생성하기
    __API 패키지 생성하기
    ____사용자 공유 모델 생성하기
    ____사용자 공유 GraphQL 타입 및 리졸버
    ____커스텀 서비스 생성하기
    ____서비스 구성 빌드하기
    ____커스텀 모델 생성하기
    ____모델 시드 생성하기
    ____커스텀 GraphQL 타입과 리졸버 생성하기
    ____모델 동기화하기와 Apollo 서버 시작하기
    ____CRM 서비스 테스트하기
    __프런트엔드 패키지 생성하기
    ____Sites 시스템 생성하기
    ____페이지 스위처 생성하기
    ____Login 시스템 생성하기
    ____Sites 구성 생성하기
    ____모든 것을 합치기
    ____데모 시간
    __정리
    15장. 애플리케이션 성능 개선하기
    __기술 요구 사항
    __조정이 동작하는 방법
    __키 사용하기
    __최적화 기법
    __도구와 라이브러리
    ____불변성
    ____바벨 플러그인
    __정리
    16장. 테스팅과 디버깅
    __기술 요구 사항
    __테스팅의 이점 이해하기
    __Jest를 사용한 고통 없는 자바스크립트 테스팅
    ____이벤트 테스트하기
    __Vitest 도입하기
    ____Vitest 설치 및 구성하기
    ____globals 활성화하기
    ____인소스 테스팅
    __React DevTools 사용하기
    ____리덕스 DevTools 사용하기
    __정리
    17장. 프로덕션으로 배포하기
    __기술 요구 사항
    __첫 번째 DigitalOcean Droplet 생성하기
    ____DigitalOcean에 가입하기
    ____첫 번째 Droplet 생성하기
    ____Node.js 설치하기
    ____깃, 깃허브 구성하기
    ____Droplet 종료하기
    __nginx, PM2 및 도메인 구성하기
    ____nginx 설치 및 구성하기
    ____역프록시 서버 설정하기
    ____Droplet에 도메인 추가하기
    __지속적인 통합을 위한 CircleCI 구현하기
    ____CircleCI에 SSH 키 추가하기
    ____CircleCI 구성하기
    ____CircleCI에서 환경변수 생성하기
    __정리

출판사 서평

◈ 이 책에서 다루는 내용 ◈

◆ React 18 및 노드 19의 기능과 친숙해진다.
◆ 타입스크립트의 기본/고급 기능들에 관해 살펴본다.
◆ 다양한 패턴과 기법들을 적용해 컴포넌트 사이에 통신을 수행한다.
◆ 단일 저장소 아키텍처에 관해 살펴본다.
◆ 서버 사이드 렌더링을 사용해 애플리케이션을 빠르게 로드한다.
◆ 종합적인 테스트 셋을 작성해 강건하고 유지 보수할 수 있는 코드를 생성한다.
◆ React 컴포넌트를 스타일링하고 최적화함으로써 고성능의 애플리케이션을 빌드한다.


◈ 이 책의 대상 독자 ◈

React를 더욱 잘 이해하고 이를 실세계의 애플리케이션 개발에 적용하고자 하는 웹 개발자를 위해 썼다. React 및 자바스크립트에 대한 중간 수준의 경험을 가졌다고 가정한다.


◈ 이 책의 구성 ◈

1장, ‘React 처음 사용하기’에서는 React를 이해하기 위한 여정을 시작한다. 여기에서는 선언적 코드(declarative code)를 작성하고 컴포넌트와 React의 엘리먼트(element)를 구분해본다. 로직과 React의 템플릿을 조합한 이유에 관해 논의한다. 다소 논란의 여지가 있을 수 있지만 궁극적으로는 이익이 되는 결정이다. 매우 빠르게 진화하는 자바스크립트의 세계에서 압도되는 느낌을 받을 수 있는 가능성을 알고 있으므로 작고 관리 가능한 단계를 택함으로써 피로를 피한다. 새로운 create-vite 도구를 소개하고 React를 사용해 직접 코딩할 수 있는 경험을 준비하면서 1장을 마무리한다.
2장, ‘타입스크립트 소개’에서는 타입스크립트의 기본을 배운다. 간단한 타입과 인터페이스 생성하기, 열거형과 이름 공간 및 템플릿 리터럴 사용하기를 포함한다. 그리고 첫 번째 타입스크립트 구성 파일(tsconfig.json)을 설정하고 이를 두 부분(공통 부분과 특정 부분 - 단일 저장소(MonoRepo)를 사용해 작업할 때 특히 편리하다)으로 나누는 방법에 관해 살펴본다
3장, ‘코드 정리하기’에서는 JSX 파일을 작성하는 방법과 그 기능을 알아본다. 아울러 Prettier와 ESLint를 사용해서 코드를 깔끔하게 유지하고 실수를 방지하는 방법에 관해 알아본다. 또한 함수형 프로그래밍에 관해 학습한다. 함수형 프로그래밍을 사용하면 코드를 쉽게 관리하고 테스트할 수 있다.
4장, ‘인기 있는 합성 패턴 살펴보기’에서는 props를 사용해 재사용할 수 있는 컴포넌트들이 함께 더 잘 동작하도록 만드는 방법을 익힌다. props를 사용하면 컴포넌트들을 분리하고 잘 정의된 상태로 유지할 수 있다. 컴포넌트를 조직화하는 두 가지 일반적인 방법인 컨테이너 패턴(container pattern)과 프레젠테이셔널 패턴(presentational pattern)에 관해 살펴본다. 이러한 방법을 사용해 컴포넌트 분리의 규칙과 형태를 유지한다. 또한 고차 컴포넌트(HOC, Higer Order Component)를 사용해서 컴포넌트 사이의 의존성을 너무 높이지 않으면서 컨텍스트를 다루는 방법, Function as Children 패턴을 사용해 실시간으로 컴포넌트를 생성하는 방법을 배운다.
5장, ‘브라우저를 위한 코드 작성하기’에서는 웹 브라우저에서 React를 사용해 폼을 생성하고, 이벤트를 처리하고, SVG를 움직이는 방법을 관찰한다. DOM 노드에 쉽게 접근할 수 있는 useRef 훅에 관해 학습한다. React는 간단하고 직관적인 접근 방식을 제공해 복잡한 웹 앱을 좀 더 쉽게 관리하게 해준다. 또한 React에서는 필요한 경우 DOM 노드에 직접 접근할 수 있으므로 React를 다른 라이브러리와 간단하게 사용할 수 있다.
6장, ‘컴포넌트를 아름답게 보이게 만들기’에서는 React에서의 스타일링에 관해 살펴본다. 메타(Meta)에서의 경험을 예로, 큰 프로젝트에서 CSS를 작성하는 작업의 문제점에 관해 살펴본다. 이후 React 컴포넌트에 스타일을 직접 작성하는 방법을 알아본다. 이를 활용하면 코드를 깨끗하고 읽기 쉽게 유지할 수 있다. 동시에 이 방법의 제한점에 관해 살펴보고 그와 동시에 CSS 모듈이라 부르는 다른 스타일링 방법에 관해 살펴본다. 이 방법을 사용하면 CSS를 별도의 파일에 작성하면서도 개별 컴포넌트에 대한 스타일 적용 범위를 유지할 수 있다. 마지막으로 React 스타일링에 관한 인기 있는 라이브러리인 styled-components에 관해 살펴본다. 6장을 마치면 React 앱을 멋지게 보이도록 만들 수 있는 많은 도구를 갖게 될 것이다.
7장, ‘피해야 할 안티 패턴’에서는 웹 앱의 속도를 낮추고 엉망으로 만들 수 있는 네 가지 컴포넌트 사용 방법에 관해 논의한다. 각 방법마다 예시를 통해 무엇이 잘못될 수 있으며 어떻게 수정할 수 있는지 살펴본다. 상태를 설정하기 위해 속성을 사용하는 것이 해당 상태와 해당 속성 사이에 문제를 일으키는 이유를 학습한다. 또한 잘못된 key 속성을 사용함으로써 React가 컴포넌트를 업데이트하는 방법을 망칠 수 있음에 관해 살펴본다. 마지막으로 DOM 엘리먼트에 비표준 속성을 퍼뜨리는 것이 나쁜 아이디어인 이유를 살펴본다. 이 문제를 이해함으로써 React를 좀 더 효과적으로 활용하면서도 공통적인 실수들을 피할 수 있다.
8장, ‘React 훅’에서는 새로운 React 훅에 관해 학습하며 즐거운 시간을 보낼 것이다. React 훅이 동작하는 방법, 데이터를 가져오는 방법, 클래스 컴포넌트를 훅으로 변환하는 방법에 관해 학습한다. 또한 effects, memo, useMemo, useCallback의 차이점에 관해서도 익힌다. 마지막으로 useReducer 훅이 작동하는 방법과 react-redux와의 차이점에 관해서도 알아본다. 이 모든 것으로 인해 우리가 만드는 React 컴포넌트는 더 빠르고 나아질 것이다.
9장, ‘React 라우터’에서는 React 라우터에 관해 학습한다. React 라우터를 React와 함께 사용해 싱글 페이지 애플리케이션 안에서 페이지 간 이동을 관리할 수 있다. React 자체적으로는 이를 수행하지 않기 때문에 React 라우터를 사용한다. React 라우터를 사용해 앱이 어떻게 다른 URL에 대해 응답하고 탐색을 관리하는지 살펴본다. 9장을 마치고 나면 React 라우터가 작동하는 방법과 프로젝트에서의 사용 방법에 관해 알게 될 것이다. 또한 react-router, react-router-dom, react-router-native 패키지들의 차이점과 React 라우터 설정 방법, 〈Routes〉 컴포넌트 추가 방법, 라우트에 매개변수를 추가하는 방법에 관한 차이점도 배울 것이다.
10장, ‘React 18의 새로운 기능들’에서는 새롭게 개선된 React 18에 관해 살펴본다. React 18은 멋진 대화형 앱을 더욱 쉽게 구축할 수 있도록 다양한 기능을 제공한다. 자동 상태 업데이트 그룹화, 동시 렌더링, 데이터 취득을 위한 대기, 더 나은 오류 처리 및 새로운 컴포넌트 유형을 사용해 매력적이고 빠른 앱을 만들 수 있다. React를 사용한다면 React 18로 업그레이드를 고려하는 것이 좋다. 또한 웹 프로젝트를 더욱 개선할 수 있는 노드 18과 19의 주요한 새로운 기능에 관해서도 살펴본다.
11장, ‘데이터 관리하기’에서는 React Context API에 관해 배우고 React Suspense와 SWR을 함께 사용하는 방법을 살펴본다. Context API의 기본 개념을 학습하며, 여기에는 컨텍스트 생성 및 사용 방법과 useContext 훅을 사용해 이를 더욱 간편하게 만드는 방법이 포함된다. 또한 React Suspense에 관해 살펴보고, 더 부드러운 사용자 경험을 위해 로딩 상태를 잘 처리하는 데 어떻게 도움이 되는지 확인한다. 더불어 React Suspense와 함께 사용해서 데이터를 더 쉽게 가져오고 캐시하는 데 도움이 되는 SWR에 관해서도 학습한다. 마지막으로 새로운 리덕스 툴킷(Redux Toolkit)의 사용 방법을 익힌다. 이들을 활용하면 더욱 빠르고 사용자 친화적인 React 앱을 구축할 수 있다.
12장, ‘서버 사이드 렌더링’에서는 React를 사용한 서버 사이드 렌더링(SSR, Server-Side Rendering)에 관해 살펴보면서 여정을 마무리한다. 이제 여러분은 SSR을 사용해 앱을 만드는 방법과 이것이 검색 엔진 최적화(SEO, Search Engine Optimization), 소셜 공유 및 성능 향상과 같은 목적을 위해 유용한 이유에 관해 알게 될 것이다. 서버에서 데이터를 로드하고 HTML 템플릿에서 넣음으로써 클라이언트 사이드 앱이 브라우저에서 시작되는 시점에 이미 준비되도록 하는 방법을 배운다. 마지막으로 Next.js와 같은 도구를 사용해 어떻게 SSR 설정을 더 쉽게 하고, 추가 코드 양을 줄이며, 어려운 부분을 감출 수 있는지 알게 될 것이다.
13장, ‘실제 프로젝트를 통해 GraphQL 이해하기’에서는 GraphQL에 관해 학습한다. GraphQL은 일반적인 REST API와 달리 정확히 필요한 내용만 요청할 수 있는 멋진 도구로, API 및 데이터를 효율적으로 다룰 수 있게 도와준다. GraphQL을 사용해서 실제 프로젝트를 위한 간단한 로그인 및 사용자 등록 시스템을 만들 것이다. PostgreSQL 설치, .env 파일을 사용한 환경변수 설정, Apollo 서버 설정, GraphQL 쿼리와 뮤테이션 생성, 리졸버resolver 조작, Sequelize 모델 생성, JWT 사용, GraphQL Playground 사용 및 인증 방법에 관해 학습한다. 13장을 마치면 자신의 프로젝트에서 GraphQL을 사용하는 방법을 알게 될 것이다.
14장, ‘단일 저장소 아키텍처’에서는 단일 저장소(MonoRepo), Mono-Repository에 관해 설명한다. 일반적으로 앱을 구축할 때 하나의 앱, 하나의 깃 저장소 및 하나의 빌드 결과물을 갖는다. 하지만 많은 조직은 단일 저장소를 사용해서 모든 앱, 컴포넌트 및 라이브러리를 쉽게 개발한다. 이것이 바로 단일 저장소이며 작은 여러 바구니가 아니라 큰 하나의 바구니에 모든 코드를 모아두는 것처럼 생각할 수 있다. 이를 활용하면 모든 것을 더 쉽게 업데이트할 수 있으며 시간을 절약할 수 있다. 단일 저장소를 사용해 새 버전을 매번 출시하지 않고도 코드 리팩터링을 더 쉽게 만들고, 팀워크를 개선하며, 패키지 종속성을 업데이트하는 데 도움이 되는 방법에 관해서 논의할 것이다.
15장, ‘애플리케이션 성능 개선하기’에서는 여러분의 앱을 좀 더 부드럽고 빠르게 동작시켜 더 나은 사용자 경험을 만드는 기법을 탐색한다. React가 앱 화면을 업데이트하는 방법과 키를 사용해서 효율성을 개선하는 데 도움을 얻는 방법에 관해 자세히 살펴본다. 앱 성능을 향상시키기 위해 잘 구조화된 작업 중심 컴포넌트의 중요성을 발견하게 될 것이다. 또한 불변성(immutability)의 개념과 불변성이 React.memo 및 shallowCompare가 효과적으로 작동하는 데 얼마나 중요한지 알아볼 것이다. 마지막으로 애플리케이션을 더욱 빠르게 만드는 다양한 도구와 라이브러리를 소개한다. 15장에서는 앱의 속도와 성능을 향상시키기 위한 가치 있는 지식을 제공하는 것을 목적으로 한다.
16장, ‘테스팅과 디버깅’에서는 테스팅에 관해 배운다. 테스트가 중요한 이유, React 컴포넌트가 제대로 작동하는지 확인하는 데 사용하는 다양한 도구와 기술을 탐험한다. React 테스팅 라이브러리(React Testing Library)와 Jest 같은 라이브러리를 사용해 테스트를 작성하고 실행하는 방법에 관해 학습하고, 고차 컴포넌트나 다양한 필드가 있는 템플릿과 같은 애플리케이션의 복잡한 부분의 테스트 방법에 관해서도 살펴본다. 또 React DevTools, 리덕스 DevTools 같은 도구를 사용해 더 나은 앱을 개발하는 데 도움을 받는 방법도 익힐 것이다. 16장을 마치면 효과적인 테스트를 통해 앱을 원활하게 유지하는 방법을 견고하게 이해하게 될 것이다.
17장, ‘프로덕션으로 배포하기’에서는 여러분이 구축한 React 앱을 세상에 공개한다! 이를 위해 DigitalOcean이라는 클라우드 서비스를 사용할 것이다. Node.js와 nginx를 사용해 서버에서 앱을 실행하는 방법을 학습하고, 이를 위해 DigitalOcean의 Ubuntu 서버를 활용할 것이다. DigitalOcean Droplet의 설정 및 구성, 도메인에 대한 연결 방법을 안내할 것이다. 또한 변경 사항의 양에 관계없이 항상 사용자에게 준비된 상태로 앱을 유지할 수 있도록 도와주는 도구인 CircleCI에 관해 소개한다. 17장을 마치면 여러분의 앱이 인터넷을 통해 공개되고 모든 사람이 그 앱을 볼 수 있을 것이다.

◈ 옮긴이의 말 ◈

React는 컴포넌트라 부르는 작은, 격리된 덩어리를 사용해 복잡한 사용자 인터페이스를 구성하게 하는 혁신적인 오픈소스 자바스크립트 라이브러리입니다. 2013년 페이스북(현 메타)에 의해 발표된 React는 단순히 사용자 인터페이스를 개선하는 것에 그치지 않고 깨끗하고 유지보수할 수 있는 코드를 작성하도록 함으로써 개발 생산성도 높여주는 도구로 인지도가 급격하게 상승했으며, 이제는 자바스크립트 프로젝트 개발에 없어서는 안 될 필수 라이브러리가 됐습니다.
이 책은 사용자 인터페이스를 개선하는 React의 기능과 특성은 물론 React의 본질을 이해하는 데서 시작해, 재사용 가능한 컴포넌트를 구성하고 애플리케이션을 구조화하는 방법에 관해 설명합니다. 이를 바탕으로 애플리케이션의 미적 매력을 살리면서도 전체적인 성능을 향상시키는 방법에 관한 지식을 얻을 수 있습니다. React 훅, React 라우터, 최신 버전인 React v18의 새로운 기능에 또한 React를 사용한 개발에서 필요한 테스팅과 디버깅 방법을 익힘으로써 React 코드의 품질을 한층 높일 수 있는 통찰력도 얻을 수 있을 것입니다. 마지막으로 여러분이 작성한 코드를 배포하는 과정을 통해 React라는 강력한 무기를 자유롭게 사용할 수 있게 될 것입니다.

기본정보

상품정보 테이블로 ISBN, 발행(출시)일자 , 쪽수, 크기, 총권수, 시리즈명, 원서(번역서)명/저자명을(를) 나타낸 표입니다.
ISBN 9791161759210
발행(출시)일자 2024년 10월 18일
쪽수 540쪽
크기
188 * 234 * 32 mm / 1121 g
총권수 1권
시리즈명
웹 프로페셔널
원서(번역서)명/저자명 React 18 Design Patterns and Best Practices/Carlos Santana Roldan

Klover

구매 후 리뷰 작성 시, e교환권 200원 적립

데이터를 불러오는 중입니다.

문장수집 (2)

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
판매가 5,000원 미만 상품의 경우 리워드 지급 대상에서 제외됩니다. (2024년 9월 30일부터 적용)

구매 후 리뷰 작성 시, e교환권 100원 적립

이 책을 모두 읽고 나면 시행착오 중심의 프로세스, 개발 허들, 추측에 의존하던 업무들은 모두 과거의 유산이 될 것이다.
React 18 디자인 패턴과 베스트 프랙티스 4/e
React 18 디자인 패턴과 베스트 프랙티스 4/e
React 18 디자인 패턴과 베스트 프랙티스 4/e

교환/반품/품절 안내

상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

TOP