길벗·이지톡
길벗스쿨 시나공 IT 길벗 동영상강좌

검색 마이길벗

최근 검색어

자동완성기능 끄기 닫기

도서 IT전문서/IT입문서 웹

미리보기 SNS공유

리액트를 위한 현장 밀착 입문서 리액트를 다루는 기술

정 가: 36,000원

출 간: 2018-08-01

지 은 이: 김민준

I S B N: 9791160505238

분 량: 688쪽

난 이 도: 초급

부 록: 예제 소스

· YES24 · 교보문고 · 알라딘 · 인터파크

· 구글북스 · 리디북스 · 알라딘 · 아이북스(미국) · 네이버 · YES24 · 인터파크 · ONE store(티스토어) · 교보문고

기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!

리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하는지, 왜 이렇게 사용하는 것이 효과적인지를 배우자. 공식 문서에는 나오지 않는 실전 노하우와 팁을 풍부하게 담았다.

또한, 프로젝트 생성부터 코드를 작성 및 개선하고, 배포하기까지 실무에 바로 응용할 수 있도록 예제를 준비했다. 일정 관리 애플리케이션을 만들면서 리액트의 기본기를 다지고, 프로젝트를 진행하면서 컴포넌트 스타일링, 상태 관리, 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 사이드 프로젝트 생성

찾아보기

ㆍ지은이 김민준

소개

개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요하다고 여긴다. 현재 리디(주)에서 애니메이션 스트리밍 서비스 라프텔(laftel.net)의 프런트엔드 개발을 하고 있다. 그리고 개발자들의 블로그 서비스인 벨로그(velog.io)를 운영 및 개발하고 있다.