React 18 디자인 패턴과 베스트 프랙티스 4/e
보다 나은 사용자 인터페이스 만들기
$45.89
SKU
9791161759210
[Free shipping over $100]
Standard Shipping estimated by Thu 12/5 - Wed 12/11 (주문일로부 10-14 영업일)
Express Shipping estimated by Mon 12/2 - Wed 12/4 (주문일로부 7-9 영업일)
* 안내되는 배송 완료 예상일은 유통사/배송사의 상황에 따라 예고 없이 변동될 수 있습니다.
| Publication Date | 2024/10/18 |
| Pages/Weight/Size | 188*235*25mm |
| ISBN | 9791161759210 |
| Categories | IT 모바일 > 프로그래밍 언어 |
Description
React는 컴포넌트라 불리는 조각들을 사용해 사용자 인터페이스를 자유롭게 만들 수 있는 라이브러리이다. 이 책을 읽고 나면 React 최신 버전인 React 18을 사용해 보다 나은 사용자 인터페이스를 만드는 다양한 사고 방식과 기법을 익힐 수 있을 것이다.
Contents
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 엘리먼트가 동작하는 방법
__모든 것 버리기
__자바스크립트 피로감 이해하기
____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에서 환경변수 생성하기
__정리