리액트 개발환경 구성

본 포스팅은 https://www.youtube.com/watch?v=WkILRTAcRdU 영상을 보면서 공부한 자료 입니다.

eslint 추가

• vscode extension에서 설치

• 린터로써 오류를 잡아주는 것

• ecma script 코드의 문법을 사전에 검사해줌

npx install-peerdeps --dev eslint-config-airbnb

• 에어비앤비에서 만든 linter를 추가

# package.json에 추가된 것 확인 가능
"devDependencies": {
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^1.7.0"
  }
}

 

• 루트에 .eslintrc.js 파일 생성

module.exports = {
    env:{
        browser:true,
        es6:true,
        node:true,
    },
    extends: ['eslint:recommended','airbnb','plugin:prettier/recommended'],
    rules:{
        'react/jsx-filename-extension':
        ['error',
          {'extensions':[".js",".jsx"] }
        ]
    }
};

prettier 추가

• vscode extension에서 설치

• 포매터로써 코드 컨벤션을 맞춰주는데에 용이(간격, 쌍따옴표 등)

• 작성된 코드의 포맷을 이쁘게 해주는 것

 

• prettier 관련 플러그인 추가

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

# package.json에 추가된 것 확인 가능
"devDependencies": {
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "^8.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^1.7.0"
  }

 

• 루트에 .prettierrc.js 파일 생성

module.exports = {
    singleQuote: true,
    // 문자열은 따옴표로 formatting
    semi: true,
    // 코드 마지막에 세미콜론이 있게 formatting
    useTabs: false,
    // 탭의 사용을 금하고 스페이스바 사용으로 대체
    tabWidth: 2,
    // 들여쓰기 너비는 2칸
    trailingComma: 'all',
    // 개첸 배열 키:값 뒤에 항상 콤마를 붙이도록
    printWidth: 80,
    // 코드 한줄이 맥시멈 80칸
    arrowParens: 'avoid',
    // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 함
};

 

vscode 설정

• javascript format enable을 해제

 

• format on save 설정

 

오류 해결

• 위 linter, formatter를 사용한 후 app.js에서 save를 하면

'React' must be in scope when using JSX

• 위와 같은 에러가 뜬다. 직역하면, JSX를 사용할 때는 React가 scope 안에 있어야한다. 라는 의미.

 

최상단에

import React from 'react';

를 추가해주면 오류 해결.

www.youtube.com/watch?v=WkILRTAcRdU'

www.youtube.com/watch?v=WkILRTAcRdUd

www.youtube.com/watch?v=WkILRTAcRdUd

www.youtube.com/watch?v=WkILRTAcRdU