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

ZeroCho TV