Skip to content

Commit f7bd355

Browse files
committed
Apply origin changes
1 parent 803e972 commit f7bd355

File tree

10 files changed

+52
-26
lines changed

10 files changed

+52
-26
lines changed

config/index.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,11 @@ export default defineConfig(async ({ command, mode }) => {
101101

102102
## 설정에서 환경 변수 사용하기 {#using-environment-variables-in-config}
103103

104-
환경 변수 역시 `process.env` 객체를 통해 가져올 수 있습니다.
104+
Environment variables available while the config itself is being evaluated are only those that already exist in the current process environment (`process.env`). Vite deliberately defers loading any `.env*` files until _after_ the user config has been resolved because the set of files to load depends on config options like [`root`](/guide/#index-html-and-project-root) and [`envDir`](/config/shared-options.md#envdir), and also on the final `mode`.
105105

106-
참고로 Vite는 Vite의 설정을 끝마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 `.env` 파일을 로드하지 않습니다. 가령 `root` 또는 `envDir` 설정 값에 따라 어떻게 파일을 불러올 것인지 달라집니다. 다만 필요하다면 `loadEnv` 헬퍼를 사용해 `.env` 파일을 불러올 수도 있습니다.
106+
This means: variables defined in `.env`, `.env.local`, `.env.[mode]`, or `.env.[mode].local` are **not** automatically injected into `process.env` while your `vite.config.*` is running. They _are_ automatically loaded later and exposed to application code via `import.meta.env` (with the default `VITE_` prefix filter) exactly as documented in [Env Variables and Modes](/guide/env-and-mode.html). So if you only need to pass values from `.env*` files to the app, you don't need to call anything in the config.
107+
108+
If, however, values from `.env*` files must influence the config itself (for example to set `server.port`, conditionally enable plugins, or compute `define` replacements), you can load them manually using the exported [`loadEnv`](/guide/api-javascript.html#loadenv) helper.
107109

108110
```js twoslash
109111
import { defineConfig, loadEnv } from 'vite'
@@ -114,10 +116,14 @@ export default defineConfig(({ mode }) => {
114116
// 모든 환경 변수를 불러옴
115117
const env = loadEnv(mode, process.cwd(), '')
116118
return {
117-
// Vite 설정
118119
define: {
120+
// Provide an explicit app-level constant derived from an env var.
119121
__APP_ENV__: JSON.stringify(env.APP_ENV),
120122
}
123+
// Example: use an env var to set the dev server port conditionally.
124+
server: {
125+
port: env.APP_PORT ? Number(env.APP_PORT) : 5173,
126+
},
121127
}
122128
})
123129
```

config/preview-options.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Vite 대신 다른 서버가 응답하는 경우가 있습니다.
2121

2222
## preview.allowedHosts {#preview-allowedhosts}
2323

24-
- **타입:** `string | true`
24+
- **Type:** `string[] | true`
2525
- **기본값:** [`server.allowedHosts`](./server-options#server-allowedhosts)
2626

2727
Vite가 응답할 수 있는 호스트 이름 목록입니다.

config/server-options.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export default defineConfig({
256256

257257
Vite 서버 감시자는 기본적으로 `root`를 감시하며, `.git/`, `node_modules/`, `test-results/`, 그리고 Vite의 `cacheDir``build.outDir` 디렉터리는 건너뜁니다. 감시하는 파일이 업데이트되면, Vite는 필요한 경우에만 HMR을 적용하고 페이지를 업데이트합니다.
258258

259-
`null`로 설정하면 파일을 감시하지 않습니다. `server.watcher`는 (Node.js `EventEmitter`과)호환되는 이벤트 객체(Emitter)를 제공하지만, `add` 또는 `unwatch`를 호출해도 아무런 효과가 없습니다.
259+
If set to `null`, no files will be watched. [`server.watcher`](/guide/api-javascript.html#vitedevserver) will provide a compatible event emitter, but calling `add` or `unwatch` will have no effect.
260260

261261
::: warning `node_modules` 디렉터리에서 파일 감시하기
262262

guide/api-environment-plugins.md

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,19 @@ Vite 서버는 모든 환경이 공유하는 하나의 플러그인 파이프라
3131

3232
## 훅을 사용해 새로운 환경 등록하기 {#registering-new-environments-using-hooks}
3333

34-
플러그인은 `config` 훅에서 새로운 환경을 구성할 수 있습니다(예: [RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)를 위한 별도의 모듈 그래프 구성하기):
34+
Plugins can add new environments in the `config` hook. For example, [RSC support](/plugins/#vitejs-plugin-rsc) uses an additional environment to have a separate module graph with the `react-server` condition:
3535

3636
```ts
3737
config(config: UserConfig) {
38-
config.environments.rsc ??= {}
38+
return {
39+
environments: {
40+
rsc: {
41+
resolve: {
42+
conditions: ['react-server', ...defaultServerConditions],
43+
},
44+
},
45+
},
46+
}
3947
}
4048
```
4149

@@ -48,13 +56,21 @@ Vite 서버는 모든 환경이 공유하는 하나의 플러그인 파이프라
4856

4957
```ts
5058
configEnvironment(name: string, options: EnvironmentOptions) {
59+
// add "workerd" condition to the rsc environment
5160
if (name === 'rsc') {
52-
options.resolve.conditions = // ...
61+
return {
62+
resolve: {
63+
conditions: ['workerd'],
64+
},
65+
}
66+
}
67+
}
5368
```
5469

5570
## `hotUpdate` 훅 {#the-hotupdate-hook}
5671

5772
- **타입:** `(this: { environment: DevEnvironment }, options: HotUpdateOptions) => Array<EnvironmentModuleNode> | void | Promise<Array<EnvironmentModuleNode> | void>`
73+
- **Kind:** `async`, `sequential`
5874
- **참고:** [HMR API](./api-hmr)
5975

6076
`hotUpdate` 훅을 사용하면 플러그인이 특정 환경에 대해 HMR 업데이트 처리를 커스텀할 수 있습니다. 파일이 변경되면 `server.environments`의 순서에 따라 각 환경에 대해 순차적으로 HMR 알고리즘이 실행되므로, `hotUpdate` 훅은 여러 번 호출됩니다. 훅은 다음과 같은 시그니처를 가진 컨텍스트 객체를 받습니다:

guide/api-plugin.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Vite의 플러그인은 Rollup의 멋진 플러그인 인터페이스에 몇 가
66

77
## 플러그인 만들기 {#authoring-a-plugin}
88

9-
Vite는 확립된 패턴을 제공하기 위해 노력하고 있습니다. 따라서 새 플러그인을 만들기 전 [Vite에서 지원하는 기능들](https://ko.vite.dev/guide/features), [호환되는 Rollup 플러그인](https://github.com/rollup/awesome), 그리고 [Vite 플러그인](https://github.com/vitejs/awesome-vite#plugins)을 확인하여 사용 가능한 것이 있는지 확인해주세요.
9+
Vite strives to offer established patterns out of the box, so before creating a new plugin make sure that you check the [Features guide](/guide/features) to see if your need is covered. Also review available community plugins, both in the form of a [compatible Rollup plugin](https://github.com/rollup/awesome) and [Vite Specific plugins](https://github.com/vitejs/awesome-vite#plugins)
1010

1111
플러그인을 만들 때는 굳이 새로운 패키지를 만들지 않고 `vite.config.js`에 직접 작성할 수도 있습니다. 만약 작성한 플러그인이 프로젝트에서 유용하다고 생각된다면, [Vite를 사용하는 다른 사람들과 공유해보세요](https://chat.vite.dev).
1212

@@ -403,6 +403,7 @@ Vite의 플러그인은 Vite 전용 훅을 사용할 수 있습니다. 물론
403403
### `handleHotUpdate` {#handlehotupdate}
404404

405405
- **타입:** `(ctx: HmrContext) => Array<ModuleNode> | void | Promise<Array<ModuleNode> | void>`
406+
- **Kind:** `async`, `sequential`
406407
- **관련 항목:** [HMR API](./api-hmr)
407408

408409
사용자가 지정한 방식대로 HMR 업데이트를 수행합니다. 이 훅은 아래와 같은 컨텍스트 객체를 전달받습니다:

guide/assets.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ document.getElementById('hero-img').style.background = `url("${imgUrl}")`
4646

4747
### 접미사를 이용해 URL로 에셋 가져오기 {#explicit-url-imports}
4848

49-
Vite 내부적으로 설정된 목록이나 `assetsInclude`에 포함되지 않은 에셋도 `?url` 접미사를 사용해 명시적으로 URL로서 가져올 수 있습니다. 이는 [Houdini Paint Worklets](https://developer.mozilla.org/en-US/docs/Web/API/CSS/paintWorklet_static)를 가져올 때와 같은 상황에서 유용합니다.
49+
Assets that are not included in the internal list or in `assetsInclude` can be explicitly imported as a URL using the `?url` suffix. This is useful, for example, to import [Houdini Paint Worklets](https://developer.mozilla.org/en-US/docs/Web/API/CSS/paintWorklet_static).
5050

5151
```js twoslash
5252
import 'vite/client'
@@ -167,5 +167,5 @@ function getImageUrl(name) {
167167
:::
168168
169169
::: warning SSR과 함께 사용하지 마세요!
170-
`import.meta.url`은 브라우저와 Node.js 간 서로 다른 의미를 갖기 때문에, 이 패턴은 서버-사이드 렌더링(SSR)에 Vite를 사용하는 경우 동작하지 않습니다. 또한 서버 번들은 클라이언트 호스트의 URL을 미리 결정할 수 없습니다.
170+
This pattern does not work if you are using Vite for Server-Side Rendering, because `import.meta.url` has different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.
171171
:::

guide/features.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,8 +213,9 @@ HTML 파일은 Vite 프로젝트에서 [중심적인 역할](/guide/#index-html-
213213
- Vue JSX: [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)
214214
- React: [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)
215215
- React using SWC support via [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc)
216+
- [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) support via [@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)
216217

217-
자세한 내용은 [플러그인 가이드](https://ko.vite.dev/plugins)를 참고해 주세요.
218+
Check out the [Plugins Guide](/plugins/) for more information.
218219

219220
## JSX {#jsx}
220221

@@ -543,7 +544,7 @@ const modules = {
543544

544545
#### 커스텀 쿼리 {#custom-queries}
545546

546-
`query` 옵션을 이용해 Import에 대한 쿼리를 작성할 수 있습니다. 예를 들어, [문자열 형태](https://ko.vite.dev/guide/assets.html#importing-asset-as-string) 또는 [URL 형태](https://ko.vite.dev/guide/assets.html#importing-asset-as-url)로 에셋을 가져올 수 있습니다:
547+
You can also use the `query` option to provide queries to imports, for example, to import assets [as a string](/guide/assets.html#importing-asset-as-string) or [as a url](/guide/assets.html#importing-asset-as-url):
547548

548549
```ts twoslash
549550
import 'vite/client'

guide/rolldown.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ const plugin = {
314314

315315
### 훅 필터 기능 {#hook-filter-features}
316316

317-
Rolldown은 Rust와 JavaScript 런타임 간 통신 오버헤드를 줄이기 위해 [훅 필터 기능](https://rolldown.rs/guide/plugin-development#plugin-hook-filters)을 도입했습니다. 이를 사용해 플러그인 성능을 향상시킬 수 있습니다.
317+
Rolldown introduced a [hook filter feature](https://rolldown.rs/plugins/hook-filters) to reduce the communication overhead the between Rust and JavaScript runtimes. By using this feature you can make your plugin more performant.
318318
훅 필터 기능은 Rollup 4.38.0+ 및 Vite 6.3.0+ 에서도 지원합니다. Rollup 4.38.0 미만이나 Vite 6.3.0 미만 버전과 호환되는 플러그인을 만들고자 한다면, 외부 필터 설정과 별개로 훅 함수 내부에서도 동일한 필터링 로직을 구현해야 합니다. (자세한 내용은 [Rolldown 훅 필터 기능 문서](https://rolldown.rs/guide/plugin-development#plugin-hook-filters)를 참고해 주세요 - 옮긴이)
319319

320320
::: tip

guide/static-deploy-github-pages.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ jobs:
4646
- name: Setup Pages
4747
uses: actions/configure-pages@v5
4848
- name: Upload artifact
49-
uses: actions/upload-pages-artifact@v3
49+
uses: actions/upload-pages-artifact@v4
5050
with:
5151
# dist 폴더 업로드
5252
path: './dist'

plugins/index.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,33 @@
1010

1111
### [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) {#vitejs-plugin-vue}
1212

13-
- Vue 3 단일 파일 컴포넌트(SFC)의 지원을 제공합니다.
13+
Provides Vue 3 Single File Components support.
1414

1515
### [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx) {#vitejs-plugin-vue-jsx}
1616

17-
- Vue 3 JSX 지원을 제공합니다. ([전용 `Babel` 변형](https://github.com/vuejs/jsx-next)을 통해)
17+
Provides Vue 3 JSX support (via [dedicated Babel transform](https://github.com/vuejs/babel-plugin-jsx)).
1818

19-
### [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2) {#vitejs-plugin-vue2}
19+
### [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) {#vitejs-plugin-react}
2020

21-
- Vue 2.7 단일 파일 컴포넌트(SFC)를 지원합니다.
21+
Uses esbuild and Babel, achieving fast HMR with a small package footprint and the flexibility of being able to use the Babel transform pipeline. Without additional Babel plugins, only esbuild is used during builds.
2222

23-
### [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx) {#vitejs-plugin-vue2-jsx}
23+
### [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc)
2424

25-
- [전용 바벨 프리셋](https://github.com/vuejs/jsx-vue2/)을 통해 Vue 2.7 JSX를 지원합니다
25+
Replaces Babel with SWC during development. During production builds, SWC+esbuild are used when using plugins, and esbuild only otherwise. For big projects that don't require non-standard React extensions, cold start and Hot Module Replacement (HMR) can be significantly faster.
2626

27-
### [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) {#vitejs-plugin-react}
27+
### [@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)
2828

29-
- esbuild와 Babel을 사용하여 작은 패키지 크기와 Babel 변형 파이프라인의 유연성을 통해 빠른 HMR을 달성합니다. 추가 Babel 플러그인이 없으면 빌드 중 esbuild만 사용됩니다.
29+
Vite supports [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) through the plugin. It utilizes the [Environment API](/guide/api-environment) to provide low-level primitives that React frameworks can use to integrate RSC features. You can try a minimal standalone RSC application with:
3030

31-
### [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) {#vitejs-plugin-react-swc}
31+
```bash
32+
npm create vite@latest -- --template rsc
33+
```
3234

33-
- 개발 중에는 Babel 대신 SWC를 사용합니다. 프로덕션 빌드 중 플러그인을 사용하게 된다면 SWC+esbuild를 사용하고, 그렇지 않다면 esbuild만을 사용합니다. 비표준 React 확장이 필요하지 않은 대규모 프로젝트의 경우, 콜드 스타트와 Hot Module Replacement(HMR)이 훨씬 빠르게 작동할 수 있습니다.
35+
Read the [plugin documentation](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) to learn more.
3436

3537
### [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) {#vitejs-plugin-legacy}
3638

37-
- 프로덕션 빌드를 위한 이전 브라우저 지원을 제공합니다.
39+
Provides legacy browsers support for the production build.
3840

3941
## 커뮤니티 플러그인 {#community-plugins}
4042

0 commit comments

Comments
 (0)