Language	Goals	project	IDE offline	IDE Online	Deploy
JavaScript	React, Node.js, Express, GraphQL	phone-book, apollo-notes	Atom, vsCode	CodePen.io, Sandbox.io	FireBase

React + Express

• 이제부터 열심히 해 볼라구요... ㅎ😬
• 도와주십셔~ 아무것도 모르는 천둥벌거숭이
• 협업의 중요성을 잘 알구있습니다. 그래서 묻어가려구요~

Node.js + React + Express

Study Materials

1. 인프런 강좌 (NEW - 2018년) 베이직 코스 13강
2. 인프런 강좌 (OLD - 2016년) 중급코스 35강
3. 노마드코더 - 아폴로노트 만들기 강좌

누구나 하는 React 유튜브 목록 (NEW - 2018년)

Dev-tools

• sandbox 온라인 에디터
• vsCode 오프라인 에디터

1. 누구나하는 리액트 : #1 소개-초심자를 위한 리액트 핵심 강좌 ... [▶3:57]
2. 누구나하는 리액트 : #2 프론트엔드 라이브러리란 무엇인가? ... [▶9:11]
3. 누구나하는 리액트 : #3 리액트의 Virtual DOM ... [▶4:28]
4. 누구나하는 리액트 : #4 리액트를 특별하게 만드는 점 ... [▶4:25]
5. 누구나하는 리액트 : #5 본격적인 리액트 코드 작성하기 ... [▶7:55]
6. 누구나하는 리액트 : #6 JSX 기본 문법 알아보기 (i) ... [▶0:31]
7. 누구나하는 리액트 : #7 JSX 기본 문법 알아보기 (ii) ... [▶7:29]
8. 누구나하는 리액트 : #8 Props ... [▶2:03]
9. 누구나하는 리액트 : #9 State ... [▶8:45]
10. 누구나하는 리액트 : #10 LifeCycle API (i) ... [▶8:23]
11. 누구나하는 리액트 : #11 LifeCycle API (ii) ... [▶2:03]
12. 누구나하는 리액트 : #12 필요한 도구 설치하기 ... [▶7:27]
13. 누구나하는 리액트 : #13 Create React App 사용하기 ... [▶7:33]

---

REACT.JS 인프런 유튜브 목록 (OLD - 2016년)

Dev-tools

• codepen.io, nitrous.io 온라인 에디터
• Atom 오프라인 에디터

Chapter 1.0

• 강좌 1-1편 : 강의 소개 [139:12]
• 강좌 1-2편 : React.js 소개 [38:55]
• 강좌 1-3편 : React.js 장점과 단점 [44:46]

Chapter 2.0

• 강좌 2-1편 : Codepen 설정 , ES6 클래스 [6:54]
• 강좌 2-2편 : JSX의 특징 [67:23]
• 강좌 2-3편 : props [78:54]
• 강좌 2-4편 : state [811:15]
• 강좌 2-5편 : 컴포넌트 매핑 (Component Mapping) [96:51]

Chapter 3.0

• 강좌 3-1편 : 작업환경 설정하기 [1024:03]
• 강좌 3-2편 : React Project 만들기 | NPM, WEBPACK [118:08]
• 강좌 3-3편 : Hot Module Replacement | React Hot Loader [1212:14]

Chapter 4.0

• 강좌 4-1편 : Contact 검색기능 구현 | input, sort, filter [15:11]
• 강좌 4-2편 : Contact 선택기능 구현 | React.js 기초개념 응용 [1413:36]
• 강좌 4-3편 : state 내부 배열 처리하기 | Immutability Helper / ES6 Spread [155:35]
• 강좌 4-4편 : Contact 추가/삭제/수정 기능 구현 | Immutability Helper 적용하기 [169:03]
• 강좌 4-5편 : Contact 데이터 추가 기능 구현 | 컴포넌트 응용 [187:33]
• 강좌 4-6편 : Contact 데이터 삭제/수정 기능 구현 | 컴포넌트 응용 [197:03]
• 강좌 4-7편 : Contact 엑스트라 기능 구현 | KeyPress, ref [357:53]
• 강좌 4-8편 : Component LifeCycle API [349:50]
• 강좌 4-9편 : Contact 데이터 새로고침해도 유지하기 | localStorage [219:57]

Chapter 5.0

• 강좌 5-1편 : Redux - 배경지식 | MVC, FLUX [2211:20]
• 강좌 5-2편 : Redux - 특징과 흐름 [237:02]
• 강좌 5-3편 : Redux - 프로젝트 준비하기 | create-react-app [2417:18]
• 강좌 5-4편 : Redux - 프로젝트 구조 설정 및 컴포넌트 생성 [258:06]
• 강좌 5-5편 : Redux - Action [2615:59]
• 강좌 5-6편 : Redux - Reducer [278:20]
• 강좌 5-7편 : Redux - Store [2819:34]
• 강좌 5-8편 : Redux - react-redux | 컴포넌트에서 사용하기 [292:46]

Chapter 6.0

• 강좌 6-1편 : Backend-소개 [3013:38]
• 강좌 6-2편 : Backend-Node.js / Express.js 맛보기 | 라우팅, 모듈화 [3113:20]
• 강좌 6-3편 : Backend-Express | 미들웨어(middleware) [324:58]
• 강좌 6-4편 : Backend-MongoDB 소개 [337:56]
• 강좌 6-5편 : Backend-MongoDB 기본명령어 (i) | 생성 및 제거 [187:33]
• 강좌 6-6편 : Backend-MongoDB 기본명령어 (ii) | find() [187:33]
• 강좌 6-7편 : Backend-MongoDB 기본명령어 (iii) | sort, limit, skip, update [197:03]

---

NOMAD Notes : 오프라인노트 with 아폴로

1. 노트앱 만들기 (#0-01.) Intro - Build an Offline Note Taking App with React~ ... [03:01]
2. 노트앱 만들기 (#0-02.) Requirements - Build an Offline Note Taking App ... [00:58]
3. 노트앱 만들기 (#1-01.) Set Up - Build an Offline Note Taking App with Reac~ ... [05:37]
4. 노트앱 만들기 (#1-02.) Configuration - Build an Offline Note Taking App wi~ ... [07:09]
5. 노트앱 만들기 (#1-03.) Type Definitions for Offline Schema ... [05:44]
6. 노트앱 만들기 (#1-03a) Intermission for Bug Fixing ... [02:42]
7. 노트앱 만들기 (#1-04.) Note Query part One ... [08:16]
8. 노트앱 만들기 (#1-05.) Note Query part Two ... [05:22]
9. 노트앱 만들기 (#1-06.) Add Note Mutation ... [09:21]
10. 노트앱 만들기 (#1-07.) Edit Note Mutation ... [09:46]
11. 노트앱 만들기 (#1-08.) Router and Routes ... [08:09]
12. 노트앱 만들기 (#1-09.) Notes Route ... [05:36]
13. 노트앱 만들기 (#1-10.) Note Route ... [10:08]
14. 노트앱 만들기 (#1-11.) Add Note Route ... [09:46]
15. 노트앱 만들기 (#1-12.) Edit Note Route ... [08:12]
16. 노트앱 만들기 (#1-13.) Saving the Notes Offline ... [06:31]
17. 노트앱 만들기 (#1-14.) Restoring Offline Notes ... [04:38]
18. 노트앱 만들기 (#1-15.) Conclusions ... [01:10]

---