vue3 부터는 vite 기반의 빌드 설정이 사용된다.
vuetify3 프로젝트를 시작하기 전에 vite가 무엇인지부터 알고 가면 좋을 것 같다.
프로젝트를 생성하기 전 vite가 무엇인지 알아보자~!
# Vite란?
Vite(비트)는 Vue 창시자 에반 유가 만든 프론트엔드 빌드 도구이다.
vite는 자바스크립트 네이티브 모듈(ESM)을 기반으로 한 데브 서버이다.
vite를 사용하면 기존에 사용되던 번들링 도구들(웹팩, 롤업 등)을 사용할 때 보다 훨씬 빠르게 개발 및 배포가 가능하다.
다른 프론트엔드 빌드 도구와 어떤 차이점을 가지는지 알아보면 vite에 대해 더 이해하기 쉬울 것 이다!
# 자바스크립트 네이티브 모듈(EMS)란?
EMS(ECMA Script Modules)의 공식문서 정의는 아래와 같다.
ECMAScript 모듈은 재사용을 위해 JavaScript 코드를 패키징하는 공식 표준 형식 입니다 . 모듈은 다양한 import및 export문을 사용하여 정의됩니다.
EMS는 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 지원하는 모듈 방식이다.
최신 브라우저는 기본적으로 모듈 기능을 지원하기 시작했고, 따라서 웹팩과 같은 모듈화 라이브러리를 사용하는 것보다 vite를 사용하면 더 효율적이고 빠른 실행이 가능하다.
# 기존 프론트엔드 빌드 도구와 vite의 차이(feat. 웹팩, webpack)
위에서 언급한 EMS가 등장하기 전까지는 자바스크립트 언어 레벨에서의 모듈화 방식이 없었다.
따라서 모듈화를 하기 위해선 RequireJS와 같은 CommonJS 와 AMD기반 모듈 시스템, 더 최근에는 Webpack과 Babel 같은 모듈 기반 시스템 등이 필요했다.
웹팩은 처음 로컬 서버를 실행할 때 모듈을 번들링하는 시간이 필요하다.
반면 비트는 번들링 없이 바로 서버를 실행하기 때문에 명령어 실행과 동시에 서버가 구동된다.
다음은 vuetify3 프로젝트 생성 방법으로 찾아오겠숩니당~~ ㅎㅎ
오랜만에 블로그에 글을 쓰는데,
누적 방문자가 1100명이고
일일 방문자가 55명에 달했다 ㅎㅎ
다시 열심히 써봐야지 히힣
읽어주셔서 감사합니다~~~🩷
'Vue' 카테고리의 다른 글
| Vue3 페이지 레이아웃 구성하는 2가지 방법 (2) | 2023.10.23 |
|---|---|
| Vue3에서 pdfmake로 pdf 문서 만들기(feat. Grunt, Typescript, 에러해결) (2) | 2023.10.16 |
| Vuetify3 SASS Variables를 활용한 Style Custom (0) | 2023.10.06 |
| Vue3 script setup 문법 (0) | 2023.09.22 |
| (1) Vite를 이용한 Vuetify3 Project 만들기(+typescript) - 프로젝트 생성 (1) | 2023.09.22 |
