본문 바로가기
카테고리 없음

자바스크립트 프로젝트 환경 설정 (2) - ESLint, Editorconfig, Babel

Junseub 2022. 9. 5. 19:06

지난 번에 이어서 자바스크립트 프로젝트 환경 설정에 대한 내용을 공유하고자 합니다. 이번엔 꼭 필요하진 않지만 사용하면 큰 도움이 되는 몇가지 기술들에 대해서 작성해보겠습니다.

 

Eslint

Eslint는 자바스크립트와 JSX를 위한 linting 툴입니다. linting이란 코드를 분석해서 잠재적인 에러나 스타일적인 실수를 찾아주고, 수정할 수 있으면 수정하는 작업을 의미합니다. Linting tool은 코드의 잠재적인 에러를 찾아줄 뿐 아니라 가독성을 향상시키고 스타일 일관성을 부여하기 때문에 코드의 완성도를 높여줍니다. 또한 여러 사람들이 협업하여 코드를 작성할때 코드의 스타일 컨벤션을 지킬 수 있기 때문에 매우 중요합니다. 자바스크립트에서 사용하는 linting tool은 여러가지가 있지만, 가장 대표적이고 대중적인 tool이 바로 eslint입니다. Eslint를 사용하기 위해선 eslint를 설치하고, 다음과 같이 .eslintrc 파일을 생성합니다.

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest/globals": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [
    "jest"
  ],
  "ignorePatterns": ["**/dist/*.js"]
}
  • env: 코드가 실행되는 환경들을 선언하여 해당 환경에서 제공하는 전역변수들에 접근시 에러를 표시하지 않도록 해줍니다. 브라우저와 Node.js 환경의 전역 변수뿐만 아니라 es6의 기능들을 사용할 수 있도록 했고, 테스팅을 위한 jest의 전역 변수에도 접근할 수 있도록 하였습니다.
  • extends: 이미 정의된 룰들을 가져다가 사용할 수 있습니다. eslint에서 추천하는 룰들이 설정된 eslint:recommended를 extend하면 해당 룰들을 일일이 설정하지 않아도 사용할 수 있습니다.
  • plugins: 사용할 플러그인을 설정합니다. Jest 관련 rule들이 설정된 eslint-plugin-jest를 설치하여 추가해줍니다.
  • ignorePatterns: lint 실행시 무시할 파일의 패턴을 정의합니다. 빌드된 파일들이 위치할 dist 폴더 내에 js 파일들에 대해서는 lint를 하지 않도록 설정합니다.

EditorConfig

EditorConfig는 여러 개발자들이 여러 에디터를 사용해도 일관된 스타일을 유지할 수 있도록 도와주는 툴입니다. Intellij, 비주얼 스투디오와 같은 에디터의 경우 추가적인 플러그인 없이 editorconfig를 지원하며, atom, 비주얼 코드 등의 에디터들은 플러그인을 설치하여 사용할 수 있습니다. 적용하고 싶은 스타일을 다음과 같이 .editorconfig 파일에 작성하면 됩니다.

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
  • root: 해당 파일이 top-most editorconfig 파일임을 의미. .editorconfig 파일 탐색을 종료시킴
  • [*]: 모든 파일에 대해서 다음을 적용
  • charset: charset은 utf-8
  • indent_style = tab 혹은 space
  • indent_size= indend의 사이즈 
  • end_of_line: lf, cr, crlf 중 하나
  • insert_final_newline: 저장시 파일 맨 밑에 newline을 삽입할지 여부
  • trim_trailing_whitespace:  newline 문자 앞에 공백을 제거할지 여부

Babel

Babel은 ES6 이상의 자바스크립트 그 이전 버전의 자바스크립트로 코드를 변경시켜주는 컴파일러입니다. 이를 통해 오래된 브라우저 환경에서도 새로운 기능을 사용할 수 있도록 해줍니다. 또한 core-js 라이브러리를 통해 새로운 기능의 polyfill을 제공하기도 합니다. Babel은 사용자가 오래된 브라우저에서 접근할 수도 있다면 필수적인 툴입니다. 

컴파일와 트랜스파일?
Babel은 공식 페이지에서 컴파일러라고 소개하고 있습니다. 이는 틀린 말은 아니지만, 트랜스파일러라고 하는게 더 명확할 것 같습니다. 컴파일은 하나의 언어를 다른 언어로 변화시키는 작업을 의미합니다. 트랜스파일은 하나의 언어를 비슷한 추상화를 가진 다른 언어로 변환하는 것을 의미합니다. 트랜스파일은 컴파일보다 좁은 개념이라고 볼 수 있겠습니다. Babel의 경우 es6 이상의 자바스크립트 코드를 es5 자바스크립트 코드로 변환하는 것으로, 트랜스파일러라고 하는 것이 조금 더 명확하다고 봅니다.

Babel은 .babelrc 파일을 이용해 설정할 수 있습니다.

{
  "presets": ["@babel/preset-env"]
}

우선은 간단히 preset만 정의하고, 추후 프로젝트를 진행하면서 파일을 수정할 수 있도록 했습니다. preset은 미리 설정된 것으로, babel에서 미리 최신 자바스크립트를 사용하는데 필요한 모든 것을 정의한 것입니다. 

 

 

마무리

이번에는 프로젝트에서 큰 도움이 되는 tool들에 대해서 알아봤습니다. Eslint와 babel의 경우 설정 옵션들이 매우 복잡하고 어려운 부분이 있어서 볼 때마다 헷갈리기 때문에 잘 알아두는 편이 좋을 것 같습니다.

 

정리 

  • Eslint는 코드 에러 검출, 포매팅을 도와주는 린터 툴이다.
  • Editorconfig는 여러 에디터에서 동일한 코드 스타일을 유지할 수 있도록 도와주는 툴이다.
  • Babel은 자바스크립트 컴파일러로, 오래된 브라우저 환경을 지원하고자 한다면 필수적인 툴이다.

 

 

티스토리툴바