Meta tags:
description=프런트엔드 개발의 새로운 기준;

Headings (most frequently used words):

vite, api, 프로젝트, 커뮤니티, 루트, 시작하기, 소개, 가이드, 환경, 들어가기, 전에, 지원하는, 브라우저, 온라인에서, 체험해보기, 만들어보기, 템플릿, 수동, 설치, index, html, 그리고, 프로젝트의, 커맨드, 라인, 인터페이스, 릴리스되지, 않은, 사용하기, 지정,

Text of the page (most frequently used words):
vite (70), bash (26), 있습니다 (21), npm (18), pnpm (16), vue (15), 프로젝트 (14), vite는 (14), vite를 (11), create (11), yarn (10), bun (9), html (9), https (8), deno (8), api (8), add (7), index (7), 플러그인 (7), sha (6), new (6), 프로젝트를 (6), template (6), github (5), 주세요 (5), 사용할 (5), build (5), pkg (5), dev (5), 파일을 (5), javascript (5), project (5), app (5), 커뮤니티 (4), 합니다 (4), vite가 (4), 릴리스 (4), install (4), 사용하기 (4), npx (4), 코드를 (4), 가능합니다 (4), 다음과 (4), qwik (4), solid (4), svelte (4), lit (4), preact (4), react (4), vanilla (4), 가이드 (4), page (3), 사용해야 (3), link (3), run (3), com (3), 하나로 (3), 자세한 (3), 커맨드 (3), cli (3), 명령을 (3), preview (3), 제공하는 (3), 싶다면 (3), 내에서 (3), 다양한 (3), module (3), 프로젝트의 (3), user (3), 템플릿을 (3), stackblitz (3), 인터랙티브 (3), 프로덕션 (3), 제공합니다 (3), 시작하기 (3), discord (2), overrides (2), 디펜던시 (2), 이동해 (2), 링크할 (2), 패키지 (2), 사용하세요 (2), 서버를 (2), package (2), for (2), this (2), vitejs (2), git (2), 참고로 (2), 기능을 (2), 인터페이스 (2), 옵션을 (2), 설치된 (2), production (2), serve (2), json (2), 기본적으로 (2), vite에서 (2), 같습니다 (2), 시작할 (2), 위치해 (2), 디렉터리를 (2), 지원하고 (2), http (2), 서버와 (2), 이름으로 (2), 있도록 (2), 작성된 (2), css (2), script (2), type (2), 파일이 (2), 이렇게 (2), 번들링 (2), 그리고 (2), 확인할 (2), 설치할 (2), tiged (2), 템플릿 (2), github에 (2), main (2), 온라인에서 (2), 체험해 (2), 도구입니다 (2), 프레임워크를 (2), awesome (2), vite의 (2), 프롬프트 (2), 생성하려면 (2), 내용은 (2), 참고해 (2), init (2), latest (2), node (2), 설정을 (2), 섹션을 (2), baseline (2), 브라우저가 (2), 런타임 (2), 지원하는 (2), 프레임워크 (2), 프로젝트에 (2), hmr (2), viteconf (2), navigation (2), فارسی (2), deutsch (2), português (2), español (2), 日本語 (2), 简体中文 (2), english (2), 한국어 (2), 2019, present, voidzero, inc, and, contributors, fc9ab719, next, pager, 페이지, 수정하기, 질문이나, 도움이, 필요하다면, 방문해주세요, discussions, 디펜던시에서, 간접적으로, 사용되는, 버전을, 교체하려면, 사용하는, 어떻게, 릴리스되는지, 알아보려면, 문서를, 확인해, 프로젝트로, 실행하세요, 전역으로, 사용한, 매니저를, 시작하면, 사항을, use, your, preferred, manager, step, packages, clone, 머신에, 클론한, 빌드하고, 필요합니다, 리포지토리, 대체해, 이내의, 커밋에, 대해서만, 동작하며, 릴리스는, 삭제됩니다, 테스트하기, 릴리스까지, 기다릴, 없다면, 커밋을, 설치하는, 방법도, 릴리스되지, 정보는, 문서에서, 다루고, cli와, 보고자, 한다면, 안에서, 실행해주세요, help, open, port, locally, start, server, aliases, scripts, 프로젝트는, 실행할, 이용해도, 되구요, 스크립트는, 아래와, 루트로, 가정하고, 동작합니다, 지정해, 루트로써, 동작하게끔, 명령으로, 시작해주세요, 확인하기에, 루트가, 변경된다면, 파일도, 옮겨줘야, config, some, sub, dir, 진입점으로, multi, apps, static, 비슷하게, 디렉터리, 개념을, 되는데, absolute, url이, 루트를, 가리키게, 하므로, 일반적인, 동일하게, 작성할, 외부에서도, 디펜던시를, 가져올, 구현했는데, 이용하면, 모노리포, 작업이, root, 코드이자, 그래프를, 구성하는, 취급하고, 다시말해, 태그를, 이용해, 가져온다는, 의미이며, 인라인으로, 취급이, 추가적으로, 존재하는, url에, 표시자, url, 베이스를, 자동으로, 맞춰줍니다, public_url, href, src, 만들어진, 유심히, 디렉터리가, 루트에, 있다는, 발견할, 의도적으로, 위치시킨, 것인데, 추가적인, 진입점이, 되게끔, 위함입니다, public, localhost, 5173, bunx, 터미널에서, 실행합니다, hello, 생성해주세요, cli를, 도구를, 사용해, 스캐폴딩할, 프로젝트가, 브랜치가, 이라고, 가정하면, 사본을, 템플릿이, 호스팅되어, 있다면, 접속해, url의, 뒷부분에, 붙여주세요, 프레임워크로, 기반으로, 빠르게, 외에도, 도구와, 타겟으로, 템플릿들을, templates, 플래그를, interactive, 디렉터리에, 지원되는, 템플릿에, extra, double, dash, needed, 이름이나, 사용하려는, 지정할, 만들고, 입력해주세요, 옵션과, 요구합니다, 템플릿의, 버전의, js를, 요구할, 있으니, 관리자에서, 경고가, 표시되면, 업그레이드해, 호환성, scrimba에서, 강의를, 시청하세요, 이후에는, 출력된, 메시지를, 따라주세요, 만들어보기, typescript, 템플릿은, 온라인으로, 구성하기, 필요한, 설정들을, 브라우저에서, 실행하므로, 환경과, 유사하며, 컴퓨터에, 어떠한, 필요가, 없습니다, 선택해, 시작해보세요, 체험해보기, 빌드의, widely, available, 브라우저를, 타깃으로, 이전에, 릴리스된, 브라우저들을, 의미합니다, 타깃은, 있으며, 레거시, 브라우저는, 플러그인인, 지원이, plugin, legacy, 사용된다고, 가정합니다, javascript와, 대부분을, 지원한다는, 뜻입니다, 따라서, 다운레벨링을, 피하고, 코드에, 최대한, 가까운, 형태로, 모듈을, 제공할, 서버가, 동작하도록, 주입합니다, 코드는, 메이저, 메이저는, 2026, newly, available에, 포함된, 사용합니다, 타깃을, esnext, 브라우저, scrimba의, 튜토리얼로, 배워보세요, 만들게, 되었는지, 참고해주세요, 타입이, 완벽하게, 제공되는, 확장성을, 합리적인, 자세히, 알아보세요, 지원이나, 도구와의, 통합은, 에서는, 필요에, 적용하는, 방법을, 설명합니다, 번들링하고, 프로덕션을, 고도로, 최적화된, 에셋을, 출력하도록, 구성된, rolldown, 서버로, 놀라울, 정도로, hot, replacement, 네이티브, 프랑스어로, 빠르다, 뜻하며, veet, 발음합니다, 빠르고, 가벼운, 경험을, 목표로, 부분으로, 구성됩니다, viːt, 들어가기, 다시보기, 2025, 만들기, 인스턴스, 레퍼런스, v7에서, 마이그레이션하기, 트러블슈팅, 백엔드, 프레임워크와, 렌더링, ssr, 변수와, 페이지로, 배포하기, 버전으로, 빌드하기, 가져오기, 기능들, sidebar, return, top, menu, appearance, ctrl, search, 기여하기, mastodon, bluesky, 다큐멘터리, 레지스트리, 감사의, 블로그, 리소스, skip, content, alpha, 차세대,

Text of the page (random words):
시작하기 vite vite alpha 발표 오픈 소스 통합 차세대 skip to content main navigation 가이드 설정 플러그인 리소스 vite 팀 블로그 릴리스 감사의 말 플러그인 레지스트리 다큐멘터리 bluesky mastodon x discord 채팅 awesome vite viteconf dev 커뮤니티 v8 0 13 변경 사항 기여하기 vite 8 문서 릴리스 vite 7 문서 vite 6 문서 vite 5 문서 vite 4 문서 vite 3 문서 vite 2 문서 search ctrl k 한국어 english 简体中文 日本語 español português deutsch فارسی appearance 한국어 english 简体中文 日本語 español português deutsch فارسی menu return to top sidebar navigation 소개 시작하기 프로젝트 철학 vite를 사용해야 하는 이유 가이드 지원하는 기능들 cli 플러그인 사용하기 사전 번들링 된 디펜던시 에셋 가져오기 프로덕션 버전으로 빌드하기 정적 웹 페이지로 배포하기 vite의 환경 변수와 모드 서버 측 렌더링 ssr 백엔드 프레임워크와 함께 사용하기 트러블슈팅 성능 v7에서 마이그레이션하기 주요 변경 사항 api 플러그인 api hmr api javascript api vite 설정 레퍼런스 환경 api 환경 api 환경 인스턴스 플러그인 프레임워크 런타임 on this page 함께 만들기 viteconf 2025 다시보기 시작하기 들어가기 전에 vite 프랑스어로 빠르다 를 뜻하며 viːt veet 처럼 발음합니다 는 모던 웹 프로젝트에 더 빠르고 가벼운 개발 경험을 제공하는 것을 목표로 하는 빌드 도구입니다 크게 두 부분으로 구성됩니다 네이티브 es 모듈 을 통해 소스 파일을 제공하는 개발 서버로 다양한 기능 과 놀라울 정도로 빠른 hot module replacement hmr 를 제공합니다 rolldown 으로 코드를 번들링하고 프로덕션을 위한 고도로 최적화된 정적 에셋을 출력하도록 미리 구성된 빌드 명령 vite는 합리적인 기본 설정을 제공합니다 기능 가이드 에서 더 자세히 알아보세요 프레임워크 지원이나 다른 도구와의 통합은 플러그인 을 통해 가능합니다 vite 설정 가이드 에서는 필요에 따라 프로젝트에 vite를 적용하는 방법을 설명합니다 또한 vite는 타입이 완벽하게 제공되는 플러그인 api 와 javascript api 를 통해 높은 확장성을 제공합니다 왜 vite를 만들게 되었는지 알고 싶다면 vite를 사용해야 하는 이유 섹션을 참고해주세요 scrimba의 인터랙티브 튜토리얼로 vite를 배워보세요 지원하는 브라우저 개발 중 vite는 모던 브라우저가 사용된다고 가정합니다 이는 브라우저가 최신 javascript와 css 기능 대부분을 지원한다는 뜻입니다 따라서 vite는 변환 타깃을 esnext 로 설정 합니다 이렇게 하면 문법 다운레벨링을 피하고 vite가 원본 소스 코드에 최대한 가까운 형태로 모듈을 제공할 수 있습니다 vite는 개발 서버가 동작하도록 일부 런타임 코드를 주입합니다 이 코드는 각 메이저 릴리스 시점 이번 메이저는 2026 01 01 에 baseline newly available에 포함된 기능을 사용합니다 프로덕션 빌드의 경우 vite는 기본적으로 baseline widely available 브라우저를 타깃으로 합니다 최소 2 5년 이전에 릴리스된 브라우저들을 의미합니다 이 타깃은 설정을 통해 더 낮출 수 있으며 레거시 브라우저는 공식 플러그인인 vitejs plugin legacy 를 통해 지원이 가능합니다 이에 대한 더 자세한 내용은 프로덕션 빌드 섹션을 참고해 주세요 온라인에서 vite 체험해보기 stackblitz 에서 vite를 온라인으로 체험해 볼 수 있습니다 vite를 구성하기 위해 필요한 설정들을 브라우저에서 직접 실행하므로 로컬 환경과 매우 유사하며 컴퓨터에 그 어떠한 것도 설치할 필요가 없습니다 vite new template 으로 이동해 사용할 프레임워크를 선택해 시작해보세요 현재 지원하고 있는 템플릿은 다음과 같습니다 javascript typescript vanilla vanilla ts vue vue ts react react ts preact preact ts lit lit ts svelte svelte ts solid solid ts qwik qwik ts 첫 vite 프로젝트 만들어보기 npm yarn pnpm bun deno bash npm create vite latest bash yarn create vite bash pnpm create vite bash bun create vite bash deno init npm vite 이후에는 프롬프트 창에 출력된 메시지를 따라주세요 scrimba에서 인터랙티브 강의를 시청하세요 호환성 참고 사항 vite는 node js 20 19 또는 22 12 를 요구합니다 다만 일부 템플릿의 경우 더 높은 버전의 node js를 요구할 수 있으니 패키지 관리자에서 경고가 표시되면 업그레이드해 주세요 create vite를 커맨드 라인 옵션과 함께 사용하기 프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수도 있습니다 예를 들어 vite vue 프로젝트를 만들고 싶다면 다음과 같이 입력해주세요 npm yarn pnpm bun deno bash npm 7 extra double dash is needed npm create vite latest my vue app template vue bash yarn create vite my vue app template vue bash pnpm create vite my vue app template vue bash bun create vite my vue app template vue bash deno init npm vite my vue app template vue 지원되는 각 템플릿에 대한 자세한 내용은 create vite 를 참고해 주세요 vanilla vanilla ts vue vue ts react react ts preact preact ts lit lit ts svelte svelte ts solid solid ts qwik qwik ts 현재 디렉터리에 프로젝트를 생성하려면 프로젝트 이름으로 을 사용하세요 인터랙티브 프롬프트 없이 프로젝트를 생성하려면 no interactive 플래그를 사용할 수 있습니다 커뮤니티 템플릿 create vite는 인기 있는 프레임워크로 작성된 템플릿을 기반으로 프로젝트를 빠르게 시작할 수 있는 도구입니다 이 외에도 awesome vite의 templates 항목 에서 다양한 도구와 프레임워크를 타겟으로 하는 커뮤니티 템플릿들을 확인할 수 있습니다 템플릿이 https github com user project 와 같이 github에 호스팅되어 있다면 https github stackblitz com user project 로 접속해 온라인에서 템플릿을 체험해 볼 수 있습니다 프로젝트 url의 github 뒷부분에 stackblitz 를 붙여주세요 tiged 같은 도구를 사용해 템플릿 중 하나로 프로젝트를 스캐폴딩할 수도 있습니다 프로젝트가 github에 있고 기본 브랜치가 main 이라고 가정하면 다음과 같이 로컬 사본을 만들 수 있습니다 bash npx tiged user project my project cd my project npm install npm run dev 수동 설치 프로젝트 내에서 vite cli를 설치할 수 있습니다 npm yarn pnpm bun deno bash npm install d vite bash yarn add d vite bash pnpm add d vite bash bun add d vite bash deno add d npm vite 그리고 다음과 같이 index html 파일을 생성해주세요 html p hello vite p 이후 아래 cli 명령을 터미널에서 실행합니다 npm yarn pnpm bun deno bash npx vite bash yarn vite bash pnpm vite bash bunx vite bash deno run a npm vite 이제 http localhost 5173 에서 index html 파일을 확인할 수 있습니다 index html 그리고 프로젝트의 루트 만들어진 vite 프로젝트를 유심히 보면 index html 파일이 public 디렉터리가 아닌 프로젝트의 루트에 위치해 있다는 것을 발견할 수 있습니다 의도적으로 이렇게 위치시킨 것인데 추가적인 번들링 과정 없이 index html 파일이 앱의 진입점이 되게끔 하기 위함입니다 vite는 index html 파일을 소스 코드이자 javascript 모듈 그래프를 구성하는 요소 중 하나로 취급하고 있습니다 다시말해 script type module src 태그를 이용해 javascript 소스 코드를 가져온다는 의미이며 인라인으로 작성된 script type module 이나 link href 와 같은 css 역시 vite에서 취급이 가능합니다 추가적으로 vite는 index html 내에 존재하는 url에 대해 public_url 과 같은 자리 표시자 없이 사용할 수 있도록 url 베이스를 자동으로 맞춰줍니다 vite는 정적 static http 서버와 비슷하게 루트 디렉터리 라는 개념을 갖고 있습니다 향후 root 라는 이름으로 문서 내에서 보게 되는데 이는 absolute url이 프로젝트 루트를 가리키게 하므로 일반적인 정적 파일 서버와 동일하게 코드를 작성할 수 있습니다 또한 vite는 프로젝트 루트 외부에서도 디펜던시를 가져올 수 있도록 구현했는데 이를 이용하면 모노리포 구성 등 다양한 작업이 가능합니다 또한 vite는 여러 html 파일을 앱의 진입점으로 하는 multi page apps 를 지원하고 있습니다 프로젝트 루트 지정 vite 은 개발 서버를 시작할 때 현재 위치해 있는 디렉터리를 프로젝트 루트로 가정하고 동작합니다 만약 특정 디렉터리를 지정해 프로젝트 루트로써 동작하게끔 하고 싶다면 vite serve some sub dir 명령으로 vite를 시작해주세요 참고로 vite는 프로젝트 루트 내에서 설정 파일 vite config js 을 확인하기에 프로젝트 루트가 변경된다면 해당 파일도 함께 옮겨줘야 합니다 커맨드 라인 인터페이스 vite가 설치된 프로젝트는 vite 명령을 통해 바로 vite를 실행할 수 있습니다 npx vite 을 이용해도 되구요 기본적으로 vite에서 제공하는 npm 스크립트는 아래와 같습니다 package json json scripts dev vite start dev server aliases vite dev vite serve build vite build build for production preview vite preview locally preview production build vite cli와 함께 port open 와 같은 옵션을 사용할 수 있습니다 모든 cli 옵션을 보고자 한다면 vite가 설치된 프로젝트 안에서 npx vite help 명령을 실행해주세요 좀 더 자세한 정보는 커맨드 라인 인터페이스 문서에서 다루고 있습니다 릴리스되지 않은 vite 사용하기 최신 기능을 테스트하기 위해 새 릴리스까지 기다릴 수 없다면 https pkg pr new 를 통해 특정 vite 커밋을 설치하는 방법도 있습니다 npm yarn pnpm bun bash npm install d https pkg pr new vite sha bash yarn add d https pkg pr new vite sha bash pnpm add d https pkg pr new vite sha bash bun add d https pkg pr new vite sha sha 를 vite 커밋 sha 중 하나로 대체해 주세요 참고로 한 달 이내의 커밋에 대해서만 동작하며 그 이후 커밋 릴리스는 삭제됩니다 또는 vite 리포지토리 를 로컬 머신에 클론한 다음 이를 직접 빌드하고 링크할 수도 있습니다 pnpm 이 필요합니다 bash git clone https github com vitejs vite git cd vite pnpm install cd packages vite pnpm run build pnpm link use your preferred package manager for this step 그런 다음 vite 기반 프로젝트로 이동해 pnpm link vite 를 실행하세요 또는 vite 를 전역으로 링크할 때 사용한 패키지 매니저를 사용하세요 이제 개발 서버를 다시 시작하면 최신 변경 사항을 사용할 수 있습니다 vite가 어떻게 언제 릴리스되는지 더 알아보려면 릴리스 문서를 확인해 주세요 vite를 사용하는 디펜던시 디펜던시에서 간접적으로 사용되는 vite 버전을 교체하려면 npm overrides 또는 pnpm overrides 를 사용해야 합니다 커뮤니티 질문이나 도움이 필요하다면 discord 또는 github discussions 에 방문해주세요 이 페이지 수정하기 pager next page 프로젝트 철학 2019 present voidzero inc and vite contributors fc9ab719