주벨로퍼의 개발 공부

얼마 전에 인터넷을 지역 인터넷으로 바꾸었더니 실시간 스트리밍이 자꾸 끊기는 현상이 발생하고 있다..

페어와 원격으로 의사소통해야 하는데 중간중간 자꾸 줌이 튕겨서 너무 미안했다 ㅜㅜ 

오늘은 프리 코스때 제출했던 과제를 ES6 문법으로 리팩터링 하고 문법 에러나 일정한 코드 스타일을 강제하는 esLint 모듈을 사용해보았다.

리팩터링 관련해선 크게 언급할 건 없을 듯하다. 그저 ES6 이후 문법을 계속 쓰면서 익숙해져야 할 것 같다.

그래서 ESLint의 설치와 적용 및 활용 방법에 대해 간단하게 정리하려고 한다.

1. ESLint 란?

  ESLint는 JavaScript 코드에서 발견된 문제점을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 모듈이다.

2. ESLint 설치, 룰

  2 - 1) 설치 명령어

    npm과 yarn 무엇을 사용하는 지에 따라 명령어를 아래 둘 중 하나로 선택하면 된다.   

npm install eslint --save-dev

# or

yarn add eslint --dev

    해당 명령어로 eslint를 다운하고 반드시 다음 과정을 거쳐야 한다.

npx eslint --init

# or

$ yarn run eslint --init

    위 명령어는 configuration file을 초기화하는 명령어다. 해당 명령어를 통해 eslint configuration file이 생긴다.

    configuration file이 생기면 아래의 명령어를 통해 eslint를 실행할 수 있다.

$ npx eslint yourfile.js

# or

$ yarn run eslint yourfile.js

  2 - 2) configuration file rules

    eslint는 문법의 에러나 코드의 일관성을 요구하는 툴이므로 어떠한 것을 에러로 낼지 아닐지가 중요할 것이다.

    eslint에서 어떤 부분을 에러로 볼 것인지 어떠한 툴을 쓰고 있는지 알려주려면 configuration file의 rules를 수정하면 된다.

    따라서 해당 파일에서 우리가 가장 주목해야 할 부분은 rules일 것이다.

    먼저 rules란 eslint에서 어떠한 것을 에러로 처리할 것인가 에러로 처리하지 않을 것인가에 관한 설정이다.

    아 참고로 configuration file이 초기화 될 때 "extends": "eslint:recommended"와 같은 설정이 자동으로 되어 있을 것이다.

    이 설정이 적용되어 있으면 checkd rules에 한해 eslint에서는 기본적으로 error를 낸다.

    eslint.org/docs/rules/ 에 가면 수 많은 룰 중에 체크된 것도 있고 아닌 것도 있고 또 wrench mark가 표시된 룰도 있는데

    위에서 언급했듯 체크가 되어있으면 기본적으로 eslint를 실행했을 때 에러를 낸다는 것이다.

    해당 에러를 안 내고 싶다면 "해당 룰 이름" : "off"를 rules에 추가해주면 된다.

    wrench의 의미는 eslint로 코드를 수정할 때 명령어의 옵션으로 --fix 값을 주면 해당 에러를 가지고 있는 모든 코드를 한 번에 고칠 수 있는 룰을 의미한다.

    따라서 그러한 룰은 일일이 수동으로 고칠 필요가 없다는 것이다!

    룰에 관해선 여기까지 설명하면 충분할 것 같다. 많은 룰들이 있고 그것을 적용할지 안 할지는 본인에게 달려있다.