[ JS ] Babel & EsLint

728x90

0. 개요

js에 대한 깊은 이해를 통해 최적의 성능을 낼 수 있는 웹애플리케이션 개발을 위해 개발언어로서 JS의 기본을 공부하기로 했습니다. js의 기초에 이어 js개발에 도움을 주는 프레임워크인 Babel 과 EsLint를 공부했습니다.

1. 학습목적

Babel과 EsLint의 필요목적

Babel과 EsLint의 동작원리 및 이용

2. 학습내용

1) Babel

Babel은 자바스크립트 컴파일러로, 최신 버전의 js로 작성된 코드들을 하위버전의 브라우저가 읽을 수 있도록 변환해주는 역할을 합니다.

2) Babel을 사용하는 이유

js는 여러 버전들이 존재하는데, 표준화된 버전부터 따져보자면 1997년에 출시한 ES1을 시작으로 현재 ES9까지 출시되어 있습니다.

특히 ES6 이후 개발자들의 입장에서 유용하게 사용될 수 있는 문법들이 추가되었는데, 아래의 문법들이 이에 해당합니다:

arrow function ( () => {} )
classes ( contructor, 상속구현 등 )
object literal ( key값과 변수명이 같으면 value값 생략 가능 ( ex: { user: user } => { user } ) )
Template String ( '`' & '${}'의 사용 )
destructuring ( 객체에서 일부 데이터만 추출하여 사용 가능 )
let & const ( 변수 선언자 추가 )

3) polyfill

영어로 '충전솜'이란 의미를 가지고 있는데, 웹에서는 "브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인"을 의미한다고 합니다.

폴리필에는 core.js / polyfill.io 등이 있으며, Babel에서는 babel-polyfill이라는 프레임워크(?)를 사용해주면 됩니다. 다만, 별도의 설정이 필요하다고 합니다. (하단 참고)

https://babeljs.io/docs/en/babel-polyfill/

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

4) ESLint

ES(EcmaScript)의 보푸라기를 잡아내는 린터 (linter)입니다. 다시말해 자바스크립트 문법에서 에러가 있는것으로 판단되는 곳에 표시를 해서 개발자에게 알려주는 도구입니다. 또한 개발자가 일관된 코드 스타일을 유지할 수 있도록 코드를 만들어 주기도 한다고 합니다.

사실 린터의 종류는 여러가지이지만, 그중에서도 ESLint가 가장 유명하고 많이 쓰이는 이유는 확장성이 좋기 때문입니다.

다양한 플러그인을 쉽게 사용할 수 있고, 이 덕분에 새로운 규칙을 추가하거나 기존에 다른 회사에서 사용중이던 코드스타일을 쉽게 적용하는 것이 가능합니다.

5) ESLint: 사용법

정의하고, 검사하라고 시키면 됩니다. 그러기 위해선 어떻게 정의하는지, 어떻게 검사하는지 알아야겠죠.

ESLint를 정의하기 위해 우선 eslint를 설치해야 합니다. 일반적인 패키지처럼 설치하면 됩니다. 만약 특정 회사의 코딩 스타일을 적용하고 싶다면 함께 설치하세요.

npm install -g eslint

이제 규칙을 정의를 하면 됩니다. 이 규칙은 .eslintrc라는 파일에 담습니다. 작성형식은 json 입니다.

// Reference: https://www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2
{
  "parserOptions": { // js 버전 정의
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "extends": "airbnb-base", // 타사 코딩 스타일 적용 ("예시: airbnb")
  "env": { // 프로젝트의 사용 환경 설정
    "browser": true,
    "node": true
  },
  "rules": { // "extends" or "plugins"의 세부 설정 변경
    "max-length": 0 // 0: 에러 무시 | 1: 경고 | 2: 에러
  },
  "plugins": ['import'], // 플러그인 적용 (ex: html / import / jsx-a11y / react)
  "globals": { // 전역변수 ( ESLint에서 전역변수는 에러로 간주 => 예외처리를 위해 사용 )
    // ex: jQuery
    "jQuery": true,
    "$": true
  }
}

하지만 모든 파일을 검사한다면 원하는 문법을 정상적으로 사용하지 못할 수도 있습니다. 그래서 다음과 같은 방법들을 사용하여 검사를 제외시킬 수도 있습니다.

// 1. 필터링할 내용을 한 파일에서 정의 (.eslintignore)

/node_modules/** // -> /node_modules 내의 파일들 검사 제외


// 2. 코딩 중 특정 부분만 예외처리

/* eslint-disable */ // 다음줄부터 문서 끝까지 검사하지 않음
/* eslint-enable */ // 다음줄부터 문서 끝까지 검사함


// 3. 다음줄만 예외처리
/* eslint-disable-next-line */ // 다음줄 1줄만 검사를 건너뜀