반응형 FE/vite6 [vite] 프론트엔드 개발자를 위한 Vite 101 🧑🏭️ Vite 는 Esbuild + Rollup 으로 만들어진 차세대 프론트엔드 개발 도구입니다. vite 는 프론트엔드 개발환경에 필요한 config 를 모두 제공하고있는 빠르고, 간단한 no-configuration 툴입니다. 기존의 번들러 기반의 도구들은, 개발서버를 다시 시작할 때 콜드 스타트를 합니다. 이렇게 되면 모든 소스코드에 대한 크롤링과 빌드작업이 필요하며, 프로젝트 규모가 커진다면 개발 서버를 가동하는데 비합리적으로 오랜 시간이 걸립니다. vite 는 모듈을 dependencies 와 source code 두 카테고리로 나누어 이문제를 해결하였습니다. (1) Dependencies 는 다운받은 외부 패키지입니다. 즉, node_modules 패키지들을 말하는데, 이것들은 개발자가 변.. 2023. 10. 10. vite 환경변수 번들링 도구에는 개발환경과 배포환경의 차이가 있고, 그것들을 환경변수로 관리를 합니다. vite 에서는 import.meta 에 추가적으로 변수를 삽입합니다. import.meta.env dotenv vite는 추가적인 환경변수를 불러오는 dotenv를 내장해서 사용하고있습니다. .env # 모든 케이스에서 로딩 .env.local # 모든 케이스에서 로딩되지만 git에 추가되지 않습니다. .env.[mode] # 특정 모드에서만 로딩 .env.[mode].local # 특정 모드에서만 로딩되지만 git에 추가되지 않습니다. - 여기서 .env.production 은 최우선 순위입니다. - 또한 기존의 환경변수를 .env 에서 정의한 변수가 덮어써지 않습니다. - .env 파일은 vite 서버 실행시 한.. 2023. 1. 13. vite 빌드하기 여러 플랫폼 static site 배포 메뉴얼 간단하게 배포 서비스 이용하기 브라우저 호환성 vite는 기본적으로 각 브라우저별로 아래 버전을 지원합니다. Chrome >=87 Firefox >=78 Safari >=14 Edge >=88 호환을 커스터마이징 하고 싶다면 빌드옵션을 수정해줍니다. 주의할 점은 문법만 호환에 맞게 하는 것일 뿐 polyfill 은 직접 해야합니다. 이는 플러그인으로 설정해 줄 수 있습니다. Multi-Page App 단순히 html 파일을 구분하면 되지만 빌드시에는 하나로 합쳐지기 때문에 vite.config.js에서 entry points를 명시해주어야합니다. Library Mode 제가 가장 마음에 들었던 부분입니다. 라이브러리를 개발하기위해서, 개발환경을 세팅하지만, .. 2023. 1. 9. vite 가 CSS, Static Assets, JSON, Dynamic Imports를 처리하는 방법 Client Types vite는 기본값으로 nodeJS API 타입을 참조합니다.(실제 개발환경이 브라우저가 아니기 때문에) 하지만 결국 브라우저에서 동작하는 코드를 작성하기 때문에 d.ts 파일을 만들어 아래 코드를 작성해줘야 합니다. /// 이로써 얻는 효과는 1. asset 을 import 할 때 린트가 발생하지 않습니다. (e.g .svg, .png ...) 2. import.data.env 타입을 제공해줍니다. 3. import.meta.hot 타입을 제공해줍니다. 아래와 같이 타입선언을 덮어쓸 수 있습니다. " /// "이전에 해주어야합니다. declare module '*.svg' { const content: React.FC export default content } /// CSS 1... 2023. 1. 9. vite의 module 처리와 typescript 설정 살펴보기 NPM Dependency 설치 및 Pre-Bundling 브라우저에서도 es module system 을지원하고 있고, vite는 이방식을 사용하고 있습니다. 하지만 아래 코드와같이 브라우저 상에서는 npm 모듈을 임포트할 수 없습니다. node 환경이 아니기 때문에 인식조차 할 수 없기 때문입니다 예시로 dayjs 라이브러리를 루트dir에서 설치하고 브라우저에서 import 해본 결과입니다. import dayjs from 'dayjs' console.log(dayjs) 왼쪽은 vite dev 결과이고, 오른쪽은 html파일을 그대로 열었을 때 입니다. 이는 vite 가해주는 역할 덕분입니다. 1. 설치된 commonJS/UMD 모듈을 ESM으로 변경합니다. 2. esbuild를 사용하여 변환한 모듈.. 2023. 1. 9. Vite로 개발환경 만들기 vite, webpack 등은 웹개발 번들링 툴입니다. Vite vs Webpack 비교적 신생 vite 가 webpack 보다는 수치상으로는 당연히 뒤처질수 밖에 없다고생각합니다만 저도 webpack 한참 공부하고, 또 vite 공부해야되? 라는 생각에 거부감이 좀 있었지만, 틈틈히 사용해보면서 webpack 보다 간편하고 빠른 사용경험을 했고, 충분히 공부할 가치가 있다고 생각했습니다. vite를 써야하는 이유 풍부한 템플릿 1. CLI - 커맨드라인으로 선택하면서 간편히 구성할 수 있습니다. npm create vite@latest 2. template - 옵션으로 바로 완성된 템플릿을 불러 올 수 있습니다. 3. 커뮤니티 템플릿 - 공식으로 제공하는 템플릿 외 커뮤니티에서는 더 많은 개발환경 세팅.. 2023. 1. 8. 이전 1 다음 반응형
