장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
리액트를 다루는 기술
미리보기

리액트를 다루는 기술 입문부터 대규모 애플리케이션까지 한 권으로!

  • 김민준
  • |
  • 길벗
  • |
  • 2018-08-01 출간
  • |
  • 688페이지
  • |
  • 183 X 235 X 27 mm
  • |
  • ISBN 9791160505238
판매가

36,000원

즉시할인가

32,400 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
32,400원

이 상품은 품절된 상품입니다

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평




리액트, 현장 밀착 입문서는 따로 있다!

자바스크립트의 기본 기능과 문법을 숙지한다
리액트의 기본기를 익히려면 자바스크립트는 필수! 잘 모르는 자바스크립트 문법이 나오면 반드시 체크하자. 리액트 개발에 필요한 ES6 문법은 적재적소에 배치했다. ES6가 처음이어도 리액트를 경험할 수 있다.

원리를 알면 더 효율적으로 사용할 수 있다
동작 원리를 이해하면 리액트를 왜 사용해야 하는지, 어떻게 사용하면 좋은지 큰 그림을 그릴 수 있다. 작은 프로젝트를 해보면서 리액트를 통해 개발자 경험을 향상시키는 방법을 배우자.

웹 애플리케이션에 리액트를 적용해본다.
리액트를 적용해보면서 실전 감각을 익힌다. UI 업데이트 과정을 간결하게, 복잡한 애플리케이션 개발도 컴포넌트 기반으로 쉽게, 자바스크립트 개발을 손쉽게.

이 책의 내용
1부 리액트 특징과 동작 원리 이해하기
JSX, 컴포넌트, 이벤트 핸들링 | ref: DOM에 이름 달기 | map을 통한 컴포넌트 반복 | 컴포넌트의 라이프사이클 메서드 | 함수형 컴포넌트 | 컴포넌트 스타일링

2부 리액트 효율적으로 활용하기
일정 관리 애플리케이션 개발 | 컴포넌트 리렌더링 최적화 | 리덕스를 통한 리액트 애플리케이션 상태 관리 | 리덕스 미들웨어와 외부 데이터 연동 | react-router를 사용하여 SPA 개발 | 코드 스플리팅 | 백엔드 프로그래밍: Node.js의 Koa 프레임워크 | mongoose를 통한 MongoDB 연동 실습

3부 대규모 애플리케이션 구축하기
블로그 시스템 개발: 기본 구조 잡기, 라우터/리덕스 설정하기, 사용자 인터페이스 개발 | 프로젝트에서 API 연동하기: 포스트 작성, 수정, 삭제하기, 관리자 로그인 인증 | 코드 스플리팅과 서버사이드 렌더링 적용


목차


1 장 리액트 시작
__1.1 왜 리액트인가?
____1.1.1 리액트 이해
__1.2 리액트 특징
____1.2.1 Virtual DOM
____1.2.2 기타 특징
__1.3 작업 환경설정
____1.3.1 Node.js와 npm
____1.3.2 yarn
____1.3.3 에디터 설치
____1.3.4 Git 설치
____1.3.5 create-react-app으로 프로젝트 생성

2장 JSX
__2.1 코드 이해
__2.2 JSX란?
__2.3 JSX 장점
____2.3.1 보기 쉽고 익숙하다
____2.3.2 오류 검사
____2.3.3 더욱 높은 활용도
__2.4 JSX 문법
____2.4.1 감싸인 요소
____2.4.2 자바스크립트 표현
____2.4.3 if 문 대신 조건부 연산자
____2.4.4 &&를 사용한 조건부 렌더링
____2.4.5 인라인 스타일링
____2.4.6 class 대신 className
____2.4.7 꼭 닫아야 하는 태그
____2.4.8 주석
__2.5 정리

3장 컴포넌트
__3.1 첫 컴포넌트 생성
____3.1.1 src 디렉터리 내부에 MyComponent.js 파일 생성
____3.1.2 컴포넌트 초기 코드 작성
____3.1.3 모듈 내보내기 및 불러오기
__3.2 props
____3.2.1 JSX 내부에서 props 렌더링
____3.2.2 컴포넌트 사용할 때 props 값 설정
____3.2.3 props 기본 값 설정: defaultProps
____3.2.4 props 검증: propTypes
__3.3 state
____3.3.1 컴포넌트의 생성자 메서드: constructor()
____3.3.2 state 초깃값 설정
____3.3.3 JSX 내부에서 state 렌더링
____3.3.4 state 값 업데이트: setState()
____3.3.5 state를 constructor에서 꺼내기
____3.3.6 state 값을 업데이트할 때 주의 사항
__3.4 정리

4장 이벤트 핸들링
__4.1 리액트의 이벤트 시스템
____4.1.1 이벤트를 사용할 때 주의 사항
____4.1.2 이벤트 종류
__4.2 예제로 이벤트 핸들링 익히기
____4.2.1 컴포넌트 생성 및 불러오기
____4.2.2 onChange 이벤트 핸들링
____4.2.3 임의 메서드 만들기
____4.2.4 input 여러 개를 핸들링
____4.2.5 onKeyPress 이벤트 핸들링
__4.3 정리

5장 ref: DOM에 이름 달기
__5.1 ref는 어떤 상황에서 사용해야 할까?
____5.1.1 예제 컴포넌트 생성
____5.1.2 App 컴포넌트에서 예제 컴포넌트 렌더링
____5.1.3 DOM을 꼭 사용해야 하는 상황
__5.2 ref 사용
____5.2.1 사용법
____5.2.2 적용
__5.3 컴포넌트에 ref 달기
____5.3.1 사용법
____5.3.2 컴포넌트 초기 설정
____5.3.3 컴포넌트에 메서드 생성
____5.3.4 컴포넌트에 ref 달고 내부 메서드 사용
__5.4 정리

6장 컴포넌트 반복
__6.1 자바스크립트 배열의 map() 함수
____6.1.1 문법
____6.1.2 예제
__6.2 데이터 배열을 컴포넌트 배열로 map하기
____6.2.1 예제 컴포넌트 생성
____6.2.2 App 컴포넌트에서 예제 컴포넌트 렌더링
__6.3 key
____6.3.1 key 설정
__6.4 응용
____6.4.1 state에 초기 데이터 담기
__6.4.2 데이터 추가 기능 구현
____6.4.3 데이터 제거 기능 구현
__6.5 정리

7장 컴포넌트의 라이프사이클 메서드
__7.1 이해
__7.2 살펴보기
____7.2.1 render() 함수
____7.2.2 constructor 메서드
____7.2.3 getDerivedStateFromProps 메서드
____7.2.4 componentDidMount 메서드
____7.2.5 shouldComponentUpdate 메서드
____7.2.6 getSnapshotBeforeUpdate 메서드
____7.2.7 componentDidUpdate 메서드
____7.2.8 componentWillUnmount 메서드
__7.3 사용
____7.3.1 예제 컴포넌트 생성
____7.3.2 App 컴포넌트에서 예제 컴포넌트 사용
__7.4 정리

8장 함수형 컴포넌트
__8.1 함수형 컴포넌트 사용법
__8.2 언제 함수형 컴포넌트를 사용해야 할까?

9장 컴포넌트 스타일링
__9.1 CSS Module
____9.1.1 CSS Module 활성화
____9.1.2 CSS Module 사용
__9.2 Sass
____9.2.1 프로젝트에 Sass 적용
____9.2.2 Sass 사용
____9.2.3 변수와 믹스인을 전역적으로 사용
____9.2.4 Sass 라이브러리
____9.2.5 버튼 생성
__9.3 styled-components
__9.4 정리

10장 일정 관리 웹 애플리케이션 생성
__10.1 프로젝트 준비
____10.1.1 create-react-app을 이용한 프로젝트 생성
____10.1.2 CSS Module 및 Sass 적용
__10.2 UI 디자인 및 구성
____10.2.1 컴포넌트 계획
____10.2.2 PageTemplate 컴포넌트 생성
____10.2.3 TodoInput 컴포넌트 생성
____10.2.4 TodoItem 컴포넌트 생성
____10.2.5 TodoList 컴포넌트 생성
__10.3 상태 관리
____10.3.1 텍스트 입력 관련 상태 관리
____10.3.2 초기 일정 데이터 정의 및 렌더링
____10.3.3 데이터 추가
____10.3.4 데이터 수정
____10.3.5 데이터 제거
__10.4 정리

11장 컴포넌트 리렌더링 최적화
__11.1 문제점 찾기
____11.1.1 리액트 개발자 도구의 Highlight Updates
____11.1.2 데이터 준비
____11.1.3 크롬 개발자 도구 [Performance] 탭 사용
__11.2 최적화 진행
____11.2.1 TodoList 컴포넌트 최적화
____11.2.2 TodoItem 컴포넌트 최적화
__11.3 정리

12장 리덕스 개념 이해
__12.1 소개
__12.2 리덕스 사용
____12.2.1 JSBin 준비
____12.2.2 액션과 액션 생성 함수
____12.2.3 변화를 일으키는 함수, 리듀서
____12.2.4 리덕스 스토어 생성
____12.2.5 구독
____12.2.6 dispatch로 액션 전달
__12.3 리덕스의 세 가지 규칙
____12.3.1 스토어는 단 한 개
____12.3.2 state는 읽기 전용
____12.3.3 변화는 순수 함수로 구성
__12.4 정리

13장 리덕스로 리액트 애플리케이션 상태 관리
__13.1 카운터 생성
____13.1.1 작업 환경설정
____13.1.2 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트
____13.1.3 기본적인 틀 생성
____13.1.4 Counter 컴포넌트 생성
____13.1.5 액션 생성
____13.1.6 리듀서 생성
____13.1.7 스토어 생성
____13.1.8 Provider 컴포넌트로 리액트 앱에 store 연동
____13.1.9 CounterContainer 컴포넌트 생성
____13.1.10 서브 리듀서 생성
__13.2 멀티 카운터 생성
____13.2.1 리덕스 개발자 도구 사용
____13.2.2 Actions 수정
____13.2.3 Reducers 수정
____13.2.4 프리젠테이셔널 컴포넌트 생성
____13.2.5 컨테이너 컴포넌트
__13.3 정리

14장 리덕스, 더 편하게 사용
__14.1 Immutable.js 익히기
____14.1.1 객체 불변성
____14.1.2 Map
____14.1.3 List
__14.2 Ducks 파일 구조
____14.2.1 예시
____14.2.2 규칙
__14.3 redux-actions를 이용한 더 쉬운 액션 관리
____14.3.1 createAction을 이용한 액션 생성 자동화
____14.3.2 switch 문 대신 handleActions 사용
__14.4 일정 관리 애플리케이션에 리덕스 적용
____14.4.1 준비
____14.4.2 모듈 생성
____14.4.3 스토어 생성 및 설정
____14.4.4 컨테이너 컴포넌트 생성
____14.4.5 프로젝트 마무리
__14.5 정리

15장 리덕스 미들웨어와 외부 데이터 연동
__15.1 미들웨어 이해
____15.1.1 미들웨어란?
____15.1.2 미들웨어 생성
__15.2 비동기 작업을 처리하는 미들웨어 사용
____15.2.1 redux-thunk
____15.2.2 웹 요청 처리
____15.2.3 redux-promise-middleware
____15.2.4 redux-pender
__15.3 정리

16장 react-router로 SPA 개발
__16.1 SPA란?
__16.2 프로젝트 구성
____16.2.1 프로젝트 생성 및 라이브러리 설치
____16.2.2 프로젝트 초기화 및 구조 설정
____16.2.3 NODE_PATH 설정
____16.2.4 컴포넌트 준비
__16.3 Route와 파라미터
____16.3.1 기본 라우트 준비
__16.3.2 라우트 설정
____16.3.3 라우트 파라미터와 쿼리 읽기
__16.4 라우트 이동
____16.4.1 Link 컴포넌트
____16.4.2 NavLink 컴포넌트
____16.4.3 자바스크립트에서 라우팅
__16.5 라우트 안의 라우트
__16.6 라우트로 사용된 컴포넌트가 전달받는 props
____16.6.1 location
____16.6.2 match
____16.6.3 history
__16.7 withRouter로 기타 컴포넌트에서 라우터 접근
__16.8 정리

17장 코드 스플리팅
__17.1 코드 스플리팅의 기본
____17.1.1 webpack 설정 밖으로 꺼내기
____17.1.2 vendor 설정
__17.2 비동기적 코드 불러오기: 청크 생성
__17.3 라우트에 코드 스플리팅
____17.3.1 asyncComponent 함수 생성
____17.3.2 라우트 코드 스플리팅용 인덱스 생성
____17.3.3 프로덕션용 webpack 설정
____17.3.4 프로덕션 빌드 생성
__17.4 정리

18장 백엔드 프로그래밍: Node.js의 Koa 프레임워크
__18.1 소개
____18.1.1 백엔드
____18.1.2 Node.js
____18.1.3 Koa
__18.2 프로젝트 생성
____18.2.1 작업 환경 준비
____18.2.2 프로젝트 생성
____18.2.3 ESLint 설정
____18.3 Koa 기본 사용법
____18.3.1 hello world 띄우기
____18.3.2 미들웨어
__18.4 Nodemon 사용
__18.5 koa-router 사용
____18.5.1 기본 사용법
____18.5.2 라우트 파라미터와 쿼리
____18.5.3 REST API
____18.5.4 라우트 모듈화
____18.5.5 posts 라우트 생성
__18.6 정리

19장 mongoose를 이용한 MongoDB 연동 실습
__19.1 소개
____19.1.1 문서란?
____19.1.2 MongoDB 구조
____19.1.3 스키마 디자인
__19.2 MongoDB 서버 준비
____19.2.1 설치
____19.2.2 MongoDB 작동 확인
__19.3 mongoose 설치 및 적용
____19.3.1 .env 환경변수 파일 생성
____19.3.2 mongoose로 데이터베이스에 연결
__19.4 데이터베이스의 스키마와 모델
____19.4.1 스키마 생성
____19.4.2 모델 생성
__19.5 MongoDB 클라이언트 설치
____19.5.1 Robo 3T 설치
____19.5.2 사용
__19.6 데이터 생성과 조회
____19.6.1 NODE_PATH와 jsconfig.json
____19.6.2 데이터 생성
____19.6.3 데이터 조회
____19.6.4 특정 포스트 조회
__19.7 데이터 삭제와 수정
____19.7.1 데이터 삭제
____19.7.2 데이터 수정
__19.8 요청 검증
____19.8.1 ObjectId 검증
____19.8.2 Request Body 검증
__19.9 페이지네이션 구현
____19.9.1 가짜 데이터 생성해 내기
____19.9.2 포스트를 역순으로 불러오기
____19.9.3 보이는 개수 제한
____19.9.4 페이지 기능 구현
____19.9.5 마지막 페이지 번호 알려 주기
____19.9.6 내용 길이 제한
__19.10 정리

20장 블로그 프로젝트
__20.1 프로젝트 구조 잡기
____20.1.1 프로젝트 생성
____20.1.2 주요 디렉터리 생성
____20.1.3 불필요한 파일 제거
____20.1.4 Sass 및 CSS 모듈 적용
____20.1.5 라우터와 리덕스 적용
__20.2 기본 유저 인터페이스 생성
____20.2.1 PageTemplate, Header, Footer 컴포넌트 생성
____20.2.2 글로벌 스타일 및 스타일 유틸 설정
____20.2.3 Header 컴포넌트 생성
____20.2.4 Footer 컴포넌트 생성
____20.2.5 PageTemplate 중간 영역 설정
____20.2.6 버튼 생성
__20.3 PostList 페이지 UI 구현
____20.3.1 ListWrapper 컴포넌트
____20.3.2 PostList 컴포넌트 생성
____20.3.3 Pagination 컴포넌트 생성
__20.4 Post 페이지 UI 구현
____20.4.1 PostInfo 컴포넌트
____20.4.2 PostBody 컴포넌트
__20.5 Editor 페이지 UI 구현
____20.5.1 EditorTemplate 컴포넌트
____20.5.2 EditorHeader 컴포넌트
____20.5.3 EditorPane 컴포넌트 생성
____20.5.4 PreviewPane 컴포넌트
__20.6 마크다운 에디터 구현
____20.6.1 CodeMirror 적용
____20.6.2 에디터 상태 관리
____20.6.3 마크다운 변환
____20.6.4 Prismjs를 사용하여 코드에 색상 입히기
____20.6.5 마크다운 스타일링
__20.7 정리

21장 프로젝트에서 API 연동
__21.1 포스트 작성
____21.1.1 프록시 설정
____21.1.2 axios 설치
____21.1.3 글 작성 API 함수 생성
____21.1.4 editor 모듈에 WRITE_POST 액션 생성
____21.1.5 EditorHeaderContainer 컴포넌트 생성
__21.2 포스트 보여 주기
____21.2.1 포스트 읽기 API 함수 생성
____21.2.2 post 모듈 생성
____21.2.3 Post 컴포넌트 생성
____21.2.4 PostInfo와 PostBody에서 올바른 데이터 보여 주기
__21.3 포스트 목록 보여 주기
____21.3.1 포스트 리스트 API 함수 생성
____21.3.2 list 모듈 생성
____21.3.3 ListContainer 컴포넌트 생성
____21.3.4 PostList 컴포넌트 데이터 렌더링
____21.3.5 페이지네이션 기능 구현
____21.3.6 API에서 tag 분류
__21.4 포스트 수정 및 삭제
____21.4.1 헤더에 버튼 보여 주기
____21.4.2 수정 기능 구현
____21.4.3 삭제 기능 구현
__21.5 관리자 로그인 인증 구현
____21.5.1 서버에 세션 적용
____21.5.2 비밀번호 인증 API 생성
____21.5.3 api 라우트에 auth 적용
____21.5.4 인증이 필요한 API 보호
____21.5.5 로그인 모달 생성
____21.5.6 Footer에서 관리자 로그인 버튼을 누르면 로그인 모달 띄우기
____21.5.7 로그인 기능 구현
____21.5.8 FooterContainer 완성
____21.5.9 페이지 로딩할 때의 로그인 상태 확인
____21.5.10 로그인할 때만 포스트 작성·수정·삭제 버튼 보여 주기
__21.6 정리

22장 프로젝트 마무리 작업
__22.1 코드 스플리팅
____22.1.1 코드 스플리팅용 라우트 인덱스 생성
____22.1.2 프로덕션용 webpack 설정 변경
__22.2 서버사이드 렌더링
____22.2.1 클라이언트 렌더링의 문제점
____22.2.2 서버사이드 렌더링의 단점
____22.2.3 서버사이드 렌더링 준비
____22.2.4 정적 파일 제공
____22.2.5 HTML 템플릿 생성
____22.2.6 서버사이드를 렌더링할 때 데이터 불러오기
____22.2.7 리덕스 상태 HTML 안에 넣기
____22.2.8 서버사이드 렌더링 후 불필요한 API 호출 방지
____22.2.9 서버사이드 렌더링과 코드 스플리팅 충돌 해결
__22.3 404 페이지 완성
__22.4 react-helmet을 이용한 페이지 head 태그 작성
____22.4.1 설치와 적용
____22.4.2 서버사이드 렌더링에서 적용
__22.5 정리

23장 그다음은?
__23.1 리액트 관련 커뮤니티
____23.1.1 국내 커뮤니티
____23.1.2 국외 커뮤니티
__23.2 책의 연장선
__23.3 사이드 프로젝트 생성

찾아보기

저자소개

저자: 김민준

애니메이션 스트리밍 서비스를 제공하는 라프텔(laftel.net)에서 프런트엔드 엔지니어로 일하고 있고, 패스트캠퍼스의 리액트로 구현하는 웹 애플리케이션 제작 캠프에서 강의를 하고 있다. 리액트의 빅 팬이고, velopert.com 블로그를 운영하고 있으며, 유튜브에서 매일 밤 라이브 코딩(velopert의 코딩 이야기)을 하고 있다.   

도서소개


 

추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 : 070-4821-5101
교환/반품주소
  • 부산광역시 부산진구 중앙대로 856 303호 / (주)스터디채널 / 전화 : 070-4821-5101
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.