모던 리액트 Deep Dive
도서+사은품 또는 도서+사은품+교보Only(교보굿즈)
15,000원 미만 시 2,500원 배송비 부과
20,000원 미만 시 2,500원 배송비 부과
15,000원 미만 시 2,500원 배송비 부과
1Box 기준 : 도서 10권
로그아웃 : '서울시 종로구 종로1' 주소 기준
이달의 꽃과 함께 책을 받아보세요!
1권 구매 시 결제 단계에서 적용 가능합니다.
알림 신청하시면 원하시는 정보를
받아 보실 수 있습니다.
키워드 Pick
키워드 Pick 안내
관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.
이 책에서는 0.x 버전의 리액트부터 최신 버전인 18 버전에 이르기까지, 리액트를 둘러싼 다양한 내용을 다루고 있습니다. 리액트는 하나의 온전한 웹 프레임워크를 지향하지 않아 UI 외에 상태 관리나 서버 사이드 렌더링 등 웹 개발의 많은 영역에서 선택의 여지를 남겨뒀으며, 이 때문에 리액트 개발자라면 알아둬야 할 내용이 많습니다.
함수형 컴포넌트와 훅의 동작 원리, 메모이제이션의 필요성과 실제로 메모이제이션되고 있는지 확인하는 방법, 리액트의 상태 관리와 다양한 상태 관리 라이브러리의 동작 방식, 실무에서 널리 쓰이고 있는 Next.js, 그리고 리액트 애플리케이션의 성능을 분석하는 방법까지, 리액트에 관심 있는 개발자라면 이 책을 통해 리액트 앱 개발의 시작부터 끝까지 경험해 보면서 웹 서비스 개발의 즐거움을 만끽하시길 바랍니다.
이 책의 총서 (33)
작가정보
목차
- ▣ 들어가며
__왜 리액트인가?
__리액트의 역사
__2010년대 프런트엔드 개발 환경을 향한 페이스북의 도전
__BoltJS의 등장과 한계
__페이스북 팀의 대안으로 떠오른 리액트
__리액트에 대한 회의적인 의견과 비판
__드디어 빛을 보는 리액트
__리액트의 현재와 미래
▣ 01장: 리액트 개발을 위해 꼭 알아야 할 자바스크립트
1.1 자바스크립트의 동등 비교
__1.1.1 자바스크립트의 데이터 타입
__1.1.2 값을 저장하는 방식의 차이
__1.1.3 자바스크립트의 또 다른 비교 공식, Object.is
__1.1.4 리액트에서의 동등 비교
__1.1.5 정리
1.2 함수
__1.2.1 함수란 무엇인가?
__1.2.2 함수를 정의하는 4가지 방법
__1.2.3 다양한 함수 살펴보기
__1.2.4 함수를 만들 때 주의해야 할 사항
__1.2.5 정리
1.3 클래스
__1.3.1 클래스란 무엇인가?
__1.3.2 클래스와 함수의 관계
__1.3.3 정리
1.4 클로저
__1.4.1 클로저의 정의
__1.4.2 변수의 유효 범위, 스코프
__1.4.3 클로저의 활용
__1.4.4 주의할 점
__1.4.5 정리
1.5 이벤트 루프와 비동기 통신의 이해
__1.5.1 싱글 스레드 자바스크립트
__1.5.2 이벤트 루프란?
__1.5.3 태스크 큐와 마이크로 태스크 큐
__1.5.4 정리
1.6 리액트에서 자주 사용하는 자바스크립트 문법
__1.6.1 구조 분해 할당
__1.6.2 전개 구문
__1.6.3 객체 초기자
__1.6.4 Array 프로토타입의 메서드: map, filter, reduce, forEach
__1.6.5 삼항 조건 연산자
__1.6.6 정리
1.7 선택이 아닌 필수, 타입스크립트
__1.7.1 타입스크립트란?
__1.7.2 리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법
__1.7.3 타입스크립트 전환 가이드
__1.7.4 정리
▣ 02장: 리액트 핵심 요소 깊게 살펴보기
2.1 JSX란?
__2.1.1 JSX의 정의
__2.1.2 JSX 예제
__2.1.3 JSX는 어떻게 자바스크립트에서 변환될까?
__2.1.4 정리
2.2 가상 DOM과 리액트 파이버
__2.2.1 DOM과 브라우저 렌더링 과정
__2.2.2 가상 DOM의 탄생 배경
__2.2.3 가상 DOM을 위한 아키텍처, 리액트 파이버
__2.2.4 파이버와 가상 DOM
__2.2.5 정리
2.3 클래스형 컴포넌트와 함수형 컴포넌트
__2.3.1 클래스형 컴포넌트
__2.3.2 함수형 컴포넌트
__2.3.3 함수형 컴포넌트 vs. 클래스형 컴포넌트
__2.3.4 정리
2.4 렌더링은 어떻게 일어나는가?
__2.4.1 리액트의 렌더링이란?
__2.4.2 리액트의 렌더링이 일어나는 이유
__2.4.3 리액트의 렌더링 프로세스
__2.4.4 렌더와 커밋
__2.4.5 일반적인 렌더링 시나리오 살펴보기
__2.4.6 정리
2.5 컴포넌트와 함수의 무거운 연산을 기억해 두는 메모이제이션
__2.5.1 주장 1: 섣부른 최적화는 독이다, 꼭 필요한 곳에만 메모이제이션을 추가하자
__2.5.2 주장 2: 렌더링 과정의 비용은 비싸다, 모조리 메모이제이션해 버리자
__2.5.3 결론 및 정리
▣ 03장: 리액트 훅 깊게 살펴보기
3.1 리액트의 모든 훅 파헤치기
__3.1.1 useState
__3.1.2 useEffect
__3.1.3 useMemo
__3.1.4 useCallback
__3.1.5 useRef
__3.1.6 useContext
__3.1.7 useReducer
__3.1.8 useImperativeHandle
__3.1.9 useLayoutEffect
__3.1.10 useDebugValue
__3.1.11 훅의 규칙
__3.1.12 정리
3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
__3.2.1 사용자 정의 훅
__3.2.2 고차 컴포넌트
__3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
__3.2.4 정리
▣ 04장: 서버 사이드 렌더링
4.1 서버 사이드 렌더링이란?
__4.1.1 싱글 페이지 애플리케이션의 세상
__4.1.2 서버 사이드 렌더링이란?
__4.1.3 SPA와 SSR을 모두 알아야 하는 이유
__4.1.4 정리
4.2 서버 사이드 렌더링을 위한 리액트 API 살펴보기
__4.2.1 renderToString
__4.2.2 renderToStaticMarkup
__4.2.3 renderToNodeStream
__4.2.4 renderToStaticNodeStream
__4.2.5 hydrate
__4.2.6 서버 사이드 렌더링 예제 프로젝트
__4.2.7 정리
4.3 Next.js 톺아보기
__4.3.1 Next.js란?
__4.3.2 Next.js 시작하기
__4.3.3 Data Fetching
__4.3.4 스타일 적용하기
__4.3.5 _app.tsx 응용하기
__4.3.6 next.config.js 살펴보기
__4.3.7 정리
▣ 05장: 리액트와 상태 관리 라이브러리
5.1 상태 관리는 왜 필요한가?
__5.1.1 리액트 상태 관리의 역사
__5.1.2 정리
5.2 리액트 훅으로 시작하는 상태 관리
__5.2.1 가장 기본적인 방법: useState와 useReducer
__5.2.2 지역 상태의 한계를 벗어나보자: useState의 상태를 바깥으로 분리하기
__5.2.3 useState와 Context를 동시에 사용해 보기
__5.2.4 상태 관리 라이브러리 Recoil, Jotai, Zustand 살펴보기
__5.2.5 정리
▣ 06장: 리액트 개발 도구로 디버깅하기
6.1 리액트 개발 도구란?
6.2 리액트 개발 도구 설치
6.3 리액트 개발 도구 활용하기
__6.3.1 컴포넌트
__6.3.2 프로파일러
6.4 정리
▣ 07장: 크롬 개발자 도구를 활용한 애플리케이션 분석
7.1 크롬 개발자 도구란?
7.2 요소 탭
__7.2.1 요소 화면
__7.2.2 요소 정보
7.3 소스 탭
7.4 네트워크 탭
7.5 메모리 탭
__7.5.1 자바스크립트 인스턴스 VM 선택
__7.5.2 힙 스냅샷
__7.5.3 타임라인 할당 계측
__7.5.4 할당 샘플링
7.6 Next.js 환경 디버깅하기
__7.6.1 Next.js 프로젝트를 디버그 모드로 실행하기
__7.6.2 Next.js 서버에 트래픽 유입시키기
__7.6.3 Next.js의 메모리 누수 지점 확인하기
7.7 정리
▣ 08장: 좋은 리액트 코드 작성을 위한 환경 구축하기
8.1 ESLint를 활용한 정적 코드 분석
__8.1.1 ESLint 살펴보기
__8.1.2 eslint-plugin과 eslint-config
__8.1.3 나만의 ESLint 규칙 만들기
__8.1.4 주의할 점
__8.1.5 정리
8.2 리액트 팀이 권장하는 리액트 테스트 라이브러리
__8.2.1 React Testing Library란?
__8.2.2 자바스크립트 테스트의 기초
__8.2.3 리액트 컴포넌트 테스트 코드 작성하기
__8.2.4 사용자 정의 훅 테스트하기
__8.2.5 테스트를 작성하기에 앞서 고려해야 할 점
__8.2.6 그 밖에 해볼 만한 여러 가지 테스트
__8.2.7 정리
▣ 09장: 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기
9.1 Next.js로 리액트 개발 환경 구축하기
__9.1.1 create-next-app 없이 하나씩 구축하기
__9.1.2 tsconfig.json 작성하기
__9.1.3 next.config.js 작성하기
__9.1.4 ESLint와 Prettier 설정하기
__9.1.5 스타일 설정하기
__9.1.6 애플리케이션 코드 작성
__9.1.7 정리
9.2 깃허브 100% 활용하기
__9.2.1 깃허브 액션으로 CI 환경 구축하기
__9.2.2 직접 작성하지 않고 유용한 액션과 깃허브 앱 가져다 쓰기
__9.2.3 깃허브 Dependabot으로 보안 취약점 해결하기
__9.2.4 정리
9.3 리액트 애플리케이션 배포하기
__9.3.1 Netlify
__9.3.2 Vercel
__9.3.3 DigitalOcean
__9.3.4 정리
9.4 리액트 애플리케이션 도커라이즈하기
__9.4.1 리액트 앱을 도커라이즈하는 방법
__9.4.2 도커로 만든 이미지 배포하기
__9.4.3 정리
▣ 10장: 리액트 17과 18의 변경 사항 살펴보기
10.1 리액트 17 버전 살펴보기
__10.1.1 리액트의 점진적인 업그레이드
__10.1.2 이벤트 위임 방식의 변경
__10.1.3 import React from ‘reac’가 더 이상 필요 없다: 새로운 JSX transform
__10.1.4 그 밖의 주요 변경 사항
__10.1.5 정리
10.2 리액트 18 버전 살펴보기
__10.2.1 새로 추가된 훅 살펴보기
__10.2.2 react-dom/client
__10.2.3 react-dom/server
__10.2.4 자동 배치(Automatic Batching)
__10.2.5 더욱 엄격해진 엄격 모드
__10.2.6 Suspense 기능 강화
__10.2.7 인터넷 익스플로러 지원 중단에 따른 추가 폴리필 필요
__10.2.8 그 밖에 알아두면 좋은 변경사항
__10.2.9 정리
▣ 11장: Next.js 13과 리액트 18
11.1 app 디렉터리의 등장
__11.1.1 라우팅
11.2 리액트 서버 컴포넌트
__11.2.1 기존 리액트 컴포넌트와 서버 사이드 렌더링의 한계
__11.2.2 서버 컴포넌트란?
__11.2.3 서버 사이드 렌더링과 서버 컴포넌트의 차이
__11.2.4 서버 컴포넌트는 어떻게 작동하는가?
11.3 Next.js에서의 리액트 서버 컴포넌트
__11.3.1 새로운 fetch 도입과 getServerSideProps, getStaticProps, getInitial Props의 삭제
__11.3.2 정적 렌더링과 동적 렌더링
__11.3.3 캐시와 mutating, 그리고 revalidating
__11.3.4 스트리밍을 활용한 점진적인 페이지 불러오기
11.4 웹팩의 대항마, 터보팩의 등장(beta)
11.5 서버 액션(alpha)
__11.5.1 form의 action
__11.5.2 input의 submit과 image의 formAction
__11.5.3 startTransition과의 연동
__11.5.4 server mutation이 없는 작업
__11.5.5 서버 액션 사용 시 주의할 점
11.6 그 밖의 변화
11.7 Next.js 13 코드 맛보기
__11.7.1 getServerSideProps와 비슷한 서버 사이드 렌더링 구현해 보기
__11.7.2 getStaticProps와 비슷한 정적인 페이지 렌더링 구현해 보기
__11.7.3 로딩, 스트리밍, 서스펜스
11.8 정리 및 주의사항
▣ 12장: 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표
12.1 웹사이트와 성능
12.2 핵심 웹 지표란?
12.3 최대 콘텐츠풀 페인트(LCP)
__12.3.1 정의
__12.3.2 의미
__12.3.3 예제
__12.3.4 기준 점수
__12.3.5 개선 방안
12.4 최초 입력 지연(FID)
__12.4.1 정의
__12.4.2 의미
__12.4.3 예제
__12.4.4 기준 점수
__12.4.5 개선 방안
12.5 누적 레이아웃 이동(CLS)
__12.5.1 정의
__12.5.2 의미
__12.5.3 예제
__12.5.4 기준 점수
__12.5.5 개선 방안
__12.5.6 핵심 웹 지표는 아니지만 성능 확인에 중요한 지표들
12.6 정리
▣ 13장: 웹페이지의 성능을 측정하는 다양한 방법
13.1 애플리케이션에서 확인하기
__13.1.1 create-react-app
__13.1.2 create-next-app
13.2 구글 라이트하우스
__13.2.1 구글 라이트하우스 - 탐색 모드
__13.2.2 구글 라이트하우스 - 기간 모드
__13.2.3 구글 라이트하우스 - 스냅샷
13.3 WebPageTest
__13.3.1 Performance Summary
__13.3.2 Opportunities & Experiments
__13.3.3 Filmstrip
__13.3.4 Details
__13.3.5 Web Vitals
__13.3.6 Optimizations
__13.3.7 Content
__13.3.8 Domains
__13.3.9 Console Log
__13.3.10 Detected Technologies
__13.3.11 Main-thread Processing
__13.3.12 Lighthouse Report
__13.3.13 기타
13.4 크롬 개발자 도구
__13.4.1 성능 통계
__13.4.2 성능
13.5 정리
▣ 14장: 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈
14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)
__14.1.1 dangerouslySetInnerHTML prop
__14.1.2 useRef를 활용한 직접 삽입
__14.1.3 리액트에서 XSS 문제를 피하는 방법
14.2 getServerSideProps와 서버 컴포넌트를 주의하자
14.3 〈a〉 태그의 값에 적절한 제한을 둬야 한다
14.4 HTTP 보안 헤더 설정하기
__14.4.1 Strict-Transport-Security
__14.4.2 X-XSS-Protection
__14.4.3 X-Frame-Options
__14.4.4 Permissions-Policy
__14.4.5 X-Content-Type-Options
__14.4.6 Referrer-Policy
__14.4.7 Content-Security-Policy
__14.4.8 보안 헤더 설정하기
__14.4.9 보안 헤더 확인하기
14.5 취약점이 있는 패키지의 사용을 피하자
14.6 OWASP Top 10
14.7 정리
▣ 15장: 마치며
15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항
__15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자
__15.1.2 인터넷 익스플로러 11 지원을 목표한다면 각별히 더 주의를 기한다
__15.1.3 서버 사이드 렌더링 애플리케이션을 우선적으로 고려한다
__15.1.4 상태 관리 라이브러리는 꼭 필요할 때만 사용한다
__15.1.5 리액트 의존성 라이브러리 설치를 조심한다
15.2 언젠가 사라질 수도 있는 리액트
__15.2.1 리액트는 그래서 정말 완벽한 라이브러리인가?
__15.2.2 오픈소스 생태계의 명과 암
__15.2.3 제이쿼리, AngularJS, 리액트, 그리고 다음은 무엇인가?
__15.2.4 웹 개발자로서 가져야 할 유연한 자세
출판사 서평
★ 이 책에서 다루는 내용 ★
◎ 리액트의 역사
◎ 리액트를 구성하는 기본 개념 - JSX, 함수형/클래스형 컴포넌트부터 메모이제이션까지
◎ 리액트의 서버 사이드 렌더링과 서버 컴포넌트
◎ 리액트 생태계의 상태 관리 라이브러리
◎ 리액트 애플리케이션 디버깅
◎ 리액트 17, 18의 변경사항
◎ Next.js 12와 13
◎ 리액트 기반 웹사이트 성능 분석과 보안 이슈
기본정보
ISBN | 9791158394646 | ||
---|---|---|---|
발행(출시)일자 | 2023년 11월 07일 | ||
쪽수 | 952쪽 | ||
크기 |
188 * 240
* 46
mm
/ 1936 g
|
||
총권수 | 1권 | ||
시리즈명 |
위키북스 프로그래밍 & 프랙티스 시리즈
|
Klover
구매 후 리뷰 작성 시, e교환권 200원 적립
문장수집 (1)
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
판매가 5,000원 미만 상품의 경우 리워드 지급 대상에서 제외됩니다. (2024년 9월 30일부터 적용)
구매 후 리뷰 작성 시, e교환권 100원 적립
-
반품/교환방법
* 오픈마켓, 해외배송 주문, 기프트 주문시 [1:1 상담>반품/교환/환불] 또는 고객센터 (1544-1900) -
반품/교환가능 기간
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내 -
반품/교환비용
-
반품/교환 불가 사유
(단지 확인을 위한 포장 훼손은 제외)
2) 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
예) 화장품, 식품, 가전제품(악세서리 포함) 등
3) 복제가 가능한 상품 등의 포장을 훼손한 경우
예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
4) 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
5) 디지털 컨텐츠인 ebook, 오디오북 등을 1회이상 ‘다운로드’를 받았거나 '바로보기'로 열람한 경우
6) 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
7) 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우
8) 세트상품 일부만 반품 불가 (필요시 세트상품 반품 후 낱권 재구매)
9) 기타 반품 불가 품목 - 잡지, 테이프, 대학입시자료, 사진집, 방통대 교재, 교과서, 만화, 미디어전품목, 악보집, 정부간행물, 지도, 각종 수험서, 적성검사자료, 성경, 사전, 법령집, 지류, 필기구류, 시즌상품, 개봉한 상품 등 -
상품 품절
-
소비자 피해보상 환불 지연에 따른 배상
2) 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함
상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)
기분 좋은 발견
이 분야의 베스트
이 분야의 신간
-
LUVIT♥ 새로운 웹 개발의 시작 스벨트10% 28,800 원
-
스프링 프레임워크 첫걸음10% 27,000 원
-
대규모 리액트 웹 앱 개발10% 25,200 원
-
Vue 3와 스프링 부트로 시작하는 웹 개발 철저 입문10% 34,200 원
-
OpenAI, 구글 Gemini, 업스테이지 Solar API를 활용한 실전 LLM 앱 개발10% 31,500 원
안그럼 후회합니다. 이책은 기본적으로 래액트 코드를 작성할 수 있는 사람을 위해 깊게 원리를 파고 들어가는 책이라. 어떻게 처음 프로젝트를 작성해야 하는지에 대한 설명이 별로 없네요.
기초부터 알려주지 않고 이미 리액트로 개발을 해봤던 사람이 본다는 걸 가정으로 하고 쓴 책이네요. 비추합니다. 돈 버렸네요. 상품정보 수정하세요;;
그러던 중 모던 리액트 Deep Dive가 발행되었다는걸 알게되었는데, 제가 리액트를 사용하면서 궁금했던 점들을 전부 담고 있어서 바로 구매하게 됬습니다ㅎㅎ
이 책 덕분에 단순히 리액트로 동작하기만 하게 개발하는게 아니라 이해해서 오류 없이 최적화하여 개발할 수 있을거 같습니다.
다만 광범위하고 자세한 내용을 다루기 때문에 책이 두껍습니다! 책 두깨를 비교하기 위해 모던 자바스크립트 책과 함께 찍은 사진도 같이 올립니다.