React 소개

javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구

도구 설치

1. Yarn 설치
   $ npm install -g yarn
   
2. 바탕화면에 생성한 폴더 안 $ npx create-next-app 폴더명 명령을 사용해 Next.js 프로젝트 설치
   
3. React 버전이 React17 버전에서 React18 버전으로 업데이트 됐지만 실무에서는 안정적인 React17을 사용하기 때문에 버전을 교체해 주어야 한다.
   현재 위치를 확인 후
   $ yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 명령어를 사용해 추가 설치
   

추가설치

1. class 폴더 안 Emotion 설치
   $ yarn add @emotion/react
   $ yarn add @emotion/styled
   
   
   
   
2. class 폴더 안 Apollo-Client와 Graphql을 설치
   $ yarn add @apollo/client graphql
   
   
   
3. class 폴더 안 Ant-Design을 설치
   $ yarn add antd
   
   
   
4. class 폴더 안 Material-UI을 설치
   $ yarn add @material-ui/core
   
   
   
5. class 폴더 안 Axios 설치
   $ yarn add axios
   

package.json 확인

package.json 파일은 기본정보, 실행 명령어, 라이브러리/프레임워크로 구성

Next를 설치했기 때문에 react와 react-dom도 함께 설치된 것과 React17 버전으로 바뀐 것 확인

추가

Next는 React 기반 프레임워크

Next.js의 API Routes
next.js는 서버에 API 기능을 제공할 수 있도록 하는 솔루션 존재
pages/api 안 존재하게 되면 url로 접근할 때 호스트 루트가 api 폴더로 매칭되는데, 이 기능을 사용하지 않으므로 폴더를 삭제했다.

API Routes 추가 링크