이 책은 Node.js와 리액트를 사용한 응용 프로그램 개발 과정을 설명한 해설서입니다.

Node.js와 최신 자바스크립트 사양에 대해 소개하며, 페이스북이 개발한 UI 프레임워크인 리액트에 대해 알아봅니다. 또한 프런트엔드 개발에 초점을 맞춰 일렉트론을 사용해 데스크톱 애플리케이션을 만들거나, 리액트 네이티브를 사용해 스마트폰 애플리케이션을 만드는 방법도 소개합니다. 이어서 게시판, 실시간 채팅, 위키 시스템, 개인 SNS 등의 웹 애플리케이션을 만들어 보면서 Node.js와 리액트를 제대로 활용하는 방법을 살펴봅니다. 더불어 최근 개발 환경을 구축할 때 가상 환경을 사용하는 경우가 많아짐에 따라 이 책에서는 가상 머신을 준비하고, 가상 머신 위에서 프로그램을 동작시키는 방법도 소개합니다.

이 책은 자바스크립트와 관련된 기본 지식과 Node.js와 관련된 기본 지식이 있어야 원활하게 볼 수 있습니다. 조금 고급 주제를 다루는 책이므로 어렵게 느껴질 수 있는 독자를 위해 역자가 제작한 무료 동영상 강의를 아래 사이트에서 제공하고 있습니다.

★ 유투브 무료 동영상 강의 ★

https://goo.gl/Sh7rDm

이 책은 Node.js와 리액트를 사용한 응용 프로그램 개발 과정을 설명한 해설서입니다.

Node.js와 최신 자바스크립트 사양에 대해 소개하며, 페이스북이 개발한 UI 프레임워크인 리액트에 대해 알아봅니다. 또한 프런트엔드 개발에 초점을 맞춰 일렉트론을 사용해 데스크톱 애플리케이션을 만들거나, 리액트 네이티브를 사용해 스마트폰 애플리케이션을 만드는 방법도 소개합니다. 이어서 게시판, 실시간 채팅, 위키 시스템, 개인 SNS 등의 웹 애플리케이션을 만들어 보면서 Node.js와 리액트를 제대로 활용하는 방법을 살펴봅니다. 더불어 최근 개발 환경을 구축할 때 가상 환경을 사용하는 경우가 많아짐에 따라 이 책에서는 가상 머신을 준비하고, 가상 머신 위에서 프로그램을 동작시키는 방법도 소개합니다.

이 책은 자바스크립트와 관련된 기본 지식과 Node.js와 관련된 기본 지식이 있어야 원활하게 볼 수 있습니다. 조금 고급 주제를 다루는 책이므로 어렵게 느껴질 수 있는 독자를 위해 역자가 제작한 무료 동영상 강의를 아래 사이트에서 제공하고 있습니다.

이 책은 Node.js와 리액트(React)를 설명하는 책입니다.

웹 세계는 탄생 이후 지금까지 정말 많은 변화를 겪어왔습니다. 이 중에서도 특히 정말 큰 변화를 겪고 있는 것이 바로 '오래됐으면서도 새로운 프로그래밍 언어'라고 할 수 있는 '자바스크립트'입니다. 최근 몇 년 동안 자바스크립트는 언어의 사양 변화가 이뤄져서 다양한 개발이 가능해졌습니다. 그리고 이에 따라 다양한 프레임워크와 도구가 만들어졌습니다. 그런데 변화가 너무 빨라서 많은 사람들이 다음과 같은 질문을 자주 합니다.

\"대체 자바스크립트를 제대로 하려면 뭘 해야 좋을까요?\"

이 책에서는 Node.js와 리액트라고 답을 제시합니다. Node.js는 브라우저를 넘어 서버 위에서 실행되는 자바스크립트 엔진입니다. 현재의 Node.js는 스크립트 실행 환경으로서 굉장히 확고한 위치를 구축하고 있습니다. 그리고 리액트는 페이스북이 개발한 UI 프레임워크입니다. 리액트는 UI를 컴포넌트라는 단위로 분할해서 개발 효율성과 유지 보수성이 높은 애플리케이션을 개발할 수 있게 해줍니다.

이 책의 1장에서는 일단 Node.js와 최신 자바스크립트 사양에 대해 소개합니다. 그리고 2장과 3장에서 리액트에 대해서 설명합니다. 4장에서는 프런트엔드 개발에 초점을 맞춥니다. 일렉트론을 사용해 데스크톱 애플리케이션을 만들거나, 리액트 네이티브를 사용해 스마트폰 애플리케이션을 만드는 방법을 소개합니다. 이어서 5장과 6장에서는 그럴듯한 웹 애플리케이션을 만들어보면서 Node.js와 리액트를 제대로 활용하는 방법을 알아봅니다.

이 책은 예제를 굉장히 구체적이고 간략하게 작성했습니다. ECMAScript 2015 이후로 굉장히 큰 변화를 겪고 있는 자바스크립트 개발의 지침서가 되면 좋겠습니다.

★ 대상 독자 ★

◎ 자바스크립트 초보자 탈출을 목표로 하는 사람
◎ ECMAScript 2015 이후에 새로워진 자바스크립트를 이해하고 싶은 사람
◎ 리액트를 사용해 효율적으로 자바스크립트 개발을 하고 싶은 사람
◎ SPA 프런트엔드 개발을 시작하려는 사람

▣ 01장: Node.js와 환경 설정
1.1 모던 자바스크립트
___1.1.1 오래됐으면서도 새로운 자바스크립트의 역사
___1.1.2 모던 웹 개발을 위한 라이브러리
1.2 자바스크립트를 이용한 서버 사이드 처리 - Node.js
___1.2.1 3분만에 살펴보는 Node.js
___1.2.2 대량 접근에 강한 Node.js
1.3 패키지 매니저 npm
___1.3.1 npm으로 할 수 있는 것
___1.3.2 npm으로 라이브러리를 설치하는 방법
___1.3.3 npm을 사용한 프로젝트 생성 방법
___1.3.4 npm을 사용해 스크립트 실행하기
___1.3.5 Yarn
1.4 개발에 사용되는 에디터
___1.4.1 텍스트 에디터
___1.4.2 온라인 코드 에디터
___1.4.3 웹 브라우저의 개발자 도구
1.5 자바스크립트 표준 스타일 - 코딩 규약
___1.5.1 자바스크립트 표준 스타일이란?
___1.5.2 왜 코딩 규약이 필요할까?
___1.5.3 JS 표준 스타일이란?
___1.5.4 주목해야 하는 규약
___1.5.5 자동으로 스타일 확인하고 변환하기
___1.5.6 아톰 에디터에서 실시간으로 확인하기
1.6 Node.js로 간단한 웹 애플리케이션 만들기
___1.6.1 간단한 웹 애플리케이션
___1.6.2 웹 애플리케이션의 구조
___1.6.3 접근 URL에 따라 응답 내용 바꾸기
1.7 Node.js의 비동기 처리
___1.7.1 동기 처리와 비동기 처리
___1.7.2 익명 함수란?
___1.7.3 콜백 지옥이라는 함정
___1.7.4 ECMAScript 2015에서의 콜백 지옥 해결 방법
1.8 바벨로 최신 자바스크립트 사용하기
___1.8.1 바벨이란?
___1.8.2 바벨 전용 설정 파일 만들기
___1.8.3 package.json에 여러 가지 명령어 등록하기
___1.8.4 바벨 - 그 밖의 기능
1.9 모듈의 구조 이해하기
___1.9.1 Node.js의 require에 대해
___1.9.2 ES2015의 import/export 기능
___1.9.3 모듈의 기본 요소를 지정하는 방법

▣ 02장: 리액트 입문
2.1 리액트의 기본적인 사용법
___2.1.1 리액트 시작하기
___2.1.2 자바스크립트 내부에 HTML 작성하기
2.2 리액트와 JSX의 관계
___2.2.1 리액트/JSX
___2.2.2 JSX 태그 내부에 변수를 넣는 방법
___2.2.3 JSX가 내부적으로 변환되는 형태
2.3 리액트의 인기 비결 - 가상 DOM
___2.3.1 가상 DOM이란?
___2.3.2 리액트로 DOM 변경하기
___2.3.3 바이너리 시계 만들기
2.4 리액트로 컴포넌트 만들기
___2.4.1 컴포넌트란?
___2.4.2 리액트를 사용해 컴포넌트를 만드는 방법
___2.4.3 조금 더 복잡한 컴포넌트의 경우
___2.4.4 리스트 컴포넌트 만들기
___2.4.5 화살표 함수로 컴포넌트 정의하기
2.5 본격적으로 컴포넌트 만들기
___2.5.1 컴포넌트의 상태 관리하기
___2.5.2 시계 컴포넌트 만들기
2.6 이벤트의 구조와 구현
___2.6.1 리액트로 클릭 이벤트를 구현하는 방법
___2.6.2 간단한 체크박스 구현하기
___2.6.3 리액트로 이벤트를 만드는 방법
2.7 리액트 도구를 사용한 자동 빌드
___2.7.1 리액트/JSX 컴파일 환경 만들기
___2.7.2 create-react-app 설치
___2.7.3 기본 애플리케이션 구조 확인하기
2.8 웹팩으로 리소스 파일 변환하기
___2.8.1 웹팩이란?
___2.8.2 웹팩으로 리액트/JSX 빌드하기

▣ 3장: 리액트 컴포넌트 만들기
3.1 컴포넌트의 라이프사이클
___3.1.1 컴포넌트의 라이프사이클
___3.1.2 스톱워치 만들기
3.2 리액트와 입력 양식
___3.2.1 간단한 입력 양식 만들기
___3.2.2 숫자만 입력받는 텍스트박스 만들기
___3.2.3 여러 개의 입력 항목을 가진 입력 양식 만들기
3.3 컴포넌트끼리 연동하기
___3.3.1 컴포넌트끼리 연동하는 방법
___3.3.2 inch와 cm 단위를 변환하는 컴포넌트 만들기
3.4 컴포넌트의 3대 요소 사용 구분
___3.4.1 상태와 프로퍼티
___3.4.2 색 선택 컴포넌트 만들기
3.5 입력 필드와 값의 유효성 검사
___3.5.1 우편 번호 입력 컴포넌트 만들기
___3.5.2 범용적인 입력 컴포넌트 만들기
___3.5.3 URL을 나타내는 정규 표현식 패턴
3.6 입력 필드와 값의 유효성 검사
___3.6.1 리액트는 직접 DOM을 조작하지 않는 것이 기본
___3.6.2 render() 메서드를 사용할 때 고려해야 할 사항
3.7 리액트 컴포넌트에서 Ajax 통신 사용하기
___3.7.1 Ajax 통신 사용하기
___3.7.2 SuperAgent의 기본적인 사용법
___3.7.3 리액트 애플리케이션으로 JSON을 읽어 들이고 선택 박스 만들기
3.8 리액트에서 입력 양식을 다루는 방법
___3.8.1 텍스트박스(input type\u003d\"text\")
___3.8.2 체크박스(input type\u003d\"checkbox\")
___3.8.3 텍스트에리어(textarea)
___3.8.4 라디오버튼(input type\u003d\"radio\")
___3.8.5 선택박스(select)

▣ 04장: 프런트엔드 개발 - 일렉트론과 리액트 네이티브
4.1 리액트를 이용한 프런트엔드 개발
___4.1.1 프런트엔드란?
___4.1.2 데스크톱 전용 애플리케이션 개발 - 일렉트론
___4.1.3 스마트폰 전용 리액트 네이티브
4.2 일렉트론 사용해보기
___4.2.1 일렉트론 시작하기
___4.2.2 일렉트론에 리액트 개발 환경 추가하기
___4.2.3 일렉트론의 구조 이해하기
___4.2.4 클립보드 가공 애플리케이션 만들기
___4.2.5 애플리케이션 배포하기
4.3 마스토돈 클라이언트 만들기
___4.3.1 마스토돈이란?
___4.3.2 마스토돈 웹 API 사용해보기
___4.3.3 일렉트론 애플리케이션 마무리하기
4.4 리액트 네이티브로 스마트폰 애플리케이션 만들기 (안드로이드 편)
___4.4.1 리액트와 리액트 네이티브의 차이
___4.4.2 안드로이드 개발 환경 설정
___4.4.3 프로그램 수정하기
___4.4.4 애플리케이션 배포하기
4.5 리액트 네이티브로 스마트폰 애플리케이션 만들기(iOS 편)
___4.5.1 iOS 개발을 위한 리액트 네이티브 설치
___4.5.2 리액트 네이티브 프로젝트 만들기
___4.5.3 샘플 프로그램 수정하기
___4.5.4 실제 iOS 장치에서 실행하는 방법
4.6 스마트폰 전용 마스토돈 클라이언트 만들기
___4.6.1 예제 미리보기
___4.6.2 리액트 네이티브 프로젝트 만들기
___4.6.3 리액트 네이티브 전용 스마트폰 클라이언트

▣ 05장: SPA를 위한 프레임워크
5.1 SPA: 웹 서버와 리액트의 역할 분담
___5.1.1 SPA
___5.1.2 웹 서버와 리액트의 역할 분담
5.2 웹 애플리케이션 전용 프레임워크 익스프레스
___5.2.1 익스프레스 설치
___5.2.2 Hello World 만들기
___5.2.3 다양한 경로에 대응하기
___5.2.4 POST 메서드 요청 받기
___5.2.5 업로드한 파일 받기
___5.2.6 자동으로 파일 응답하기
5.3 플럭스의 구조 이해하기
___5.3.1 리액트에 플럭스가 필요한 이유
___5.3.2 플럭스의 구성 요소
___5.3.3 구성 요소의 정보 전달 흐름
5.4 리액트 라우터를 이용해 조금 복잡한 애플리케이션 만들기
___5.4.1 리액트 라우터란?
___5.4.2 간단한 예제
___5.4.3 고정 헤더와 푸터 사용하기
___5.4.4 매개변수 사용
___5.4.5 리액트 라우터와 관련된 자세한 내용
5.5 리액트 + 익스프레스로 게시판 만들기
___5.5.1 예제 미리보기
___5.5.2 프로젝트 만들기
___5.5.3 웹 서버 프로그램
___5.5.4 클라이언트(리액트) 프로그램
5.6 실시간 채팅 만들기
___5.6.1 웹 소켓이란?
___5.6.2 예제 미리보기 - 실시간 채팅
___5.6.3 프로젝트 만들기
___5.6.4 웹소켓 통신
___5.6.5 프로그램 - 채팅 서버
___5.6.6 프로그램 - 채팅 클라이언트
___5.6.7 SPA 구현에서 중요한 것

▣ 06장: 실전 애플리케이션 개발
6.1 누구나 편집할 수 있는 Wiki 시스템 만들기
___6.1.1 위키 시스템
___6.1.2 위키 애플리케이션 구성하기
___6.1.3 프로젝트 만들기
___6.1.4 웹 서버 프로그램 - 위키 서버
___6.1.5 위키 클라이언트
___6.1.6 위키 파서 - PEG.js로 파서 만들기
6.2 개인 SNS 만들기
___6.2.1 예제 미리보기
___6.2.2 프로젝트 만들기
___6.2.3 서버 - SNS 서버
___6.2.4 클라이언트 - SNS 클라이언트
6.3 머신러닝으로 손글씨 숫자 판별하기
___6.3.1 예제 미리보기 - 실시간 손글씨 숫자 인식 도구
___6.3.2 손글씨 숫자 데이터베이스 다운로드
___6.3.3 바이너리 파일 해석하기
___6.3.4 머신러닝 적용
___6.3.5 문자열 인식 서버 프로그램
___6.3.6 문자 인식 클라이언트(리액트) 프로그램
___6.3.7 책을 마치면서 - 개발한 애플리케이션 공개하기
___6.3.8 마지막으로

▣ 부록A: 개발 환경 구축
A-1 Node.js 설치하기
___A.1.1 윈도우의 경우
___A.1.2 macOS의 경우
A-2 버추얼박스로 가상 환경 구축하기
___A.2.1 설치 과정
___A.2.2 필요한 도구 다운로드
___A.2.3 윈도우에 개발 환경 설치하기
___A.2.4 macOS에 개발 환경 구축하기
___A.2.5 Vagrantfile 수정하기
___A.2.6 베이그런트 설정과 조작 방법
___A.2.7 가상 환경 충돌
A-3 가상 환경 우분투에 Node.js 설치하기
___A.3.1 설치하고 사용하기