2024 React Full Course (feat. Recoil) - 1. 기본 세팅

 

vue 만 알고 있으면 나중에 다른 프로젝트에 투입될 때 불리할 거 같아서 시간이 날 때 react공부를 해보기로 했다.

https://www.youtube.com/watch?v=Yv5tSNr4h2c&list=WL&index=14

 

위 유튜브를 참고하였습니다.

#desktop으로 이동
cd desktop

#설치
npm create vite@latest

#Projcet-name
react-album

#Select a fraemwork
React

#Select a variant
TypeScript

#프로젝트로 들어가서
cd react-album

#npm 설치
npm install

#프로젝트 열기
code . -r

 

- 확장팩 설치

=> ES7+ React/Redux/React-Native snippets 

 

- 플러그인 모듈 설치

 

1. api 통신 위해 axios 설치

npm install axios

 

2. react 중앙집중식 상태 관리 library 설치

yarn add recoil

 

여기서 yarn이 없다면

npm install --global yarn

 

입력해주면 된다.

 

3. 스타일링에 필요한 컴파일러로 sass 설치 - scss

yarn add -D sass

 

4. 페이지 전환시 필요한 라우터 설치

npm install react-router-dom localforage match-sorter sort-by

 

5. typescirpt에서 node.js 모듈을 쓸 수 있는 환경을 구축해주는 거 설치

npm install @types/node

 

6. react toast ui를 보여줄 수 있게 해주는 거 설치

npm install react-simple-toasts

 

이렇게 설치는 마무리했고

 

강사님은 README.md에 아래와 같이 입력해주더라 

### React Basic 강의 : Unplash Image API를 활용한 이미지 검색 사이트 만들기

### 개발환경

1. 프로젝트 환경설정(vite를 활용한 React 프로젝트 설치) : 'npm install vite@latest' <br />
2. React 중앙집중식 상태관리 라이브러리 Recoil 설치 : 'npm install recoil' <br />
3. 외부 오픈 API 통신을 위한 라이브러리 axios 설치 : 'npm install axios' <br />
4. CSS 스타일링을 위한 SASS/SCSS 설치 : 'npm install -D sass' <br />
5. React Router 설치 : 'npm install react-router-dom localforate match-sorter sort-by' <br />
6. TypeScript 에서 Node.js 모듈을 쓸 수 있도록 도와주는 환경 구축 : 'npm install @types/node' <br />
7. React Toast Popup 모듈 설치 : 'npm install react-simple-toasts' <br />