Parcel & ESLint

Bundler에 대한 개념을 알기 전 Module에 대해 먼저 알아보자! 최근 JavaScript 개발에서 절대 빠지지 않는 용어 중 하나는 Module이다. JavaScript 파일을 기능 단위로 모듈화 하고 이것을 하나로 묶어 관리할 방법이 필요할 때 Bundler를 사용한다.

Module

예전 개발 방식인 페이지 별로 JavaScript를 분리하고 HTML에서 로드하는 방식은 서로 의존성이 있는 코드 사이에서 순서를 보장하기 어려워 일부 파일로 인해 전체 스크립트를 실행하지 못하는 경우가 있었다. 하지만 이러한 문제를 해결하기 위해 모듈 단위의 개발이 등장하게 되었고, 모듈 단위 스코프를 지원하지 않은 브라우저 환경을 위해 다양한 모듈 포맷이 등장하게 되었다.

Bundler

Bundler는 의존성이 있는 모듈 코드를 하나(또는 여러 개)의 파일로 만들어 주는 도구이다. 브라우저 환경에서 CommonJS나 일부 ES6 Module로 작성된 코드는 바로 실행할 수가 없으므로 자바스크립트 모듈 스팩에 따라 새로운 코드로 가공이 필요하다. 호환하려는 브라우저 환경에서 잘 실행될 수 있게 가공시켜주는 것을 Bundler의 역할이다.

Parcel

다른 애플리케이션 번들러보다 조금 더 간단히 모듈을 사용할 수 있어 편리하며, 내부에서 최초 빌드 후 두 번째 빌드부터 캐싱을 지원하여 매우 빠르다.

Lint(린트)

Lint란 소스 코드를 분석하여, 각 언어에 맞춰 프로그램 오류, 버그, 스타일 오류, 의심스러운 구도체에 표시를 하기 위한 도구이다.

ESLint

ESLint는 JavaScript, JSX의 정적 분석 도구로 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성되도록 도움을 줍니다. ESLint는 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰이고 있는 추세다.