# 5.Parcel & ESLint ## Parcel 현재 나는 회사에서 프로젝트 구성으로 webpack을 사용하고 있는 중이다. 1주차 강의를 들으면서 이곳에서 parcel을 사용하기에 왜 parcel을 사용하는지 궁금하였다. 그래서 구글링을 통해서 검색한 블로그를 바탕으로 특징있는 부분만 요약하였다. `Parcel`은 설정이 필요없는 zero-configuration 이기 때문에, 빌드를 위해 번들러를 학습하는 시간을 많이 줄일 수 있다. `Webpack`에 비하면 이 부분은 큰 장점인 것 같다. `Webpack`을 사용하면서 일부 설정을 건드려야 하는 부분이 발생 했을 때 `Webpack` 공식문서가 잘 되어있지만 수정해야 하는 부분에 대한 설정 파악과 함께 써야 하는 `plugin` 종류도 많고 공식문서를 보고 작성했어도 내 이해의 한계로 인해서 잘 못 설정한 부분도 있었던 터라 `Parcel`의 설정이 필요없는 부분은 정말 매력적인 것 같다. ### Transformations * `Parcel`은 zero-configuration 특징으로 별도의 설정파일 없이 다양한 변환을 지원한다. ### Tree Shaking (Dead code elimination) * `Parcel`은 ES6및 CommonJS 모듈 모두에 대해 Tree shaking을 지원한다. 또한 대부분의 작업을 캐싱하여 다시 빌드할 경우 빠른 속도를 지니고 있다. ### Code splitting * `Parcel`의 Code splitting은 zero-configuration 이라는 특징으로 확인 할 수 있다. import() 함수 구문 을 사용하여 제어되며, 이는 일반 import 문이나 require 함수처럼 작동하지만 Promise를 반환한다. 이는 모듈이 비동기적으로 로드됨을 의미한다. ### Dev Server * `Parcel`은 Dev server가 내장되어 있고, 파일이 변경할 경우 다시 빌드 한다. ### Hot Module Replacement * `Parcel`은 기본적으로 HMR을 지원한다. * 이 기능은 코드가 실행되는 동안 전체 리로드를 할 필요없이 모듈을 추가, 제거 할 수 있는 기능을 이야기 한다. `Parcel`에서도 zero-configuration이라고 했지만 plugin을 제공해 소규모에서 대규모 애플리케이션까지 확장 가능하게 지원해주고 있다. *** * 참고 * [Parcel vs Rollup vs Webpack 비교](https://velog.io/@subin1224/Parcel-vs-Rollup-vs-Webpack-%EB%B9%84%EA%B5%90) * [Parcel 공식문서](https://parceljs.org/) *** ## ESLint `ESLint`는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트이다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다. JSLint, JSHint와 같이 다른 JavaScript 정적 분석 도구들도 있지만, `ESLint`가 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰이고 있는 추세이다. `ESLint`는 스타일 가이드를 좀 더 편리하게 적용하기 위해 사용하기도 하는데, 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide 가 그 대표적인 예이다. 현재 서비스 중인 프로젝트에서도 `ESLint`를 사용하고 있지만 혼자 작업을 하다보니 `Coding convention`이 제대로 지켜지지 않을 때가 많았다. `ESLint`가 있지만 내가 보기 편한 쪽으로 하기 위해서 린트를 꺼버리는 경우도 있었는데 앞으로는 특별한 경우가 아닌 이상 린트를 통해서 일관성 있는 코드를 작성하도록 노력해야겠다. *** * 참고 * [ESLint 조금 더 잘 활용하기](https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/) * [ESLint 공식문서](https://eslint.org/) *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://jin-11.gitbook.io/jin-devnote/week1/parcel-and-eslint.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.