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

Headings (most frequently used words):

환경, 모드, api, 상수, vite의, 변수와, 소개, 가이드, 내장, 변수, typescript를, 위한, 인텔리센스, html, 치환, env, 파일들, node_env, 그리고,

Text of the page (most frequently used words):
env (62), vite (30), 있습니다 (23), import (22), meta (20), #node_env (19), mode (18), development (14), production (13), vite는 (12), build (10), 변수를 (8), staging (7), api (7), 파일을 (6), dev (6), 플러그인 (6), local (6), 파일에서 (5), 합니다 (5), 않습니다 (5), 사용할 (5), importmetaenv (5), test (5), 123 (5), vite_some_key (5), process (4), 모드로 (4), vite_app_title (4), html (4), vite_ (4), foo (4), 변수는 (4), loaded (4), 프로덕션 (4), ssr (3), page (3), vite가 (3), 명령을 (3), 모드를 (3), true (3), false (3), prod (3), 기본적으로 (3), 실행할 (3), 동작을 (3), 싶다면 (3), 커스텀 (3), 변수가 (3), 지원합니다 (3), typescript (3), 않도록 (3), json (3), interface (3), string (3), 변수에 (3), 파일은 (3), 민감한 (3), 이러한 (3), 사용하기 (3), dotenv (3), vite_bar (3), 파일에 (3), bun (3), 코드에 (3), db_password (3), log (3), console (3), boolean (3), 중인지 (3), vite의 (3), 변수와 (3), 렌더링 (2), 페이지로 (2), 배포하기 (2), 사용하는 (2), 때문에 (2), 파일에서도 (2), 따라서 (2), 모드는 (2), 여전히 (2), 유의하세요 (2), 모드에 (2), 그리고 (2), app (2), 다음과 (2), 정의된 (2), 됩니다 (2), 명령으로 (2), 실행되는 (2), 동작하고 (2), 대해서는 (2), vite를 (2), 커뮤니티 (2), 존재하지 (2), 치환되지 (2), undefined (2), non_existent (2), 특수한 (2), 동작하지 (2), webworker (2), lib (2), tsconfig (2), readonly (2), 타입을 (2), 디렉터리 (2), 정의할 (2), 접두사가 (2), 인텔리센스 (2), 가능합니다 (2), 동작에 (2), javascript (2), 지원하는 (2), expand (2), bar (2), vite_foo (2), 역순으로 (2), 아래의 (2), foobar (2), key (2), 사용해야 (2), 참고하세요 (2), 모드별 (2), 변수로 (2), only (2), specified (2), ignored (2), git (2), all (2), cases (2), 변수에는 (2), 보호하기 (2), 백엔드 (2), 문자열로 (2), 접두사를 (2), 클라이언트에 (2), 다음을 (2), 번들링 (2), 노출합니다 (2), 여부입니다 (2), 상수들은 (2), viteconf (2), 가이드 (2), navigation (2), فارسی (2), deutsch (2), português (2), español (2), 日本語 (2), 简体中文 (2), english (2), 한국어 (2), 릴리스 (2), 2019, present, voidzero, inc, and, contributors, fc9ab719, next, previous, pager, 페이지, 수정하기, 명령에서, 이점은, 조기에, 감지할, 있다는, 것입니다, 파일이, 분석되기, 전에는, 로드할, 이용하면, 접근할, 명령뿐, 아니라, 설정할, 설정되어, 있다면, 통해서도, 제어할, 그러나, 개념이라는, 파일에서의, other, 모드의, 차이점은, 속성에도, 반영됩니다, 개념임을, 유의해야, 아래는, 명령어가, 영향을, 미치는지, 보여줍니다, testing, 명령은, 동작하기, 모드와, 설정을, 빌드를, 생성합니다, bash, 상황에서는, 사용하여, 타이틀을, 렌더링하고, 플래그를, 덮어쓸, 빌드하고, 앱에서는, 제목을, 렌더링할, 다시말해, 실행하게, 불러오게, 서버는, 경우에는, 동작합니다, 프레임워크에서, 사용되고, 있기에, 조건문과, 복잡한, 대체에, 의도적으로, 의견을, 제시하지, 구현한, 플러그인을, 확장할, transformindexhtml, html에서, 않으면, 무시되며, 환경변수, 이와는, js는, 접근하면, 치환된다는, 차이가, using, data, from, vite_api_url, running, 상수를, 치환하는, 기능도, 속성은, 구문을, const_name, 정의되지, 않는다면, 구문이, 없는지, 확인해, 주세요, 자세한, 내용은, 확인할, 확장을, 코드가, 브라우저, 환경의, 타입이, 필요하다면, 필드에, 명시해줄, dom, importmeta, strictimportmetaenv, unknown, 허용하지, 추가하면, 엄격하게, 만들어, vitetypeoptions, 생성한, 아래와, 정의하여, src, 정의를, 제공하고, 있으며, 정의가, client, typescript를, 전용이며, 포함할, git에, 체크인되지, 추가해야, gitignore, 무시하기, 운용성, 문제를, 피하기, 의존하지, 좋습니다, 경고를, 표시할, 스크립트나, 도구에서는, 그럼에도, 오랫동안, 지원해, 생태계의, 도구들도, 버전을, 때문입니다, docker, compose, 확장하는, 설정됩니다, 확장하기, new_key3, test123, new_key2, new_key1, 변수의, 사용하고, 사용해, 작성된, 확장합니다, 문법에, 알아보고, bun이, 스크립트, 자동으로, 로드한다는, 동작은, 로드하며, 존중하는, 기능과, 충돌할, 방법은, oven, 5515, 사용자, 시작될, 가져와집니다, 변경했다면, 서버를, 재시작해주세요, 실행될, 존재하던, 순위를, 가지며, 파일로, 덮어씌워지지, 말이죠, 외에도, 로드합니다, 선언된, 변수보다, 우선하지만, 변수도, 일반적인, 우선순위를, 갖습니다, 우선순위, 이용해, 가져옵니다, 저장된, 파일들, 정보를, 포함해서는, 변수들의, 번들링됩니다, 배포에서는, 시크릿을, 안전하게, 서버리스, 함수를, 고려하세요, 시크릿, 숫자이지만, 반환됩니다, 불리얼, 대해서도, 동일하게, 적용되며, 코드에서, 원하는, 타입으로, 변환해야, 옵션을, 커스터마이징할, envprefix, 파싱된, 노출되지만, 노출되지, 추가해, 테스트할, 클라이언트, 노출됩니다, 실수로, 유출되지, 사용하지, 마세요, 살펴보겠습니다, 아래에, 환경에서, 여부이며, 반대되는, 가집니다, 프로덕션에서, 제공되는, 베이스, url이며, 결정됩니다, base, base_url, 입니다, 상황에서, 같습니다, scrimba에서, 인터랙티브, 강의를, 시청하세요, 코드는, 빌드에서, 셰이킹됩니다, 객체를, 상수들을, 정의되나, 시에는, 정적으로, 치환되어, 효과적인, 셰이킹이, 다시보기, 2025, 만들기, this, 런타임, 프레임워크, 인스턴스, 레퍼런스, hmr, v7에서, 마이그레이션하기, 트러블슈팅, 프레임워크와, 버전으로, 빌드하기, 가져오기, 디펜던시, cli, 기능들, 프로젝트, 시작하기, sidebar, return, top, menu, appearance, ctrl, search, 기여하기, awesome, discord, mastodon, bluesky, 다큐멘터리, 레지스트리, 감사의, 블로그, 리소스, main, skip, content, alpha, 차세대,

Text of the page (random words):
vite의 환경 변수와 모드 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의 환경 변수와 모드 vite는 import meta env 라는 특수한 객체를 통해 특정 상수들을 노출합니다 이러한 상수들은 개발 시 전역 변수로 정의되나 빌드 시에는 정적으로 치환되어 효과적인 트리 셰이킹이 가능합니다 예제 js if import meta env dev 이 블록 안의 코드는 프로덕션 빌드에서 트리 셰이킹됩니다 console log dev mode scrimba에서 인터랙티브 강의를 시청하세요 내장 상수 모든 상황에서 사용할 수 있는 내장 상수들은 다음과 같습니다 import meta env mode string 현재 앱이 동작하고 있는 모드 입니다 import meta env base_url string 앱이 제공되는 베이스 url이며 이 값은 base 설정 에 의해 결정됩니다 import meta env prod boolean 앱이 프로덕션에서 실행 중인지 여부입니다 개발 서버 실행 혹은 프로덕션 빌드 시 node_env production 로 설정 import meta env dev boolean 앱이 개발 환경에서 실행 중인지 여부이며 항상 import meta env prod 와 반대되는 값을 가집니다 import meta env ssr boolean 앱이 서버 에서 실행 중인지 여부입니다 환경 변수 vite는 환경 변수를 import meta env 객체 아래에 문자열로 자동 노출합니다 vite_ 접두사가 붙은 변수는 vite 번들링 이후 클라이언트 측 소스 코드에 노출됩니다 환경 변수가 실수로 클라이언트에 유출되지 않도록 민감한 변수에는 이 접두사를 사용하지 마세요 예를 들어 다음을 살펴보겠습니다 env vite_some_key 123 db_password foobar 파싱된 vite_some_key 값인 123 은 클라이언트에 노출되지만 db_password 값은 노출되지 않습니다 코드에 다음을 추가해 테스트할 수 있습니다 js console log import meta env vite_some_key 123 console log import meta env db_password undefined envprefix 옵션을 통해 환경 변수 접두사를 커스터마이징할 수 있습니다 환경 변수 파싱 위와 같이 vite_some_key 는 숫자이지만 파싱 시 문자열로 반환됩니다 불리얼 환경 변수에 대해서도 동일하게 적용되며 코드에서 사용할 때는 원하는 타입으로 변환해야 합니다 시크릿 보호하기 vite_ 변수에는 api 키 같은 민감한 정보를 포함해서는 안 됩니다 이 변수들의 값은 빌드 시 소스 코드에 번들링됩니다 프로덕션 배포에서는 시크릿을 안전하게 보호하기 위해 백엔드 서버 또는 서버리스 엣지 함수를 고려하세요 env 파일들 vite는 dotenv 를 이용해 환경 변수가 저장된 디렉터리 내 아래의 파일에서 환경 변수를 가져옵니다 env loaded in all cases env local loaded in all cases ignored by git env mode only loaded in specified mode env mode local only loaded in specified mode ignored by git 환경 변수 우선순위 env production 과 같이 특정 모드에 대한 환경 변수는 일반적인 환경 변수 예 env 보다 높은 우선순위를 갖습니다 vite는 모드별 env mode 파일 외에도 항상 env 와 env local 파일을 로드합니다 모드별 파일에 선언된 변수는 일반 파일에 있는 변수보다 우선하지만 env 나 env local 에만 정의된 변수도 여전히 환경 변수로 사용할 수 있습니다 vite가 실행될 때 이미 존재하던 환경 변수는 가장 높은 우선 순위를 가지며 env 파일로 인해 덮어씌워지지 않습니다 가령 vite_some_key 123 vite build 와 같이 말이죠 env 파일은 vite가 시작될 때 가져와집니다 따라서 파일을 변경했다면 서버를 재시작해주세요 bun 사용자 bun 을 사용할 때는 bun이 스크립트 실행 전에 env 파일을 자동으로 로드한다는 점에 유의하세요 이 내장 동작은 환경 변수를 process env 에 직접 로드하며 기존 process env 값을 존중하는 vite 기능과 충돌할 수 있습니다 우회 방법은 oven sh bun 5515 를 참고하세요 또한 vite는 dotenv expand 를 사용해 env 파일에 작성된 환경 변수를 확장합니다 문법에 대해 더 알아보고 싶다면 이 문서 를 참고하세요 만약 환경 변수의 값에 를 사용하고 싶다면 를 사용해야 합니다 env key 123 new_key1 test foo test new_key2 test foo test foo new_key3 test key test123 역순으로 변수 확장하기 vite는 역순으로 변수를 확장하는 것을 지원합니다 예를 들어 아래의 env 파일은 vite_foo foobar vite_bar bar 로 설정됩니다 env vite_foo foo vite_bar vite_bar bar 이는 셸 스크립트나 docker compose 같은 다른 도구에서는 동작하지 않습니다 그럼에도 vite는 이 동작을 지원합니다 dotenv expand 가 오랫동안 이를 지원해 왔고 javascript 생태계의 다른 도구들도 이 동작을 지원하는 이전 버전을 사용하기 때문입니다 다만 상호 운용성 문제를 피하기 위해 이러한 동작에 의존하지 않는 것이 좋습니다 vite는 향후 이러한 동작에 대해 경고를 표시할 수 있습니다 로컬 env 파일 무시하기 env local 파일은 로컬 전용이며 민감한 변수를 포함할 수 있습니다 git에 체크인되지 않도록 gitignore 에 local 을 추가해야 합니다 typescript를 위한 인텔리센스 기본적으로 vite는 vite client d ts 의 import meta env 에 대한 타입 정의를 제공하고 있습니다 물론 env mode 파일에서 더 많은 커스텀 환경 변수를 정의할 수 있으며 vite_ 접두사가 붙은 커스텀 환경 변수에 대해서는 typescript 인텔리센스 정의가 가능합니다 src 디렉터리 내 vite env d ts 파일을 생성한 후 아래와 같이 importmetaenv 를 정의하여 vite_ 환경 변수에 대한 타입을 정의할 수 있습니다 vite env d ts typescript interface vitetypeoptions 이 줄을 추가하면 importmetaenv 타입을 엄격하게 만들어 알 수 없는 키를 허용하지 않을 수 있습니다 strictimportmetaenv unknown interface importmetaenv readonly vite_app_title string 추가 env 변수 interface importmeta readonly env importmetaenv 만약 코드가 dom 이나 webworker 와 같이 브라우저 환경의 타입이 필요하다면 tsconfig json 에서 lib 필드에 이를 명시해줄 수 있습니다 tsconfig json json lib webworker import 는 타입 확장을 동작하지 않도록 합니다 만약 importmetaenv 가 정의되지 않는다면 vite env d ts 에 import 구문이 없는지 확인해 주세요 더 자세한 내용은 typescript 문서 에서 확인할 수 있습니다 html 내 상수 치환 vite는 html 파일에서 상수를 치환하는 기능도 지원합니다 import meta env 의 모든 속성은 특수한 const_name 구문을 통해 html 파일에서도 사용할 수 있습니다 html h1 vite is running in mode h1 p using data from vite_api_url p 단 html에서 환경 변수가 import meta env 에 존재하지 않으면 무시되며 치환되지 않습니다 가령 존재하지 않는 환경변수 non_existent 를 사용하는 경우 이는 치환되지 않습니다 이와는 달리 js는 import meta env non_existent 로 접근하면 undefined 로 치환된다는 차이가 있습니다 vite는 많은 프레임워크에서 사용되고 있기에 조건문과 같은 복잡한 대체에 대해서는 의도적으로 의견을 제시하지 않고 있습니다 커뮤니티 플러그인 또는 transformindexhtml 훅 을 구현한 커스텀 플러그인을 통해 vite를 확장할 수 있습니다 모드 기본적으로 dev 명령으로 실행되는 개발 서버는 development 모드로 동작하고 build 명령으로 실행되는 경우에는 production 모드로 동작합니다 다시말해 vite build 명령을 실행하게 되면 env production 에 정의된 환경 변수를 불러오게 됩니다 env production vite_app_title my app 앱에서는 import meta env vite_app_title 을 통해 제목을 렌더링할 수 있습니다 특정 상황에서는 vite build 명령을 실행할 때 다른 모드를 사용하여 다른 타이틀을 렌더링하고 싶을 수 있습니다 mode 옵션 플래그를 통해 기본 동작을 덮어쓸 수 있습니다 예를 들어 staging 모드를 위해 앱을 빌드하고 싶다면 다음과 같이 실행할 수 있습니다 bash vite build mode staging 그리고 env staging 파일을 생성합니다 env staging vite_app_title my app staging vite build 명령은 기본적으로 production 모드로 동작하기 때문에 다른 모드와 env 파일 설정을 통해 development 모드로 빌드를 실행할 수 있습니다 env testing node_env development node_env 그리고 모드 node_env process env node_env 와 모드는 서로 다른 개념임을 유의해야 합니다 아래는 명령어가 node_env 와 모드에 어떤 영향을 미치는지 보여줍니다 명령 node_env 모드 vite build production production vite build mode development production development node_env development vite build development production node_env development vite build mode development development development node_env 와 모드의 차이점은 import meta env 속성에도 반영됩니다 명령 import meta env prod import meta env dev node_env production true false node_env development false true node_env other false true 명령 import meta env mode mode production production mode development development mode staging staging env 파일에서의 node_env node_env 는 명령뿐 아니라 env 파일에서도 설정할 수 있습니다 따라서 만약 env mode 파일에서 node_env 가 설정되어 있다면 모드를 통해서도 이를 제어할 수 있습니다 그러나 node_env 와 모드는 여전히 두 개의 다른 개념이라는 것을 유의하세요 명령에서 node_env 를 사용하는 주된 이점은 vite가 그 값을 조기에 감지할 수 있다는 것입니다 vite는 설정 파일이 분석되기 전에는 env 파일을 로드할 수 없기 때문에 이 대신 명령을 이용하면 vite 설정 파일에서 process env node_env 에 접근할 수 있습니다 이 페이지 수정하기 pager previous page 정적 웹 페이지로 배포하기 next page 서버 측 렌더링 ssr 2019 present voidzero inc and vite contributors fc9ab719