React 스터디를 시작합니다.
아래 문서는 가까운 시일 내로 시작할 스터디를 위한 공지 문서입니다. 하지만 React를 이용하여 FE를 처음 공부하시는 분들이 아래 코스대로 공부하시면 도움이 될 수 있을 거 같아서 전체 코스를 공개합니다. 만약 여러분들이 스터디를 하실 때 이 내용들을 참고해보세요.
총 스터디 기간은 최소 4주 — 최대 12주입니다. * 저도 안해봐서 얼마나 걸릴 지 모릅니다. 스터디는 매 주 1회, 한번에 2시간정도 진행할 예정입니다.
Syllabus
1회차:
React 개발 환경을 설정합니다.
create-react-app을 사용하지 않고, Parcel을 이용해서 기초적인 개발 환경을 세팅합니다.
React의 모양새에 대해서 살펴봅니다.
Class 컴포넌트, 함수형 컴포넌트, Life Cycle, State와 Props의 관계에 대해서 알아봅니다. JSX에 대해서도 살펴보고, 어떤 문제가 생기는 지 살펴봅시다.
ES6+에 대해서 간단히 살펴봅시다.
- variables
- Import 문
- export 문
- class
- Function
- 비구조화 할당
2회차:
React만 사용해서 간단한 어플리케이션을 구현해봅시다.
제 생각에는 Apple의 Reminder 앱을 하나 만들어보면 좋을 거 같습니다.
아래 스펙이 구현되어야합니다.
- 새로운 ToDo를 추가할 수 있다.
- ToDo의 내용을 수정할 수 있어야한다.
- 제목, 우선도, note 정도를 넣을 수 있습니다.
- ToDo를 완료할 수 있어야한다.
3회차:
React에 Redux를 끼얹어봅시다.
2회차에서 만든 어플리케이션에 (반드시) 문제가 발생할 것입니다. 어떤 문제점이 있었는 지 살펴보고, Redux를 왜 사용하는 지에 대해서 살펴봅시다. Redux의 핵심 개념에 대해서 이해합시다.
- Action
- Reducer
- Store
React-Redux를 이용해서 VIEW와 MODEL을 연동해봅시다.
상태 관리가 왜 중요한 지 이해해봅시다.
어떤 어플리케이션이던 상태를 관리하는 것이 아주 중요합니다. Redux를 이용했을 때 React의 Life Cycle이 어떻게 바뀌는 지, 컴포넌트 단위의 연결을 어떻게 해야하는지 이해해봅시다.
4회차:
TypeScript를 끼얹어봅시다.
지금까지 JS로 만든 코드를 TypeScript를 이용해서 개선해봅시다. TypeScript를 왜 사용하는 지, 어떤 부분에서 JS보다 이점을 얻을 수 있는 지 살펴봅시다. TypeScript의 핵심 개념에 대해서 이해합시다.
- Type을 이해합시다.
- Type 선언을 어떻게 하는 지 이해합시다.
5회차:
API를 연동해봅시다.
Google의 Firebase를 이용해서 간단한 API 서버를 만들고, API 서버를 연동하는 방법에 대해서 살펴봅시다. 아래와 같은 것들을 할겁니다.
- Promise 문법에 대해서 이해해봅시다.
- Async, Await에 대해서 이해해봅시다.
- Axios 패키지를 사용해봅시다.
- Fetch API를 사용해봅시다.
Requirement:
- HTML, CSS에 대한 지식이 있어야합니다. 기본적인 레이아웃을 구현할 수 있어야 하며, 막혔을 때 해결할 수 있는 수준이 요구됩니다.
- 스터디 시간 내에 모든 걸 다 이해할 수 없습니다.
한 회당 스터디 시간은 제한적이며 (아마 2시간) 제가 설명드려야하는 내용이 많기 때문에,
중간에 중요하지 않다고 생각되는 건 설명이 넘어갈 수도 있습니다. - git을 다루실 수 있으면 좋습니다. (어차피 쓸거라서요)
만약 git에 대한 이해도가 낮으시다면 미리 문서를 봐두시는 걸 추천합니다.
위 내용으로 스터디를 진행하면서, 중간중간 나왔던 지식들에 대해서는 다시 공유드리도록 하겠습니다.
