[Vite, ESLint, Prettier] Vite와 ESLint, Prettier를 사용해야 하는 이유
🚀 들어가며
프로그래머스 데브코스 강의를 듣던 중 Vite, ESlint, Prettier를 알게 되었다. Vite를 활용하면 빠르게 개발 환경을 세팅할 수 있다는 것은 알고 있었다. 하지만 ESLint, Prettier의 경우 왜 이런거까지 자세히 알아야 할까하는 의문이 들었다.
내가 프론트엔드 개발자가 매력적이라고 생각하는 이유는 머릿속의 창의적 발상들을 눈에 보이는 화면에 직접 표현할 수 있다는 점이었고, 그렇기 때문에 개발 단계에서의 부수적 요소라고 생각되는 ESLint, Prettier를 굳이 자세히 알 필요가 있을까라는 생각이 들었던 것이다.
하지만 강의를 듣고, 멘토님과의 커피챗 이후 ESLint와 Prettier를 알고 있다면 이후에 실무에서 협업하면서 많은 도움이 될 것이라는 깨달음을 얻었고, 그것들이 무엇인지 포스팅을 하며 공부하기로 결심했다.
✅ Vite
▪︎ Vite란?
비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다"를 의미하여 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.
Vite는 크게 두 가지 역할을 한다.
- Dev server : 개발 환경에서 HMR(Hot Module Replacement: 모듈 전체를 다시 로드하지 않고 앱이 실행되는 동안 교환, 추가, 제거 함) 개발용 서버 기능
- Build : Production 배포를 위한 소스코드 번들링 기능
Webpack 역시 모듈 번들링을 하는 빌드 툴이면서 Dev server 기능을 제공해주고 있지만, Vite는 이를 한층 더 업그레이드한 버전이라고 보면 된다.
▪︎ ESM(ECMAScript Modules)
ESM은 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해낼 수 있는 모듈 방식이다.
html 파일의 script 태그의 속성 값으로 type="module"을 추가하면 import, export 키워드를 사용해서 웹팩과 같은 번들러 없이도 브라우저에서 실행이 가능하다.
▪︎ Vite의 Dev Server 속도
Vite의 가장 큰 특징 중 하나는 Dev Server에서 Native ESM을 사용하여 소스를 제공한다는 점이다.
Webpack과 같은 기존의 번들러에서는 모든 소스코드가 빌드되어서 한번에 번들링된 형태로 서비스를 제공했다면, Native ESM 기반 방식의 Vite에서는 번들링이 필요없고 브라우저에서 필요한 모듈의 소스코드를 import할 때 이것을 전달만 하면 되는 방식이다.
또한 Vite는 개발 시 내용이 자주 바뀌지 않을 Dependencies 모듈을 사전 번들링하는데 esbuild(Go언어로 만들어진 다른 JS 기반의 번들러보다 10~100배 빠른 속도의 번들러)를 사용한다.
Native ESM 기반 방식과 esbuild를 이용한 사전 번들링 방식의 Dev Server로 인해 서버 구동 속도와 HMR 속도가 엄청나게 빨라졌다.
무엇보다 HMR 속도가 빨라지다 보니 프론트 개발 시 브라우저에서 변경된 내용을 빠르게 확인할 수 있어서 정말 편리하다는 것을 알 수 있었다.
▪︎ Vite 사용하기
최신 버전의 Vite를 현재 폴더에서 사용하려면 터미널에 아래와 같은 명령어를 입력하면 된다.
npm create vite@latest .
✅ ESLint와 Prettier
▪︎ ESLint vs Prettier
ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 도와주지만, Prettier는 줄바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해준다. 즉, ESLint는 코드 퀄리티를 일관적으로 유지할 수 있게 도와주는 툴이고, Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴이다.
▪︎ ESLint
JavaScript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.
대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다. 하지만, 인터프리터 언어인 JavaScript에는 Linter가 내장되어 있지 않다. 따라서 런타임 환경에서 에러가 발생할 확률이 높다.
* Linter : 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위를 Lint라고 한다. Linter는 Lint의 동작을 도와주는 도구이다.
예를 들어, JavaScript에서의 함수를 정의할 때, 함수 표현식, 함수 선언문, 화살표 함수 등 다양한 방식으로 함수를 정의할 수 있다. ESLint를 사용하면 다양한 방식으로 구현할 수 있는 코드 방식을 일관성 있게 구현할 수 있도록 잡아줄 수 있다.
▪︎ Prettier
개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 자동으로 변환해주는 도구이다. 다른 말로 "코드 포맷터"의 역할을 한다고도 한다.
깔끔한 코드와 협업을 위해서는 일관성 있는 코드 스타일을 유지하는 것이 매우 중요하고, 따라서 Prettier와 같은 코드 포맷터는 협업에서 필수이다.
▪︎ ESLint와 Prettier 사용하기
프로젝트에 ESLint와 Prettier를 사용하기 위해 터미널에 아래와 같이 명령어를 입력하면 된다.
npm i -D eslint # ESLint 설치
npm i -D eslint-plugin-prettier # Prettier 규칙을 EsLint 규칙으로 추가
npm i -D eslint-config-prettier # Prettier와 충돌하는 EsLint 규칙을 끄기
npm i -D @typescript-eslint/parser # 타입스크립트용 EsLint 파서
npm i -D @typescript-eslint/eslint-plugin # 타입스크립트 관련 lint 규칙 처리 플러그인
npm i -D eslint-plugin-vue # Vue용 eslint 플러그인
그 후, 루트 폴더에 .eslintrc.json을 생성하여 ESLint 옵션을 지정해준다.
Prettier 옵션을 지정해주기 위해 루트 폴더에 .prettierrc를 생성한다.
모든 옵션을 지정하면 명령 팔레트에서 ESLint를 재부팅하면 정상적으로 적용이 된다.
🛸 마치며
이렇게 Vite를 통해 빠른 개발 환경을 세팅하는 법과 깔끔한 코드와 원활한 협업 툴 중 하나인 ESLint, Prettier를 학습할 수 있었다.
개발자에게 있어서, 특히나 프론트엔드 개발자에게 있어서 협업 능력이란 개발 역량만큼 중요하다는 것을 잘 알고 있다. 앞으로 팀 프로젝트 등에서 개발 이전에 코드 컨벤션을 논의하고 ESLint, Prettier의 여러 옵션을 지정하여 원활한 협업 환경이 구성될 수 있도록 노력해야겠다.
📚 참고 문서
https://analogcode.tistory.com/39