# Dream Coding - React 9. Business Card Maker
## ==9.1 프로젝트 소개==

사용하는 기술 Stack

- React Hooks
- PostCSS
- React Router
- Firebase
- Authentication
- Realtime Database
- Cloudinary

## ==9.2 React Router란?==

### `Routing` in web

- a mechanism where HTTP requests gets link to specific web pages/resources
- Router determines which page should be opened when a user visits a certain path

### `SPA` (Single Page Application)

- React 는 대표적인 SPA를 활요하는 기술
- 브라우저 자체의 history (북마크, 뒤로가기, 네비게이션 등) 가 작동하지 않는 다는 문제점이 있음.

### `React Router`

[React Router: Declarative Routing for React](https://reactrouter.com/)

- SPA의 단점 (history 관리가 안됨) 을 보완한 React 라이브러리
- history를 관리할 수 있음

## ==9.3 React Router 실전 예제 연습==

### `BrowserRouter`

### `Link`

### `Switch`

### `Route`

### `usehistory`

⇒ 나중에 한 사람이 라이브러리 정리 할 것

- inline props로 component를 전달하지말고, child component로 전달할 것.
- 만약, component안에서 자체적으로 history 조작을 원하다면, `useHistory` 등의 Hook을 이용할 것

## ==9.4 Firebase 알아보기==

### Firebase

- 장점과 단점을 알아볼 것
- 서버를 왜 아직도 작성하고 있는가?

⇒ Serverless의 개념

### sdk

- software development kit
- public api 와 차이점을 비교해 볼 것

## ==9.5 Cloudinary 알아보기==

### `cloudinary`

- 사용자의 파일을 자유롭게 커스터마이징 할 수 있는 사이트
- 사이즈 재조정, 필터링 씌우기 등등
- 이미지 스토리지 활용에 효과적
- REST API 를 이용할 수 있으므로 개발 친화적

## ==9.7 프로젝트 셋업==

### Post CSS Values

- `PostCSS` 를 이용하면 훨씬 간단하게 만들 수 있음
- `@value key: value;` 로 선언
- `@value key from 'path'` 로 가져오면 됨
- CRA 에 포함된 플러그인들

`postcss-flexbugs-fixes`

`postcss-loader`

`postcss-normalize`

`postcss-preset-env`

`postcss-safe-parser`