React.js

<Velopert 님 강의 들으면서 정리>

개념설명

1. Setting

- ReactJs 세팅 방법(webpack3 & webpack4, babel8 & babel7)

2. create-react-app

- create-react-app 을 이용한 프로젝트 구성

3. react-hot-loader 설정

- react-hot-loader 설정

4. JSX

- JSX란 / JSX 사용 방법 / JSX 특징

5. props & state

- props - props란?, 기본값 설정, Type / state - state란?, state 사용 방법

6. Basic Component

- map 예시 / arrow function 예시 / Component 사용 예시 / 함수형 컴포넌트

7. state 내부 배열 처리

- immutable.js 사용방법 & react-immutable-proptypes 사용 / ES6 Spread 기본 / 참고 - Immutability Helper

8. 주소록 검색 기능 구현

- 주소록 검색 기능 구현 (input / sort / filter)

9. 주소록 선택 기능 구현

- 주소록 선택 기능 구현

10. 주소록 추가

- 주소록 추가 기능 구현

11. 주소록 삭제, 수정

- 주소록 삭제 / 수정 기능 구현

12.KeyPress & ref

- KeyPress 사용 방법 및 / ref 사용 방법 추가 (Focus)

13. Component LifCycle API

- Component LifCycle API 설명

14. localStorage

- localStorage 기본 / localStorage 사용 방법

15. Basic API

- Sass 설정, CSS 모듈 설정 / axios / Promise / async/await / loader 불러오기

16. react-router

- 라우트 생성 및 설정 / 라우트 이동(Link, NavLink) / 내부 라우트 설정 / Redirect 사용 방법 / QueryString 사용방법 / Not Found Page 설정

17. Unit Test with Jest & Enzyme

- Unit Test 란? / crash 테스팅 / 스냅샷 테스팅 / DOM 시뮬레이션 (By Enzyme)

Redux 활용하기

1. Basic Redux

- Flux 란 / Redux 란 / Redux의 3가지 원칙

2. Redux Example

- Component 작성 / Actions 작성 (객체 + 함수) / Reducer 작성 / Store 사용 / react-redux (view layer binding) - Provider 컴포넌트 / connect 함수

3. Redux Example_멀티카운터 & immutable.js 적용

- 멀티카운터에 Redux 적용 / immutable.js 적용

4. Ducks 구조

- Ducks 구조란 / redux-actions 사용하기

5. Redux Middleware & axios

- Middleware 기본 / redux-thunk 사용방법 / axios Redux 에 적용 / redux-promise-middleware 사용 방법

6. Redux 테스트

- 리덕스 테스트의 흐름 / 일반 테스트 코드 작성 방법 / 비동기 테스트 코드 작성 방법

예제

1. Contacts

- 주소록 예제 (위의 튜토리얼보다 더 추가)

2. Todo List

- 할일 목록 만들기 예제

3. Contacts(Redux)

- Redux 를 적용한 주소록 예쩨