[React] 프로젝트 기본 설정

✅ React 프로젝트 기본 설치

---

#️⃣ npx create-next-app를 복사하여 프로젝트 폴더에 붙여넣기

#️⃣ 폴더가 만들어졌습니다. 해당 폴더로 이동

#️⃣ 해당 폴더에서 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 명령어를 복사하여 React 17버전과 React 17버전을 지원하는 next를 설치

#️⃣ node_modules 와 pages 안에 있는 api폴더를 삭제

#️⃣ package.json에서 react 와 react-dom의 버전을 바꾸기

"dependencies" : {
	"next" : "12.1.0",
	"react" : "17.0.2",
	"react-dom" : "17.0.2"
}

#️⃣ npm 대신 yarn을 사용

• sudo npm install -g yarn 을 입력
• yarn -v 버전 확인

#️⃣ "class" 폴더에서 Apollo-Client와 Graphql을 설치

• npm install @apollo/client graphql을 복사 후 class 폴더에서 붙여넣기

#️⃣ "class" 폴더에서 Emotion 을 설치

• yarn add @emotion/react 복사 후 class 폴더에서 붙여넣기
• yarn add @emotion/styled 복사 후 class 폴더에서 붙여넣기

#️⃣ "class" 폴더에서 Ant-Design을 설치

• yarn add antd을 복사 후 class 폴더에서 붙여넣기

#️⃣ "class" 폴더에서 Axios을 설치

• yarn add axios를 입력

🌠 모두 설치했는지 확인하기

• node --version
• npm --version
• yarn --version

✅ 타입스크립트 설치 및 세팅

---

#️⃣ yarn add typescript --dev 터미널에서 class 폴더 위치로 이동한 후 붙여넣기
#️⃣ yarn add @types/react@17.0.2 @types/node@17.0.2 --dev를 붙여넣기

#️⃣ typescript 설정 파일(tsconfig.json)을 만들어 준다. 내용은 비워 놓는다.

#️⃣ yarn dev 명령을 실행하게 되면, nextjs가 typescript의 설정 파일인 tsconfig.json을 감지하고, (tsconfig.json)에 기본 설정을 자동으로 채워준다.

#️⃣ (tsconfig.json)파일에서 strict을 true로 바꿔준다.

✅ graphql-codegen 설치

---

#️⃣ graphql-code-generator 홈페이지

#️⃣ class 폴더에 codegen.yaml 파일을 만들기

//codegen.yaml 파일 (yml, yaml 둘 다 상관 없습니다.)
//schema에는 graphql url 주소(백엔드 주소)를 넣어주면 된다.
schema: http://backend-practice.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

#️⃣ 각자의 패키지 매니저에 맞는 명령어를 복사후 class 폴더의 위치에서 붙여넣기

• yarn add -D @graphql-codegen/cli
• yarn add -D @graphql-codegen/typescript
• yarn add ts-node

#️⃣ package.json 파일에 아래 코드를 추가 후 저장

#️⃣ 설치가 완료되었다면, yarn generate 명령을 실행하면, Backend 컴퓨터에 접속해서 Graphql-API로 받아오는 모든 데이터의 타입을 빠르게 조사하고, 이와 일치하는 타입스크립트 파일을 ./src/commons/types/generated/types.ts 위치에 자동으로 만들어 준다

✅ eslint 설치하기

---

#️⃣ 터미널에 아래 명령어를 입력

• npm init @eslint/config

#️⃣ 설정파일을 만들고 나면 아래와 같이 몇가지 질문이 나온다.

• eslint를 어떤식으로 사용할지에 대한 질문, 문법과 코드스타일과 문제모두 체크해야하므로 마지막것을 체크
  How would you like to use ESlint ? => To check syntax, find problems, and enforce code style

• 자바스크립트 뭐쓰고 있는지 묻는것, import/export를 지원하는것을 사용
  Waht type of modules does your project use? => Javascript modules (import/export)

• 리액트를 사용하므로 react를 선태해주시면 된다.
  Which framework does your project use? => react

• 타입스크립트 사용유무를 확인하는 질문, 타입스크립트를 사용하므로 yes를 선택한다.
  Does your project use TypeScript? => Yes

• 어디서 실행하는지 확인하는 질문, 브라우저에서 실행한다. (노드는 언어가 아닌 실행 프로그램)
  Where does your code run? => Browser

• 인기있는 가이드를 할지, 커스텀을 할 지 선택한다. 인기있는 가이드를 따를 것
  How would you like to define a style for your project? => Use a popular style guide

Which style guide do you want to follow? => Standard

• 설정 파일을 뭘로 만들지 물어보는 질문, 자바스크립트로 만들 것
  What format do you want your config file to be in? => Javascript
  Checking...

• 설치를 진행할 것인지 물어보는 질문
  Would you like to install them now? => yes

• 어떤 패키지 매니저로 설치할지 묻는 질문
  Which package manager do you want to use? => yarn

#️⃣ VS code extension에서 ESLint extention을 설치

#️⃣ 설치가 완료되면, eslintrc.js 파일이 생성된 것을 보실 수 있다.

parserOptions: {
	// 이 부분을 추가해주세요
	project: '**/tsconfig.json',
...
},

#️⃣ 불필요한 규칙 무시하기

rules: {
    'react/react-in-jsx-scope': 'off',
		'@typescript-eslint/consistent-type-imports' : 'off',
 }

✅ 프로젝트 기본 세팅 결과

---

🌠 package.json

{
  "name": "freeboard-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },
  "dependencies": {
    "@apollo/client": "^3.7.3",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@next/font": "13.1.1",
    "antd": "^5.1.3",
    "axios": "^1.2.2",
    "firebase": "9.10.0",
    "graphql": "^16.6.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-daum-postcode": "^3.1.1",
    "react-dom": "17.0.2",
    "react-infinite-scroller": "^1.2.6",
    "react-player": "^2.11.0",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "ts-node": "^10.9.1",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^2.16.4",
    "@graphql-codegen/typescript": "^2.8.7",
    "@types/node": "17.0.2",
    "@types/react": "17.0.2",
    "@types/react-infinite-scroller": "^1.2.3",
    "@types/react-slick": "^0.23.10",
    "@types/uuid": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.6.0",
    "eslint-config-standard-with-typescript": "^32.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.1",
    "husky": "^8.0.3",
    "prettier": "2.8.3",
    "typescript": "*"
  },
  "resolutions": {
    "@types/react": "17.0.2"
  }
}

🌠 폴더