본문 바로가기

추천 검색어

실시간 인기 검색어

따라하며 쉽게 배우는 모던 리액트 완벽 입문

컴포넌트 기초부터 Next.js를 이용한 앱 개발까지
위키북스 오픈소스 & 웹 시리즈 117
위키북스 · 2024년 10월 15일
0.0
10점 중 0점
(0개의 리뷰)
평가된 감성태그가
없습니다
  • 모던 리액트 완벽 입문 대표 이미지
    모던 리액트 완벽 입문 대표 이미지
  • 모던 리액트 완벽 입문 부가 이미지1
    모던 리액트 완벽 입문 부가 이미지1
  • 모던 리액트 완벽 입문 부가 이미지2
    모던 리액트 완벽 입문 부가 이미지2
  • A4
    사이즈 비교
    210x297
    모던 리액트 완벽 입문 사이즈 비교 187x239
    단위 : mm
01 / 04
무료배송 소득공제
10% 32,400 36,000
적립/혜택
1,800P

기본적립

5% 적립 1,800P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,800P
  • 리뷰 작성 시, 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 안내

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

모던 자바스크립트, 타입스크립트, Next.js로 만드는 본격적인 앱 개발을 위한 종합 안내서!
이 책은 리액트를 처음 배우는 사람들을 위한 입문서로, 자바스크립트 기본 지식을 가진 독자를 대상으로 한다. 도입편, 기본편, 응용편의 3부로 구성되어 있으며, 리액트의 기초부터 심화 내용까지 단계별로 학습할 수 있다.

도입편에서는 자바스크립트 개요와 프론트엔드 개발 역사, 리액트의 특징을 다루고, 기본편에서는 폼 개발, 스타일 정의, 내장 컴포넌트, 훅 등 리액트의 핵심 개념을 깊이 있게 학습한다. 특히 현대적 리액트 개발에 필수적인 훅에 대해 중점적으로 다룬다.

응용편에서는 라우팅, 테스트, 타입스크립트를 이용한 리액트 개발 방법을 배우고, 마지막으로 Next.js를 사용한 실제 앱 개발을 통해 이전에 학습한 내용을 종합적으로 적용해볼 수 있다. 이를 통해 독자들은 리액트의 기본 개념부터 실제 앱 개발까지 전반적인 과정을 경험할 수 있다.

작가정보

저자(글) 야마다 요시히로

치바현 카마가야시에 거주하는 프리랜서 작가이며, Visual Studio and Development Technologies 분야 Microsoft MVP이다. 집필 커뮤니티 'WINGS 프로젝트'의 대표이며 《Vue.js 3 실전 입문》 《Angular 애플리케이션 프로그래밍》 등을 저술했다.
- 저자 웹사이트: https://wings.msn.to/

번역 트랜스메이트

다양한 IT 기술과 주제에 관심 있는 사람들이 함께하는 번역가 모임이다. 시시각각 변화하는 IT 분야에 발맞춰 정확하게 이해하고 편안하게 읽을 수 있는 기술서로 거듭날 수 있게 노력하고 있다.

목차

  • ▣ 01장: 소개
    1.1 리액트와 자바스크립트
    __1-1-1 자바스크립트의 역사
    __1-1-2 jQuery에서 차세대 라이브러리로
    __1-1-3 주요 자바스크립트 프레임워크
    __1-1-4 리액트의 특징
    1.2 리액트 앱을 개발/실행하기 위한 기본 환경
    __1-2-1 Create React App이란?
    __1-2-2 Node.js 설치하기
    __1-2-3 비주얼 스튜디오 코드(VSCode) 설치
    1.3 모던 자바스크립트의 기본
    __1-3-1 변수 선언
    __1-3-2 주요 리터럴 표현
    __1-3-3 구조 분해 할당
    __1-3-4 매개변수 기본값, 가변 인자 함수
    __1-3-5 옵셔널 체이닝 연산자(?.)
    __1-3-6 모듈

    ▣ 02장: 리액트의 기본
    2.1 처음 시작하는 리액트
    __2-1-1 리액트 앱 만들기
    __2-1-2 부록: Npm Scripts
    2.2 샘플 앱 확인하기
    __2-2-1 메인 페이지 준비 - index.html
    __2-2-2 앱 실행을 위한 진입점 - index.js
    __2-2-3 보충: Strict 모드
    __2-2-4 페이지를 구성하는 UI 구성 요소 - App.js
    __2-2-5 보충: 앱 리렌더링
    __2-2-6 함수 컴포넌트와 클래스 컴포넌트
    2.3 JSX의 기본
    __2-3-1 JSX의 규칙
    __2-3-2 JSX에 자바스크립트 표현식 삽입하기 - {...} 구문
    __2-3-3 {...} 구문으로 속성 값 설정하기
    __2-3-4 스타일시트 설정하기 - style 속성
    __2-3-5 JSX 식의 실체 이해하기

    ▣ 03장: 컴포넌트 개발 (기본)
    3.1 컴포넌트를 뒷받침하는 기본 개념 - Props와 State
    __3-1-1 Props/State란?
    __3-1-2 Props의 기본
    __3-1-3 이벤트 처리의 기본
    __3-1-4 State의 기본
    __3-1-5 React Developer Tools 소개
    3.2 조건 분기 및 반복 처리
    __3-2-1 배열 나열하기 - 반복 처리
    __3-2-2 식의 진위 여부에 따라 표시 전환 - 조건부 분기
    __3-2-3 보충: 스타일 선택적으로 적용하기
    3.3 Props/State에 대한 이해도 높이기
    __3-3-1 컴포넌트의 하위 콘텐츠를 템플릿에 반영하기
    __3-3-2 여러 children 넘겨주기
    __3-3-3 children에 대한 매개변수 전달하기
    __3-3-4 프로퍼티 타입 검증(PropTypes)
    __3-3-5 State 값 업데이트를 위한 두 가지 구문
    __3-3-6 자식 컴포넌트에서 부모 컴포넌트로의 정보 전달
    3.4 고급 이벤트 처리
    __3-4-1 리액트에서 사용할 수 있는 이벤트
    __3-4-2 이벤트 객체
    __3-4-3 이벤트 전파 방지
    __3-4-4 이벤트 핸들러 옵션 설정하기

    ▣ 04장: 컴포넌트 개발 (폼)
    4.1 폼 조작의 기본
    __4-1-1 폼 관리의 기본
    __4-1-2 주의: change 이벤트 발생 타이밍
    __4-1-3 비제어 컴포넌트를 통한 폼 관리
    __4-1-4 입력 요소에 따른 폼 구현 예시
    4.2 State의 구조화된 데이터 업데이트
    __4-2-1 스프레드 구문의 의미
    __4-2-2 Immer 라이브러리를 통한 개선
    __4-2-3 배열 업데이트
    4.3 검증 기능 구현 - React Hook Form
    __4-3-1 React Hook Form의 기본
    __4-3-2 자체 검증 규칙 구현하기
    __4-3-3 폼의 상태에 따라 표시 제어하기
    __4-3-4 검증 라이브러리와 연동하기
    __4-3-5 Yup에서 자체 검증 규칙 구현하기
    __4-3-6 Yup으로 입력값 변환하기
    __4-3-7 Yup의 오류 메시지를 한국어로 번역하기

    ▣ 05장: 컴포넌트 개발 (응용)
    5.1 임베디드 컴포넌트
    __5-1-1 컴포넌트 렌더링 대기 감지 - Suspense 컴포넌트 (1)
    __5-1-2 비동기 처리 종료 기다리기 - Suspense 컴포넌트 (2)
    __5-1-3 컴포넌트 렌더링 시간 측정하기 - Profiler 컴포넌트
    5.2 컴포넌트 개발에서의 스타일 정의
    __5-2-1 JSX 식에 스타일시트 삽입하기 - Styled JSX
    __5-2-2 표준 태그를 확장하여 스타일 태그 정의하기 - Styled Components
    __5-2-3 다양한 표기법을 지원하는 CSS-in-JS 라이브러리 - Emotion
    5.3 컴포넌트에 대한 기타 주제
    __5-3-1 컴포넌트 하위의 콘텐츠를 임의의 영역에 렌더링하기 - 포털
    __5-3-2 컴포넌트에서 발생한 오류 처리하기 - Error Boundary

    ▣ 06장: 리액트 라이브러리 활용하기
    6.1 전형적인 UI 구현하기 - MUI
    __6-1-1 MUI의 주요 컴포넌트
    __6-1-2 MUI의 기본
    __6-1-3 드로워 메뉴 구현하기
    __6-1-4 페이지 내 배치를 조정하는 레이아웃 기능 활용하기 - 그리드
    __6-1-5 MUI 스타일 사용자 정의하기 - 테마
    __6-1-6 라이트/다크 모드에 따라 테마 전환하기
    __6-1-7 React Hook Form + MUI 연동하기
    6.2 컴포넌트의 외형/동작을 카탈로그로 표시하기 - Storybook
    __6-2-1 Storybook 설치
    __6-2-2 스토리 확인
    __6-2-3 [Controls] 탭의 제어
    __6-2-4 [Actions] 탭의 제어
    __6-2-5 [Interactions] 탭의 제어
    __6-2-6 스토리 표시 사용자 지정하기
    __6-2-7 Storybook에 문서 추가하기
    6.3 외부 서비스에서 데이터 가져오기 - React Query
    __6-3-1 React Query를 사용하지 않는 예시
    __6-3-2 React Query를 이용한 예제
    __6-3-3 Suspense/Error Boundary와의 연동

    ▣ 07장: 훅 활용
    7.1 컴포넌트 렌더링/파기 시 처리 수행하기 - 부작용 훅
    __7-1-1 useEffect 함수의 기초
    __7-1-2 인수 deps의 의미
    __7-1-3 예시: 부작용 훅을 이용한 타이머 준비
    __7-1-4 렌더링 시 동기적으로 처리 수행하기
    7.2 다양한 값에 대한 참조 준비하기 - useRef 함수
    __7-2-1 함수 컴포넌트에서 ‘인스턴스 변수’ 정의하기
    __7-2-2 Ref를 컴포넌트 하위 요소로 전달(포워드)하기
    __7-2-3 함수 컴포넌트 하위 메서드 참조하기
    __7-2-4 콜백 함수를 ref 속성에 전달하기 - 콜백 Ref
    7.3 상태와 처리를 한꺼번에 관리하기 - useReducer 함수
    __7-3-1 useState 훅의 문제점
    __7-3-2 useReducer 관련 키워드
    __7-3-3 useReducer 훅의 기초
    __7-3-4 Reducer를 여러 Action 타입에 대응하기
    __7-3-5 State 초깃값 생성 시 주의 사항
    7.4 여러 계층의 컴포넌트에서 값 전달하기 - useContext 함수
    __7-4-1 컨텍스트의 기본
    __7-4-2 예: 컨텍스트를 이용한 테마 전환 구현하기
    7.5 상태 관리 라이브러리 - Recoil
    __7-5-1 Recoil이란?
    __7-5-2 Recoil의 기본
    __7-5-3 Todo 목록을 Recoil 앱에 대응하기
    __7-5-4 Todo 목록 개선하기
    7.6 함수 또는 그 결과를 메모하기 - memo/useMemo/useCallback 함수
    __7-6-1 메모화를 위한 샘플
    __7-6-2 함수 결과 메모하기 - useMemo 함수
    __7-6-3 컴포넌트 리렌더링 억제하기 - memo 함수
    __7-6-4 함수 정의 자체를 캐싱하기 - useCallback 함수
    7.7 우선순위가 낮은 State 업데이트 구분하기 - useTransition 함수
    __7-7-1 여러 State에 따라 페이지를 제어하는 예시
    __7-7-2 useTransition 함수를 이용한 렌더링의 우선순위 지정
    __7-7-3 트랜지션 상태에 따라 처리 할당하기
    __7-7-4 특정 값의 ‘지연 버전’ 생성하기 - useDeferredValue 함수
    7.8 훅 자체 제작
    __7-8-1 커스텀 훅 정의
    __7-8-2 커스텀 훅 사용

    ▣ 08장: 라우팅
    8.1 리액트 라우터의 기본
    __8-1-1 라우팅 테이블 정의
    __8-1-2 보충: 라우터 동작 옵션
    __8-1-3 루트 정의를 태그 형식으로 표현하기
    8.2 라우터 지원 링크 설치
    __8-2-1 링크 설치의 기본
    __8-2-2 내비게이션 메뉴에 특화된 〈NavLink〉 요소
    __8-2-3 〈Link〉 요소에서 사용할 수 있는 주요 속성
    __8-2-4 보충: 프로그램 내 페이지 이동
    8.3 라우터를 통해 정보를 전달하는 방식
    __8-3-1 경로의 일부를 매개변수로 전달하기 – 루트 매개변수
    __8-3-2 루트 매개변수의 다양한 표현
    __8-3-3 쿼리 정보 가져오기
    __8-3-4 개별 링크에서 임의의 정보 전달하기 - state 속성
    __8-3-5 상위 루트에서 하위 루트로 값 전달하기 - Outlet Context
    __8-3-6 루트별 정보 가져오기 - handle 속성
    8.4 Route 컴포넌트 속성
    __8-4-1 루트 랜더링 시 예외 포착하기 - errorElement 속성
    __8-4-2 컴포넌트에서 사용할 데이터 준비하기 - loader 속성
    __8-4-3 루트에서 발생한 액션 처리하기 - action 속성
    __8-4-4 컴포넌트 지연 로드하기 - lazy 속성
    8.5 라우팅과 관련된 기타 기법
    __8-5-1 현재 페이지의 링크 해제하기
    __8-5-2 스크롤 위치 복원하기 - 〈ScrollRestoration〉 요소

    ▣ 09장: 테스트
    9.1 단위 테스트
    __9-1-1 Jest의 기본
    __9-1-2 컴포넌트 테스트
    __9-1-3 이벤트가 포함된 테스트
    __9-1-4 자식 컴포넌트 모의화
    __9-1-5 타이머를 이용한 테스트
    __9-1-6 비동기 통신을 수반하는 테스트
    __9-1-7 비동기 통신을 모의해보기 - msw
    __9-1-8 컨텍스트를 동반한 테스트
    9.2 E2E 테스트
    __9-2-1 E2E 테스트 준비
    __9-2-2 E2E 테스트 작성

    ▣ 10장: 타입스크립트 활용
    10.1 타입스크립트의 기본
    __10-1-1 타입 어노테이션의 기본
    __10-1-2 타입스크립트의 데이터 유형
    __10-1-3 타입스크립트 고유의 특수한 타입
    __10-1-4 여러 개의 타입을 결합한 ‘복합 타입’
    10.2 리액트 앱에 타입스크립트 도입하기
    __10-2-1 타입스크립트 템플릿 활성화
    __10-2-2 Props의 유형 정의
    __10-2-3 State/Context/Reducer의 타입 정보
    __10-2-4 fetch 데이터에 대한 타입 정의
    __10-2-5 보충: 함수 컴포넌트의 타입 정의

    ▣ 11장: Next.js 활용하기
    11.1 Next.js의 기본
    __11-1-1 Next.js란?
    __11-1-2 Next.js 앱 만들기
    11.2 App Router의 기본 이해하기
    __11-2-1 두 종류의 라우터
    __11-2-2 App Router란?
    __11-2-3 프로젝트 기본 샘플 확인
    __11-2-4 App Router의 루트 매개변수
    11.3 애플리케이션 ‘Reading Recorder’ 만들기
    __11-3-1 앱의 구조 개관하기
    __11-3-2 이용하는 서비스/라이브러리
    __11-3-3 Prisma 준비
    11.4 앱의 구현 읽어보기
    __11-4-1 루트 레이아웃(공통 메뉴)
    __11-4-2 도서 정보 표시
    __11-4-3 리뷰 정보 목록 표시
    __11-4-4 Google 도서를 통한 도서 검색
    __11-4-5 리뷰 등록 양식
    11.5 Vercel에 배포
    __11-5-1 GitHub 저장소 준비
    __11-5-2 Vercel 측의 준비
    __11-5-3 PostgreSQL 데이터베이스 준비하기
    __11-5-4 실제 환경에서 동작 확인하기

기본정보

상품정보 테이블로 ISBN, 발행(출시)일자 , 쪽수, 크기, 총권수, 시리즈명을(를) 나타낸 표입니다.
ISBN 9791158395308
발행(출시)일자 2024년 10월 15일
쪽수 720쪽
크기
187 * 239 * 36 mm / 1472 g
총권수 1권
시리즈명
위키북스 오픈소스 & 웹 시리즈

Klover

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

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

문장수집 (0)

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

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

이 책의 첫 기록을 남겨주세요.

교환/반품/품절 안내

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

소스 코드: 더 비기닝
이벤트
  • sam x 한샘 [똑똑한sam]
  • 2025 1학기 대학교재전
01 / 02
TOP