품목정보
발행일 | 2018년 08월 01일 |
---|---|
쪽수, 무게, 크기 | 688쪽 | 183*235mm |
ISBN13 | 9791160505238 |
ISBN10 | 1160505233 |
발행일 | 2018년 08월 01일 |
---|---|
쪽수, 무게, 크기 | 688쪽 | 183*235mm |
ISBN13 | 9791160505238 |
ISBN10 | 1160505233 |
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 NODEPATH 설정 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 NODEPATH와 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 모듈에 WRITEPOST 액션 생성 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 사이드 프로젝트 생성 찾아보기 |
이 책을 읽기전에 제가 잘못한 점
- 프론트 엔드가 처음이라면, 더 쉬운 책을 골랐어야 했습니다.
- 자바스크립트 문법 10%도 모른다면, 후반부에 꽤 어려울 수 있습니다.
이 책의 좋은점
- 리액트에 대한 쿡북으로써 한번 다 해볼 수 있습니다.
- 깃허브에 책에 대한 모든 소스코드가 있으며, 업데이트도 잘 되어 있습니다.
- 책의 카피라이트인 "실무에서 알아야 할 기술에 대한 기술" 부분이 많이 있습니다.
이 책의 나쁜점
- redux, async, currying 등 후반부에 갈 수록 난이도가 급격히 올라가는 경향이 있습니다.
시기상 안좋은 점
- 책 출시 후 얼마 있지 않아 create-react-app v2 가 나오면서 따로 블로그로 찾아가야 합니다.
총평
- 여러번 읽으면 도움 될 만한 책
온라인 상에서 너무나 유명한 벨로퍼트님이기 때문에, 인프런 강좌와 병행하면서 쭈욱 실습하면서 학습을 진행했습니다.
너무나 자세한 설명 JSX 문법과 Javascript es6의 필요한 부분도 중간중간 삽입이 되어서 굉장히 좋았습니다.
아쉬웠던 점은, 뒤쪽에 redux는 실무에서 mobx를 사용하기 때문에, 원리를 이해하고 넘기는 정도 였지만
NodeJs도 그랬지만, 뒤쪽으로 갈 수록 본질적인 원리보다는 여러 가지 챕터들의 나열이었기 때문에 끝까지 완독은 못하였습니다. 그래도 기본서로 아주 훌륭한 책입니다.