Lint 와 Test

Linting & Testing

• console.log 등을 사용하여 매뉴얼하게 테스트를 할 수도 있지만, 여러 사람과 협업을 하거나 프로젝트의 규모가 커질 경우, console.log 만으로 테스트를 하는 것은 여러 면에서 부족합니다.
• 그래서 테스트를 자동화하기 위해 karma, mocha, chai, jest, jasmine 등과 같은 툴을 사용합니다.

• Linting? 코드 스타일을 지키는지 체크해 주는 툴입니다. 읽기 좋은 코드, 유지 보수하기 좋은 코드를 만드는 데 큰 도움이 됩니다. 특히 협업 시, 일관된 코드 스타일 유지에 큰 도움이 됩니다.
  • 특히 우리가 주로 사용하는 언어인 자바스크립트는 동적(dynamic)이고 타입 면에서 비교적 덜 엄격한(loosely-typed) 언어이기 때문에, 린터의 도움이 더욱 필요합니다!

Linter & Tester

 * ESlint

• 코드에 특정 스타일과 규칙을 적용해서 문제를 사전에 찾고 패턴을 적용시킬 수 있는 정적 분석 툴입니다.
• airbnb 등 미리 스타일과 규칙이 정해진 extentions를 적용할 수 있습니다.

airbnb 와 airbnb-base 의 차이는, airbnb-base 에는 리액트 관련 규칙이 들어있지 않다는 점입니다.

• 또는, 개발자가 자신만의 스타일과 규칙을 정해서 적용할 수도 있습니다.

*How to Start?

1. sprint directory의 root 에서 ESLint를 devDependencies로 설치합니다

        $ npm install -g eslint eslint-config-airbnb-base eslint-plugin-import

         (-g => 이거는 주의!)

 

        $ cd <project-folder>

        $ npm init -y

        $ npm install eslint --save-dev

• .eslintrc.js 파일을 생성하고, 다른 사람이 생성해 놓은 rule 혹은 자신만의 rule 을 적용할 수 있습니다.

  ESLint 의 세부 설정은 package.json 파일의 eslintConfig 에서 설정하거나

  .eslintrc.js 파일에서 rule 을 json 형식으로 작성하여 설정할 수 있습니다.

• .eslintrc 형식 :

env: {

    browser: true,

    es6: true,

    node: true

   },

   ( 사용 환경 )

   extends: ["airbnb-base", "prettier"],

   ( 확장 설정 )

   globals: {

      Atomics: "readonly",

      SharedArrayBuffer: "readonly"

   },

   ( 전역 변수 )

   parserOptions: {

      ecmaVersion: 2018,

      sourceType: "module"

   },

   ( 버전과 모듈 사용 여부 )

   rules: {

      "no-console": 0,

      "func-names": 0

   }

   ( 세부 설정 )

};

 

ESLint 검사에서 제외할 파일들을 설정할 때는 .eslintignore 파일을 만듭니다.