본문 바로가기

리디북스 접속이 원활하지 않습니다. 새로 고침(F5)해주세요.
계속해서 문제가 발생한다면 리디북스 접속 테스트를 통해 원인을 파악하고 대응 방법을 안내드리겠습니다.
테스트 페이지로 이동하기

RIDIBOOKS

리디북스 검색

최근 검색어

'검색어 저장 끄기'로 설정되어 있습니다.


리디북스 카테고리



리액트를 다루는 기술 상세페이지

컴퓨터/IT 개발/프로그래밍

리액트를 다루는 기술

구매종이책 정가36,000
전자책 정가25,200(30%)
판매가25,200
리액트를 다루는 기술

책 소개

<리액트를 다루는 기술> 리액트, 어떻게 활용하느냐가 중요하다!
기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!

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

또한, 프로젝트 생성부터 코드를 작성 및 개선하고, 배포하기까지 실무에 바로 응용할 수 있도록 예제를 준비했다. 일정 관리 애플리케이션을 만들면서 리액트의 기본기를 다지고, 프로젝트를 진행하면서 컴포넌트 스타일링, 상태 관리, API 연동, 라우팅, 코드 스플리팅, 서버사이드 렌더링 등 리액트를 활용한 다양한 기술을 사용해보자. 마지막으로 마크다운 기반의 블로그 시스템을 만들며 배운 지식을 종합적으로 활용해보자.


출판사 서평

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

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

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

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

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

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

이 책의 목표는 단순히 리액트를 다루는 기술을 습득하는 것을 떠나서 더욱 즐겁고 편하게 웹을 개발할 수 있는 것이다. 그리고 웹 개발에 필요한 주요 지식을 다루어 여러분이 만들고 싶은 프로젝트를 실제로 직접 만들 수 있는 경험치를 충분히 쌓아 주는 것이다. 책은 리액트의 기초와 심화 과정을 다루고, 또 Node.js를 이용하여 백엔드를 개발하는 방법도 다룬다. 마지막에는 블로그 프로젝트를 진행하는데, 이것으로 웹 프로젝트의 전체적인 개발 흐름을 터득할 수 있을 것이다.



저자 소개

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

목차

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 사이드 프로젝트 생성

찾아보기


리뷰

구매자 별점

5.0

점수비율

  • 5
  • 4
  • 3
  • 2
  • 1

2명이 평가함

리뷰 작성 영역

이 책을 평가해주세요!

내가 남긴 별점 0.0

별로예요

그저 그래요

보통이에요

좋아요

최고예요

별점 취소

구매자 표시 기준은 무엇인가요?

‘구매자’ 표시는 유료 도서를 결제하고 다운로드하신 경우에만 표시됩니다.

무료 도서 (프로모션 등으로 무료로 전환된 도서 포함)
'구매자'로 표시되지 않습니다.
시리즈 도서 내 무료 도서
'구매자’로 표시되지 않습니다. 하지만 같은 시리즈의 유료 도서를 결제한 뒤 리뷰를 수정하거나 재등록하면 '구매자'로 표시됩니다.
영구 삭제
도서를 영구 삭제해도 ‘구매자’ 표시는 남아있습니다.
결제 취소
‘구매자’ 표시가 자동으로 사라집니다.

이 책과 함께 구매한 책


이 책과 함께 둘러본 책



본문 끝 최상단으로 돌아가기


spinner
모바일 버전