React SNS 1-2. next와 eslint 설치하기

Project Folder 만들기

React-NordBird 프로젝트 폴더 생성 후 그 하위에 각각의 front 폴더 , back 폴더 각각 생성

폴더 생성 이미지

에디터에서 터미널을 켭니다.

New 터미널 이미지

터미널에서 front 폴더로 이동합니다. 그 이후에 npm init을 선언해줍니다.

npm init 은 노드 프로젝트를 만들겠다는 선언 합니다. next나 react는 노드가 필수입니다. 노드는 서버가 아니라 자바스크립트 실행기입니다. 그렇기 때문에 노드도 꼭 같이 배워줘야 합니다.

터미널 사용 이미지

npm init을 이용하여 package.json 정보를 입력합니다. 직접 package.json 파일을 생성해서 만들어도 가능하지만 좀 더 편하게 만들 수 있도록 도와주는 게 npm init입니다. 정보를 입력 후 엔터를 치면 다음으로 넘어갑니다. 3개의 정보만 입력하였습니다.

package 정보 이미지

npm i react react-dom next 명령어를 사용하여 한번에 3개의 파일을 설치합니다 react/react-dom/next

react/react-dom/next 설치 이미지

설치 완료 후 npm i -D nodemon webpack을 설치합니다.

nodemon/webpack 설치 이미지

설치 완료 후 npm i -D eslint를 설치합니다.

eslint 설치 이미지

eslint를 설치하는 이유는 프로젝트 협업을 할 때 코딩 스타일이 모두 다릅니다. 코딩 스타일의 규칙을 하나로 확정할 수 있습니다.

eslint를 설정하기 위해 front 폴더 하위에. eslintrc라고 파일을 생성합니다.

eslint 설정 이미지

plugin 들은 직접 설치를 해야 합니다.

{ "parserOptions" : { "ecmaVersion" : 2019, "sourceType" : "module", "ecmaFeatures" : { "jsx": true } }, "env" : { "browser" : true, "node" : true }, "extends" : [ "eslint:recommended", "plugin:react/recommended" ], "plugins" : [ "import", "react-hooks" ] }

npm i eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

플러그인 설치

프로젝트 안의 파일 중에 package.json 파일을 선택하면

eslint-~~를 devDependencies로 옮겨줍니다.

// 수정전 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "dogveloper", "license": "MIT", "dependencies": { "eslint-plugin-import": "^2.17.2", "eslint-plugin-react": "^7.13.0", "eslint-plugin-react-hooks": "^1.6.0", "next": "^8.1.0", "react": "^16.8.6", "react-dom": "^16.8.6" }, "devDependencies": { "eslint": "^5.16.0", "nodemon": "^1.19.0", "webpack": "^4.31.0" } } // 수정 후 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "dogveloper", "license": "MIT", "dependencies": { "next": "^8.1.0", "react": "^16.8.6", "react-dom": "^16.8.6" }, "devDependencies": { "eslint": "^5.16.0", "eslint-plugin-import": "^2.17.2", "eslint-plugin-react": "^7.13.0", "eslint-plugin-react-hooks": "^1.6.0", "nodemon": "^1.19.0", "webpack": "^4.31.0" } }

출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

from http://dog-developers.tistory.com/105 by ccl(S)