간편결제, 신용카드 청구할인
인터파크 롯데카드 5% (41,040원)
(최대할인 10만원 / 전월실적 40만원)
북피니언 롯데카드 30% (30,240원)
(최대할인 3만원 / 3만원 이상 결제)
NH쇼핑&인터파크카드 20% (34,560원)
(최대할인 4만원 / 2만원 이상 결제)
Close

모던 리액트 Deep Dive : 리액트의 핵심 개념과 동작 원리부터 Next.js까지, 리액트의 모든 것

소득공제

2013년 9월 9일 이후 누적수치입니다.

판매지수 723
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
  • 출판사 : 위키북스
  • 발행 : 2023년 11월 07일
  • 쪽수 : 952
  • ISBN : 9791158394646
정가

48,000원

  • 43,200 (10%할인)

    2,400P (5%적립)

할인혜택
적립혜택
  • S-Point 적립은 마이페이지에서 직접 구매확정하신 경우만 적립 됩니다.
추가혜택
배송정보
  • 11/29(수) 이내 발송 예정  (서울시 강남구 삼성로 512)
  • 무료배송
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(16)

  • 상품권

AD

책소개

요즘 프런트엔드 개발은 자바스크립트와 리액트부터 시작한다는 말이 있을 정도로 최근 몇 년간 프런트엔드 생태계에서 리액트의 비중은 날이 갈수록 커지고 있습니다.

이 책에서는 0.x 버전의 리액트부터 최신 버전인 18 버전에 이르기까지, 리액트를 둘러싼 다양한 내용을 다루고 있습니다. 리액트는 하나의 온전한 웹 프레임워크를 지향하지 않아 UI 외에 상태 관리나 서버 사이드 렌더링 등 웹 개발의 많은 영역에서 선택의 여지를 남겨뒀으며, 이 때문에 리액트 개발자라면 알아둬야 할 내용이 많습니다.

함수형 컴포넌트와 훅의 동작 원리, 메모이제이션의 필요성과 실제로 메모이제이션되고 있는지 확인하는 방법, 리액트의 상태 관리와 다양한 상태 관리 라이브러리의 동작 방식, 실무에서 널리 쓰이고 있는 Next.js, 그리고 리액트 애플리케이션의 성능을 분석하는 방법까지, 리액트에 관심 있는 개발자라면 이 책을 통해 리액트 앱 개발의 시작부터 끝까지 경험해 보면서 웹 서비스 개발의 즐거움을 만끽하시길 바랍니다.

출판사 서평

★ 이 책에서 다루는 내용 ★

◎ 리액트의 역사
◎ 리액트를 구성하는 기본 개념 - JSX, 함수형/클래스형 컴포넌트부터 메모이제이션까지
◎ 리액트의 서버 사이드 렌더링과 서버 컴포넌트
◎ 리액트 생태계의 상태 관리 라이브러리
◎ 리액트 애플리케이션 디버깅
◎ 리액트 17, 18의 변경사항
◎ Next.js 12와 13
◎ 리액트 기반 웹사이트 성능 분석과 보안 이슈

목차

▣ 들어가며
__왜 리액트인가?
__리액트의 역사
__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 웹 개발자로서 가져야 할 유연한 자세

관련이미지

이 상품의 시리즈

(총 18권 / 현재구매 가능도서 17권)

선택한 상품 북카트담기
펼쳐보기

인문 분야에서 많은 회원이 구매한 책

    리뷰

    0.0 (총 0건)

    100자평

    작성시 유의사항

    평점
    0/100자
    등록하기

    100자평

    0.0
    (총 0건)

    판매자정보

    • 인터파크도서에 등록된 오픈마켓 상품은 그 내용과 책임이 모두 판매자에게 있으며, 인터파크도서는 해당 상품과 내용에 대해 책임지지 않습니다.

    상호

    (주)교보문고

    대표자명

    안병현

    사업자등록번호

    102-81-11670

    연락처

    1544-1900

    전자우편주소

    callcenter@kyobobook.co.kr

    통신판매업신고번호

    01-0653

    영업소재지

    서울특별시 종로구 종로 1(종로1가,교보빌딩)

    교환/환불

    반품/교환 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청 또는 1:1 문의 게시판 및 고객센터(1577-2555)에서 신청 가능

    반품/교환가능 기간

    변심 반품의 경우 출고완료 후 6일(영업일 기준) 이내까지만 가능
    단, 상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내

    반품/교환 비용

    변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
    상품이나 서비스 자체의 하자로 인한 교환/반품은 반송료 판매자 부담

    반품/교환 불가 사유

    ·소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)

    ·소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등

    ·복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집

    ·시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우

    ·전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우

    상품 품절

    공급사(출판사) 재고 사정에 의해 품절/지연될 수 있음

    소비자 피해보상
    환불지연에 따른 배상

    ·상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨

    ·대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함

    (주)KG이니시스 결제대금예치업 등록번호: 02-006-00013

    (주)인터파크커머스는 회원님들의 안전거래를 위해 구매금액, 결제수단에 상관없이 (주)인터파크커머스를 통한
    모든 거래에 대하여 (주)KG이니시스가 제공하는 구매안전서비스를 적용하고 있습니다.
    등록 여부는 e-금융민원센터 홈페이지(www.fcsc.kr)의 등록·신고>전자금융업등록현황 메뉴에서 확인하실 수 있습니다. 서비스 가입사실 확인

    배송안내

    • 교보문고 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다.

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능합니다.

    • 배송비는 업체 배송비 정책에 따릅니다.

    • - 도서 구매 시 15,000원 이상 무료배송, 15,000원 미만 2,500원 - 상품별 배송비가 있는 경우, 상품별 배송비 정책 적용