Linting & Testing

hyejin Noh·2020년 7월 2일
0

CODESTATES

목록 보기
2/3
post-thumbnail

Code Quality

  • Our code does what it is supposed to do
    (코드가 의도한 대로 동작하는가?)
  • Our code not contain defects or problems
    (코드에 결함이나 문제가 없는가?)
  • Our code is easy to read, maintain and extend
    (코드가 읽기 쉽고 유지보수가 용이한가?)

우리는 Liting과 Testting을 통해 코드 퀄리티를 높일 수 있다.

Test

  • Our code does what it is supposed to do
    (코드가 의도한 대로 동작하는가?)
  • Our code not contain defects or problems
    (코드에 결함이나 문제가 없는가?)

Testing Tool

  • End to End Test
  • Integration Test
  • Unit Test(with Jest)

Linter(With ESlint)

우리가 지정한 코드 스타일을 잘 지키는지 체크해주는 도구, 일관된 코드스타일 유지 => 코드 파악 용이, 코드 오류를 쉽게 찾을 수 있다.

  • Our code not contain defects or problems
    (코드에 결함이나 문제가 없는가?)
  • Our code is easy to read, maintain and extend
    (코드가 읽기 쉽고 유지보수가 용이한가?)

When(체크해야 하는 시점 설정)

  • 사용하는 에디터의 플러그인을 통해 코드를 작성하면서 lint 체크
  • git commit을 하기 전에 lint 체크(rule을 적용해야 commit을 할 수 있도록)
  • test를 진행할 때 lint 체크

ESLint

https://eslint.org/docs/user-guide/getting-started

npm과 package.json에 용도와 목적에 대한 이해를 갖고 있어야 한다.

Tip. eslint를 잘 설치했는지 어떻게 알까?

npm install eslint --save-dev

명령어 후에 package.json 파일의 devDependencies 항목에 eslint가 추가가 되었는지 확인

Q. Eslint를 global로 설치를 추천하지 않은 이유.

global로 dependency를 설치하면 프로젝트마다 적용되는 스타일이 달라 꼬일 수도 있다. 그러므로 특정 프로젝트에만 국한되게 설치하는 것이 좋다.

Tip. CLI에서 뭔가 잘못되어가고 있다는 생각이 들면, Ctrl + C 를 눌러 과정을 중지

CLI 설치 과정 중 선택지에 대한 다음 안내를 참고

Q. How would you like to use ESLint?
S. To check syntax and find problems

Q. What type of modules does your project use?
S. CommonJS

Q. Which framework does your project use?
S. None of these

Q. Does your project use TypeScript?
S. No

Q. Where does your code run?
S. Node

Q. What format do you want your config file to be in?
S. 무엇을 선택해도 상관없습니다.

ESLint 설정 파일은 .eslintrc.js 또는 .eslintrc.json와 같은 이름으로 만들어집니다.

  • package.json scripts에 다음을 추가
"lint": "eslint **/*.js --quiet",
  • ESLint 설정 파일에서 rules에 rule을 추가
  • "npm run lint" 를 실행한다.

이제부터 에러잡기 시작!!

ESLint는 현재 실행 환경이 node이므로, 우리가 코드를 작성할 때 document 또는 window와 같은 객체를 사용하면, 해당 객체가 정의되지 않았다고 판단 ESLint 설정 중에는 다행히, 이를 회피할 수 있는 옵션을 제공

해결하기 위해서는 에러를 있는 그대로 검색하거나, no-undef 옵션을 찾아보거나 아래링크 참고

https://eslint.org/docs/user-guide/configuring#specifying-globals
https://eslint.org/docs/user-guide/configuring#specifying-environments

Airbnb Eslint 적용

아래 사진에 있는 문항들을 잘 따라가세요

다음은 eslint를 git commit 하기전에 자동으로 실행되도록 hooks로 등록하는 방법을 블로깅 할 예정입니다😊

Jest

0개의 댓글