diff --git a/.github/PULL_REQUEST_TEMPLATE/upstream-sync.md b/.github/PULL_REQUEST_TEMPLATE/upstream-sync.md new file mode 100644 index 000000000..858b13ef9 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/upstream-sync.md @@ -0,0 +1,59 @@ +## Summary + +- + +## Upstream baseline + +- Previous ref: +- Previous commit: +- Previous tag object: +- Target ref: +- Target commit: +- Target tag object: + +## Frozen scope + +- Included sync issues: +- Excluded pending or outside-target issues: + +## Scope classification + +| Handling | Count | +| ---------------------------- | ----: | +| Translated | 0 | +| Source-preserving | 0 | +| Structural sync | 0 | +| Intentional local divergence | 0 | +| Excluded | 0 | + +## GitHub issues in scope + +
+Issues in scope + +| Issue | Title | Handling | +| ------------------ | ------------------ | ------------ | +| `Closed #` | `` | `` | + +
+ +## Intentional divergences and existing omissions + +- Intentional local divergences: +- Existing omissions excluded from this sync: + +## Validation + +- [ ] `pnpm install --frozen-lockfile` +- [ ] Prettier checks for changed text files +- [ ] Strict line-parity checks for applicable files +- [ ] `pnpm run build` +- [ ] `git diff --check origin/main...HEAD` + +## Checklist + +- [ ] [번역 가이드](https://github.com/vitejs/docs-ko/blob/main/CONTRIBUTING.md)를 준수했습니다. +- [ ] 변경된 한국어 문장을 맞춤법 검사기로 확인했습니다. +- [ ] 모든 Target hunk를 분류했습니다. +- [ ] 직접 인용문, 코드 식별자, sample output을 의도치 않게 번역하지 않았습니다. +- [ ] 검증된 이슈에만 종료 키워드를 사용했습니다. diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 3b7ebc435..9ba2b7f35 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -1,5 +1,4 @@ import path from 'node:path' -import fs from 'node:fs' import type { DefaultTheme, HeadConfig } from 'vitepress' import { defineConfig } from 'vitepress' import { transformerTwoslash } from '@shikijs/vitepress-twoslash' @@ -37,7 +36,7 @@ const deployType = (() => { } })() -const viteVersion = '8.0.13' +const viteVersion = '8.1.5' const viteMajorVersion = 8 const versionLinks = ((): DefaultTheme.NavItemWithLink[] => { @@ -83,17 +82,6 @@ const versionLinks = ((): DefaultTheme.NavItemWithLink[] => { } })() -function inlineScript(file: string): HeadConfig { - return [ - 'script', - {}, - fs.readFileSync( - path.resolve(import.meta.dirname, `./inlined-scripts/${file}`), - 'utf-8', - ), - ] -} - const config = defineConfig({ title: 'Vite', lang: 'ko', @@ -113,7 +101,6 @@ const config = defineConfig({ { rel: 'alternate', type: 'application/rss+xml', href: '/blog.rss' }, ], ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], - inlineScript('banner.js'), [ 'link', { @@ -147,15 +134,6 @@ const config = defineConfig({ ['meta', { name: 'twitter:card', content: 'summary_large_image' }], ['meta', { name: 'twitter:site', content: '@vite_js' }], ['meta', { name: 'theme-color', content: '#646cff' }], - [ - 'script', - { - src: 'https://cdn.usefathom.com/script.js', - 'data-site': 'CBDFBSLI', - 'data-spa': 'auto', - defer: '', - }, - ], ], locales: { @@ -171,12 +149,10 @@ const config = defineConfig({ themeConfig: { variant: 'vite', - logo: '/logo.svg', - banner: { - id: 'viteplus-alpha', - text: 'Vite+ Alpha 발표: 오픈 소스. 통합. 차세대.', - url: 'https://voidzero.dev/posts/announcing-vite-plus-alpha?utm_source=vite&utm_content=top_banner', + id: 'cloudflare-supports-vite', + text: `Cloudflare가 Vite의 사명을 지원합니다`, + url: '/blog/cloudflare-supports-vite', }, editLink: { @@ -266,6 +242,10 @@ const config = defineConfig({ { text: '블로그', link: '/blog' }, { text: '릴리스', link: '/releases' }, { text: '감사의 말', link: '/acknowledgements' }, + { + text: '행동 강령', + link: 'https://github.com/vitejs/.github/blob/main/CODE_OF_CONDUCT.md', + }, { text: '플러그인 레지스트리', link: 'https://registry.vite.dev/plugins', @@ -619,6 +599,14 @@ const config = defineConfig({ }, }, vite: { + resolve: { + alias: { + '@components/oss/TopBanner.vue': path.resolve( + import.meta.dirname, + 'theme/components/TopBanner.vue', + ), + }, + }, plugins: [ groupIconVitePlugin({ customIcon: { diff --git a/.vitepress/theme/components/TopBanner.vue b/.vitepress/theme/components/TopBanner.vue new file mode 100644 index 000000000..c1c58d842 --- /dev/null +++ b/.vitepress/theme/components/TopBanner.vue @@ -0,0 +1,186 @@ + + + + + diff --git a/AGENTS.md b/AGENTS.md index 5e563c33f..8b07774e2 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -5,6 +5,7 @@ ## Scope - 이 파일은 저장소 루트 기준 전체 문서 작업에 적용됩니다. +- AI agent 작업 규칙의 SSOT는 이 파일이며, `CLAUDE.md`는 `@AGENTS.md` 한 줄만 유지합니다. 사람용 기여 절차와 용어 데이터는 각각 `CONTRIBUTING.md`, `TERMINOLOGY.md`를 따릅니다. - 더 구체적인 하위 디렉터리 규칙이 필요해지면 해당 디렉터리에 별도 `AGENTS.md`를 둘 수 있습니다. - 사용자 요청과 이 파일이 충돌하면 확인하고 진행합니다. @@ -19,10 +20,21 @@ - upstream 기준은 `vitejs/vite` 저장소의 `/docs` 디렉터리에 있는 릴리스된 커밋이나 태그를 사용합니다. - 동기화 작업을 시작할 때 기준 upstream ref를 명확히 기록합니다. 예: `v8.0.13:docs`. +- Base와 Target tag/ref는 exact refspec으로 가져온 뒤 `git rev-parse '^{commit}'`로 해석한 commit SHA를 기록하고 검증합니다. +- sync issue의 작업 가능 여부는 live label과 assignee로 판단합니다. `sync` label이 있고 `pending` label과 assignee가 없으며, issue의 upstream commit이 Target의 ancestor이고 `docs/`를 변경할 때만 포함합니다. 상태나 포함 관계가 달라지면 범위를 자동으로 바꾸지 않고 보류해 보고합니다. - 번역 대상 텍스트뿐 아니라 upstream 문서 구조, VitePress theme 구조, asset, redirect/header, package metadata, public 파일 변경도 최신화 대상입니다. - 기존 한국어 문서에 이미 번역된 범위를 먼저 확인한 뒤, 그 범위를 기준으로 새 번역 대상을 추출합니다. +- 번역 여부는 파일의 수정 시각이나 현재 영문 여부만으로 판단하지 않습니다. 마지막 동기화 upstream(Base), 현재 한국어(Ours), 목표 upstream(Target)을 line/hunk 단위로 비교하고 도입 또는 변경 commit을 확인합니다. +- 개별 sync issue의 중간 상태보다 목표 release의 최종 상태를 우선하되, issue → commit → 최종 hunk 추적성과 후속 commit으로 상쇄된 항목을 작업 inventory에 기록합니다. - 큰 동기화 작업은 batch 단위로 나누고, 각 batch가 검증 가능한 상태일 때 커밋합니다. +## Evidence And Intentional Divergence + +- upstream 적용 전에 현재 파일의 `git log`, `git blame`, runtime 참조를 확인합니다. +- 한국어 locale, domain, edit link, standalone version source, 원문 기준 custom anchor, 저장소 전용 workflow와 deploy 파일, 명시적 local revert와 localization wrapper는 보존 후보입니다. +- upstream에 없다는 이유만으로 local-only 파일을 삭제하지 않습니다. 현재 미참조이고 도입 이력에도 보존 근거가 없을 때만 제거합니다. +- 의도가 불명확하거나 Target과 local overlay가 같은 hunk를 바꾸면 덮어쓰지 않고 해당 hunk를 보류해 보고합니다. + ## Translation Scope 번역 대상: @@ -41,11 +53,20 @@ - homepage/community testimonial 같은 직접 인용문 - upstream 동작을 설명하기 위한 sample output, sentinel, directive +혼합 파일은 파일 단위가 아니라 hunk 단위로 판정합니다. + +- Base 이후 새로 추가되거나 변경된 사용자 표시 문구는 번역합니다. +- 위치만 이동한 문구는 기존 한국어 번역을 재사용합니다. +- Base부터 변하지 않은 사용자 표시 영문은 `기존 누락 의심`으로 별도 보고하고 현재 sync에 자동 포함하지 않습니다. +- Target에서 변경된 기존 영문 hunk는 변경된 부분만 번역하고, 변하지 않은 주변 영문은 기존 누락 의심으로 분리합니다. + ## Line Parity - 기본 원칙은 upstream 문서와 섹션 순서, 문단 구조, 예제 위치를 유지하는 것입니다. - line-by-line parity 대상 파일에서는 upstream과 줄 구조를 가능한 한 맞춥니다. - 한국어 문장 압축이나 Vue localization wrapper 때문에 줄 수가 달라지면, 리뷰 가능한 이유를 남깁니다. +- 번역 제목의 명시적 `{#original-english-slug}`와 중복 제목 suffix를 보존합니다. +- localization wrapper와 명시적 anchor로 생긴 줄 차이는 inventory에 이유를 기록하고 upstream 형태로 임의 정규화하지 않습니다. - line-by-line parity 제외 파일은 다음과 같습니다. - `.vitepress/config.ts` - `_data/*` @@ -57,7 +78,7 @@ - 사용자와의 대화, 작업 요약, 리뷰 설명은 한국어로 작성합니다. - 직역투보다 문맥에 맞는 자연스러운 한국어를 우선합니다. - 용어 선택은 `TERMINOLOGY.md`를 따릅니다. -- 새 금지어, 선호어, 번역어 결정이 생기면 `TERMINOLOGY.md` 갱신을 검토합니다. +- 여러 파일에 반복되고 향후에도 안정적으로 사용할 새 금지어, 선호어, 번역어만 `TERMINOLOGY.md`에 추가하며, 일회성 표현과 미확정 용어는 추가하지 않습니다. - 불필요한 `의`, `것`, `게`, `저희`를 줄입니다. - 주어가 필요 없으면 생략하고, 필요하면 `Vite 팀`, `Vite 문서`, `이 문서`처럼 구체적으로 씁니다. - `해줍니다`, `가능하게 합니다`, `열어줍니다`, `느끼게 합니다` 같은 번역투를 피하고 직접적인 동사로 고칩니다. @@ -76,6 +97,9 @@ ## Workflow - 작업용 spec, plan, audit, inventory 문서는 `.context/` 아래에 둘 수 있지만 커밋하지 않습니다. +- sync inventory에는 upstream 도입/변경 commit, Base 존재 여부, 현재 번역 상태, 번역/비번역 판정, intentional-divergence 근거, 최종 처리를 기록합니다. +- 여러 upstream 변경을 한 번에 동기화하는 작업을 시작할 때 `.github/PULL_REQUEST_TEMPLATE/upstream-sync.md`를 먼저 읽고, PR 필드에 필요한 근거를 작업 inventory에 수집합니다. +- PR 준비 시 같은 템플릿을 다시 읽고 live label, assignee, Target ancestry를 재확인합니다. 빈 항목, placeholder, 미분류 Target hunk가 있으면 PR을 생성하지 않으며, 검증이 끝난 이슈에만 종료 키워드를 사용합니다. - 커밋 메시지는 `: ` 형식을 사용합니다. - 번역 외 최신화와 번역 품질 개정이 섞이는 대형 작업은 batch commit으로 분리합니다. - 외부 push, PR 생성, PR comment 작성, merge 같은 네트워크 쓰기 작업은 사용자 승인 후에만 합니다. @@ -95,6 +119,9 @@ git diff --check origin/main...HEAD - upstream 기준 ref가 명확한가 - 새 upstream 문서/섹션/asset이 누락되지 않았는가 - Vue 파일과 VitePress UI 문자열까지 번역 대상으로 봤는가 +- 모든 Target hunk가 분류됐고 intentional divergence가 보존됐는지 확인합니다. +- local-only 삭제에는 참조와 이력 근거가 있으며, 번역 제목 anchor가 원문 slug와 일치하는지 확인합니다. - line parity 제외 파일 외에 줄 수 차이가 있다면 이유가 설명 가능한가 - 직접 인용문과 코드 식별자가 의도치 않게 번역되지 않았는가 - `pnpm build`가 통과하는가 +- AI agent 규칙을 변경했다면 `CLAUDE.md`의 exact adapter와 `AGENTS.md`의 32 KiB 제한을 확인하고, 새 Codex와 Claude Code session에서 root 규칙의 로딩과 핵심 workflow 재진술을 검증했는가 diff --git a/TERMINOLOGY.md b/TERMINOLOGY.md index 89d185b0a..1b945d927 100644 --- a/TERMINOLOGY.md +++ b/TERMINOLOGY.md @@ -7,6 +7,7 @@ | Application | 애플리케이션 | | Branch | 브랜치 | | Bundle | 번들 | +| Chunk | 청크 | | Conditional | 조건부 | | Convention | 컨벤션 | | Dependency | 디펜던시 | @@ -38,6 +39,7 @@ | Type Signature | 타입 시그니처 | | Placeholder | 자리 표시자 | | Import | 임포트 | +| Import Map | 임포트 맵 | | Export | 익스포트 | | Load | 로드 | | Transform | 변환 | diff --git a/_data/team.js b/_data/team.js index 0db6c439f..4da170007 100644 --- a/_data/team.js +++ b/_data/team.js @@ -5,7 +5,7 @@ export const core = [ title: 'Creator', org: 'Vue.js', orgLink: 'https://vuejs.org/', - desc: 'Independent open source developer, creator of Vue.js and Vite.', + desc: 'Creator of Vue.js and Vite.', links: [ { icon: 'github', link: 'https://github.com/yyx990803' }, { icon: 'x', link: 'https://x.com/evanyou' }, @@ -13,6 +13,21 @@ export const core = [ ], sponsor: 'https://github.com/sponsors/yyx990803', }, + { + avatar: 'https://github.com/sapphi-red.png', + name: 'sapphi-red', + title: 'Web Developer', + org: 'VoidZero', + orgLink: 'https://voidzero.dev/', + desc: 'Vite core team member. Call me sapphi or midori ;)', + links: [ + { icon: 'github', link: 'https://github.com/sapphi-red' }, + { icon: 'bluesky', link: 'https://bsky.app/profile/sapphi.red' }, + { icon: 'twitter', link: 'https://twitter.com/sapphi_red' }, + { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@sapphi_red' }, + ], + sponsor: 'https://github.com/sponsors/sapphi-red', + }, { avatar: 'https://www.github.com/patak-cat.png', name: 'Patak', @@ -28,9 +43,9 @@ export const core = [ avatar: 'https://www.github.com/antfu.png', name: 'Anthony Fu', title: 'A fanatical open sourceror', - org: 'NuxtLabs', - orgLink: 'https://nuxtlabs.com/', - desc: 'Core team member of Vite & Vue. Working at NuxtLabs.', + org: 'Vercel', + orgLink: 'https://vercel.com/', + desc: 'Core team member of Vite & Vue. Working on Nuxt.', links: [ { icon: 'github', link: 'https://github.com/antfu' }, { icon: 'bluesky', link: 'https://bsky.app/profile/antfu.me' }, @@ -51,19 +66,6 @@ export const core = [ ], sponsor: 'https://bjornlu.com/sponsor', }, - { - avatar: 'https://github.com/sapphi-red.png', - name: 'green', - title: 'Web Developer', - desc: 'Vite core team member. Call me sapphi or green or midori ;)', - links: [ - { icon: 'github', link: 'https://github.com/sapphi-red' }, - { icon: 'bluesky', link: 'https://bsky.app/profile/sapphi.red' }, - { icon: 'twitter', link: 'https://twitter.com/sapphi_red' }, - { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@sapphi_red' }, - ], - sponsor: 'https://github.com/sponsors/sapphi-red', - }, { avatar: 'https://github.com/ArnaudBarre.png', name: 'Arnaud Barré', @@ -79,21 +81,12 @@ export const core = [ ], sponsor: 'https://github.com/sponsors/ArnaudBarre', }, - { - avatar: 'https://github.com/dominikg.png', - name: 'Dominik G.', - title: 'Resident CI Expert', - desc: 'Team Member of Vite and Svelte', - links: [ - { icon: 'github', link: 'https://github.com/dominikg' }, - { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@dominikg' }, - ], - sponsor: 'https://github.com/sponsors/dominikg', - }, { avatar: 'https://github.com/sheremet-va.png', name: 'Vladimir', title: 'Core team member of Vitest & Vite', + org: 'VoidZero', + orgLink: 'https://voidzero.dev/', desc: 'An open source fullstack developer', links: [ { icon: 'github', link: 'https://github.com/sheremet-va' }, @@ -106,6 +99,8 @@ export const core = [ avatar: 'https://github.com/hi-ogawa.png', name: 'Hiroshi Ogawa', title: 'Team Member of Vitest & Vite', + org: 'VoidZero', + orgLink: 'https://voidzero.dev/', desc: 'Open source enthusiast', links: [ { icon: 'github', link: 'https://github.com/hi-ogawa' }, @@ -121,6 +116,43 @@ export const core = [ }, ] +export const advisors = [ + { + avatar: 'https://github.com/serhalp.png', + name: 'Philippe Serhal', + title: 'Staff Software Engineer', + org: 'Netlify', + orgLink: 'https://www.netlify.com/', + desc: 'Juggling all the frameworks at Netlify', + links: [ + { icon: 'github', link: 'https://github.com/serhalp' }, + { icon: 'bluesky', link: 'https://bsky.app/profile/philippeserhal.com' }, + ], + }, + { + avatar: 'https://github.com/jamesopstad.png', + name: 'James Opstad', + title: 'Senior Engineer', + org: 'Cloudflare', + orgLink: 'https://www.cloudflare.com/', + desc: 'Building developer tools at Cloudflare', + links: [{ icon: 'github', link: 'https://github.com/jamesopstad' }], + }, + { + avatar: 'https://github.com/danielroe.png', + name: 'Daniel Roe', + title: 'Open Source Maintainer', + org: 'Vercel', + orgLink: 'https://vercel.com/', + desc: 'Leading the Nuxt team', + links: [ + { icon: 'github', link: 'https://github.com/danielroe' }, + { icon: 'bluesky', link: 'https://bsky.app/profile/danielroe.dev' }, + ], + sponsor: 'https://github.com/sponsors/danielroe', + }, +] + export const emeriti = [ { avatar: 'https://i.imgur.com/KMed6rQ.jpeg', @@ -215,4 +247,15 @@ export const emeriti = [ ], sponsor: 'https://github.com/sponsors/haoqunjiang', }, + { + avatar: 'https://github.com/dominikg.png', + name: 'Dominik G.', + title: 'Resident CI Expert', + desc: 'Team Member of Vite and Svelte', + links: [ + { icon: 'github', link: 'https://github.com/dominikg' }, + { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@dominikg' }, + ], + sponsor: 'https://github.com/sponsors/dominikg', + }, ] diff --git a/blog/announcing-vite5-1.md b/blog/announcing-vite5-1.md index b8e4deb51..7e14db7ca 100644 --- a/blog/announcing-vite5-1.md +++ b/blog/announcing-vite5-1.md @@ -54,7 +54,7 @@ Vite 5.1은 새로운 Vite Runtime API에 대한 실험적 지원을 추가합 - node/bun/deno 내장 API에 의존하지 않으므로 어떤 환경에서도 실행할 수 있습니다. - 자체적인 코드 실행 메커니즘을 가진 도구와 쉽게 통합할 수 있습니다(예를 들어 `new AsyncFunction` 대신 `eval`을 사용하는 러너를 제공할 수 있습니다). -초기 아이디어는 [Pooya Parsa가 제안했고](https://github.com/nuxt/vite/pull/201) [Anthony Fu](https://github.com/antfu)가 [vite-node](https://github.com/vitest-dev/vitest/tree/main/packages/vite-node#readme) 패키지로 구현하여 [Nuxt 3 Dev SSR을 지원하고](https://antfu.me/posts/dev-ssr-on-nuxt) 나중에 [Vitest](https://vitest.dev)의 기반으로도 사용되었습니다. 따라서 vite-node의 일반적인 아이디어는 상당한 시간 동안 실전에서 검증되었습니다. 이는 [Vladimir Sheremet](https://github.com/sheremet-va)에 의한 API의 새로운 반복으로, 그는 이미 Vitest에서 vite-node를 재구현했으며 학습한 내용을 바탕으로 Vite Core에 추가할 때 API를 더욱 강력하고 유연하게 만들었습니다. 이 PR은 1년간 제작되었으며, 생태계 유지보수자들과의 발전과 논의 과정을 [여기서](https://github.com/vitejs/vite/issues/12165) 확인할 수 있습니다. +초기 아이디어는 [Pooya Parsa가 제안했고](https://github.com/nuxt/vite/pull/201) [Anthony Fu](https://github.com/antfu)가 [vite-node](https://www.npmjs.com/package/vite-node) 패키지로 구현하여 [Nuxt 3 Dev SSR을 지원하고](https://antfu.me/posts/dev-ssr-on-nuxt) 나중에 [Vitest](https://vitest.dev)의 기반으로도 사용되었습니다. 따라서 vite-node의 일반적인 아이디어는 상당한 시간 동안 실전에서 검증되었습니다. 이는 [Vladimir Sheremet](https://github.com/sheremet-va)에 의한 API의 새로운 반복으로, 그는 이미 Vitest에서 vite-node를 재구현했으며 학습한 내용을 바탕으로 Vite Core에 추가할 때 API를 더욱 강력하고 유연하게 만들었습니다. 이 PR은 1년간 제작되었으며, 생태계 유지보수자들과의 발전과 논의 과정을 [여기서](https://github.com/vitejs/vite/issues/12165) 확인할 수 있습니다. ::: info Vite Runtime API는 Module Runner API로 발전하여 [Environment API](/guide/api-environment)의 일부로 Vite 6에서 출시되었습니다. diff --git a/blog/announcing-vite6.md b/blog/announcing-vite6.md index fe8409006..ed6060a35 100644 --- a/blog/announcing-vite6.md +++ b/blog/announcing-vite6.md @@ -43,7 +43,7 @@ Vite는 OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, Red ## Vite 생태계 가속화 {#speeding-up-the-vite-ecosystem} -지난달, 커뮤니티는 세 번째 [ViteConf](https://viteconf.org/24/replay)에 모였고, [StackBlitz](https://stackblitz.com)가 다시 한 번 주최했습니다. 이는 생태계 빌더들의 폭넓은 참여로 가장 큰 Vite 컨퍼런스였습니다. 다른 발표들 중에서도, Evan You는 JavaScript 생태계를 위한 오픈소스, 고성능, 통합 개발 툴체인 구축에 전념하는 회사인 [VoidZero](https://staging.voidzero.dev/posts/announcing-voidzero-inc)를 발표했습니다. VoidZero는 [Rolldown](https://rolldown.rs)과 [Oxc](https://oxc.rs)를 뒷받침하고 있으며, 그들의 팀은 Vite에서 채택될 수 있도록 빠르게 준비시키며 상당한 진전을 이루고 있습니다. Vite의 Rust 기반 미래에 대한 다음 단계를 더 자세히 알아보려면 Evan의 기조연설을 시청해보세요. +지난달, 커뮤니티는 세 번째 [ViteConf](https://viteconf.org/24/replay)에 모였고, [StackBlitz](https://stackblitz.com)가 다시 한 번 주최했습니다. 이는 생태계 빌더들의 폭넓은 참여로 가장 큰 Vite 컨퍼런스였습니다. 다른 발표들 중에서도, Evan You는 JavaScript 생태계를 위한 오픈소스, 고성능, 통합 개발 툴체인 구축에 전념하는 회사인 [VoidZero](https://voidzero.dev/posts/announcing-voidzero-inc)를 발표했습니다. VoidZero는 [Rolldown](https://rolldown.rs)과 [Oxc](https://oxc.rs)를 뒷받침하고 있으며, 그들의 팀은 Vite에서 채택될 수 있도록 빠르게 준비시키며 상당한 진전을 이루고 있습니다. Vite의 Rust 기반 미래에 대한 다음 단계를 더 자세히 알아보려면 Evan의 기조연설을 시청해보세요. diff --git a/blog/announcing-vite8-1.md b/blog/announcing-vite8-1.md new file mode 100644 index 000000000..cfbc617c5 --- /dev/null +++ b/blog/announcing-vite8-1.md @@ -0,0 +1,183 @@ +--- +title: Vite 8.1이 출시되었습니다! +author: + name: The Vite Team +date: 2026-06-23 +sidebar: false +head: + - - meta + - property: og:type + content: website + - - meta + - property: og:title + content: Vite 8.1 발표 + - - meta + - property: og:image + content: https://vite.dev/og-image-announcing-vite8-1.webp + - - meta + - property: og:url + content: https://vite.dev/blog/announcing-vite8-1 + - - meta + - property: og:description + content: Vite 8.1 릴리스 발표 + + - - meta + - name: twitter:card + content: summary_large_image +--- + +# Vite 8.1이 출시되었습니다! {#vite-8-1-is-out} + +_2026년 6월 23일_ + +![Vite 8.1 발표 커버 이미지](/og-image-announcing-vite8-1.webp) + +Vite 8은 지난 3월 [출시되었으며](./announcing-vite8.md), [Rolldown](https://rolldown.rs/) 기반의 단일 통합 번들러를 통해 추가 개선의 길을 열었습니다. 현재 주간 다운로드 수는 4,160만 회로, Vite 7의 전체 다운로드 수에 거의 도달했습니다. 업그레이드 회귀를 해결하는 한편 새로운 기능을 개발해 왔으며, Vite 8.1 릴리스를 발표하게 되어 기쁩니다. + +빠른 링크: + +- [문서](/) +- 번역: [简体中文](https://cn.vite.dev/), [日本語](https://ja.vite.dev/), [Español](https://es.vite.dev/), [Português](https://pt.vite.dev/), [한국어](https://ko.vite.dev/), [Deutsch](https://de.vite.dev/), [فارسی](https://fa.vite.dev/) +- [GitHub 변경 사항](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) + +[vite.new](https://vite.new)를 사용해 Vite 8.1을 온라인에서 체험하거나, `pnpm create vite`를 실행해 선호하는 프레임워크로 Vite 앱을 로컬에서 스캐폴딩하세요. 자세한 정보는 [시작하기 가이드](/guide/)를 확인하세요. + +Vite 개선에 참여해 주시기를 바랍니다. [Vite Core에 기여한 1,200명 이상의 사람들](https://github.com/vitejs/vite/graphs/contributors)과 함께하거나, Vite의 디펜던시, 생태계 플러그인과 프로젝트에 기여할 수 있습니다. 자세한 내용은 [기여 가이드](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md)에서 확인하세요. 시작하기 좋은 방법은 [이슈 분류](https://github.com/vitejs/vite/issues), [PR 리뷰](https://github.com/vitejs/vite/pulls), 열린 이슈를 기반으로 한 테스트 PR 전송, [Discussions](https://github.com/vitejs/vite/discussions)나 Vite Land의 [도움말 포럼](https://discord.com/channels/804011606160703521/1019670660856942652)에서 다른 사람을 돕는 것입니다. 질문이 있다면 [Discord 커뮤니티](https://chat.vite.dev)에 참여해 [#contributing 채널](https://discord.com/channels/804011606160703521/804439875226173480)에서 Vite 팀과 이야기하세요. + +[Bluesky](https://bsky.app/profile/vite.dev), [X](https://twitter.com/vite_js), 또는 [Mastodon](https://webtoo.ls/@vite)에서 Vite를 팔로우하여 최신 소식을 받고 Vite 위에 구축하는 다른 사람들과 소통하세요. + +## 기능 {#features} + +### 실험적 전체 번들링 모드 {#experimental-bundled-dev-mode} + +전체 번들링 모드를 이제 실험적으로 사용할 수 있습니다. 이전에는 "Full Bundle Mode"라고 불렀습니다. 모듈 수 때문에 어려움을 겪는 대규모 애플리케이션의 성능을 개선하는 모드입니다. + +React 컴포넌트 10,000개를 로드하는 앱으로 실시한 초기 테스트에서 전체 번들링 모드는 번들하지 않는 개발 서버와 비교해 시작 속도가 약 15배, 전체 페이지 리로드 속도가 10배 빨랐고, 애플리케이션 크기와 관계없이 HMR은 즉각적으로 유지되었습니다. 실제 애플리케이션을 대상으로 한 초기 테스트에서도 비슷한 개선을 확인했습니다. Linear 팀은 콜드 스타트 렌더링이 최대 3배, 전체 리로드가 약 40% 빨라졌고 네트워크 요청은 10배 줄었습니다. + +::: details 왜 전체 번들링 모드인가요? + +Vite는 번들하지 않는 개발 서버 방식으로 잘 알려져 있으며, 이 방식은 Vite가 처음 등장했을 때 속도와 인기를 얻은 주된 이유였습니다. 처음에는 전통적인 번들링 없이 개발 서버 성능의 한계를 어디까지 끌어올릴 수 있는지 알아보는 실험이었습니다. + +그러나 프로젝트의 규모와 복잡성이 커지면서 Vite의 번들하지 않는 개발 방식이 개발 중 성능을 떨어뜨릴 수 있다는 사실이 분명해졌습니다. 각 모듈을 개별적으로 가져오므로 브라우저는 많은 요청을 처리해야 하고, 이로 인해 시작과 새로고침 오버헤드가 증가합니다. 이러한 영향은 대규모 애플리케이션에서 특히 두드러지며, 개발자가 네트워크 프록시 뒤에 있을 때 더 심해져 새로고침이 느려지고 개발자 경험이 나빠집니다. + +전체 번들링 모드는 프로덕션뿐 아니라 개발 중에도 번들링된 파일을 제공해 두 방식의 장점을 결합합니다: + +- 대규모 애플리케이션에서도 빠른 시작 +- 페이지 새로고침 시 네트워크 오버헤드 감소 +- ESM 출력에서 효율적인 HMR 유지 + +::: + +현재 브라우저 측과 기본 플러그인, 주요 기능에 중점을 두고 있습니다. 서드 파티 플러그인을 사용한다면 이 모드에서 동작하지 않을 수 있습니다. 세부 기능도 동작하지 않을 수 있습니다. 지원 범위를 넓히는 한편, 플러그인 측에서 필요할 수 있는 변경 사항을 명확히 설명하는 문서를 준비하고 있습니다. 로드맵에 대한 자세한 내용은 [설계 문서](https://github.com/vitejs/vite/discussions/22746)를 참고하세요. + +이 모드를 활성화하려면 `--experimental-bundle`을 전달하거나 `vite.config.js`에 `experimental.bundledDev: true`를 추가하세요: + +```ts [vite.config.js] +import { defineConfig } from 'vite' + +export default defineConfig({ + experimental: { + bundledDev: true, + }, +}) +``` + +[논의](https://github.com/vitejs/vite/discussions/22747)에 피드백을 공유해 주세요. + +### 실험적 청크 임포트 맵 {#experimental-chunk-import-map} + +출력 번들에서 청크의 임포트 구문은 해당 청크의 해시를 포함합니다. 청크 내용이 바뀌면 새 청크가 로드되도록 하기 위함입니다. 하지만 변경된 청크를 임포트하는 청크의 해시도 바뀌며, 변경 사항은 그 청크를 전이적으로 임포트하는 모든 청크로 연쇄됩니다. + +```dot +digraph chunk_hash_cascade { + rankdir=TB + node [shape=box style="rounded,filled" fontname="Arial" fontsize=11 margin="0.25,0.12" fontcolor="${#3c3c43|#ffffff}" color="${#c2c2c4|#3c3f44}"] + edge [color="${#67676c|#98989f}" fontname="Arial" fontsize=10 fontcolor="${#67676c|#98989f}"] + bgcolor="transparent" + + utils [label="utils.[e5f6 → 88xx].js\ncontent edited" fillcolor="${#fcf4dc|#38301a}" color="${#e0a800|#d4a72c}"] + page [label="page.[c3d4 → 77yy].js\nre-hashed by cascade" fillcolor="${#fde8e8|#3a1f22}" color="${#d5393e|#f66f81}"] + entry [label="entry.[a1b2 → 99zz].js\nre-hashed by cascade" fillcolor="${#fde8e8|#3a1f22}" color="${#d5393e|#f66f81}"] + + entry -> page [label=" imports (embeds hash)\l" color="${#d5393e|#f66f81}" fontcolor="${#d5393e|#f66f81}"] + page -> utils [label=" imports (embeds hash)\l" color="${#d5393e|#f66f81}" fontcolor="${#d5393e|#f66f81}"] +} +``` + +실험적 청크 임포트 맵 기능은 임포트 맵을 활용해 이 문제를 해결하고 캐시 효율을 높입니다. 이 기능은 [Rolldown의 기능](https://rolldown.rs/reference/InputOptions.experimental#chunkimportmap)을 기반으로 하지만, Vite 고유 기능 지원을 추가합니다. 이 기능을 연구하고 초기에 구현한 [Taisei Mima](https://github.com/bhbs)에게 깊이 감사드립니다! + +현재 `experimental.renderBuiltUrl`은 이 옵션과 함께 동작하지 않습니다. + +자세한 내용은 [가이드](/guide/features#chunk-import-map-optimization)와 [옵션 문서](/config/build-options#build-chunkimportmap)를 참고하세요. [논의](https://github.com/vitejs/vite/discussions/22703)에 피드백을 공유해 주세요. + +### Wasm ESM 통합 지원 {#wasm-esm-integration-support} + +[Wasm ESM 통합 제안](https://github.com/WebAssembly/esm-integration/blob/main/proposals/esm-integration/README.md)을 이제 Vite에서 지원합니다. wasm 파일을 임포트하고 내보낸 함수를 직접 사용할 수 있습니다: + +```ts +import { add } from './add.wasm' + +console.log(add(1, 2)) // 3 +``` + +제안이 초기 단계에 있을 때 vite-plugin-wasm을 만들고 유지보수했으며, 구현을 Vite 코어에 반영해 준 [Menci](https://github.com/Menci)에게 깊이 감사드립니다! + +자세한 내용은 [가이드](/guide/features#esm-integration)를 참고하세요. + +### Lightning CSS 기본 사용에 한 걸음 더 가까이 {#one-step-closer-to-use-lightning-css-by-default} + +PostCSS는 지원하지만 Lightning CSS에는 없던 기능을 추가하기 위해 Lightning CSS 팀과 협력했습니다. Vite 8.1은 이제 다음 두 기능을 제공합니다: + +- CSS 파일에서 임포트한 외부 CSS 파일 허용 ([lightningcss#479](https://github.com/parcel-bundler/lightningcss/issues/479)) +- 플러그인이 파일 디펜던시를 등록하도록 지원 ([lightningcss#877](https://github.com/parcel-bundler/lightningcss/issues/877)) + +다음 메이저 릴리스에서 기본 CSS 전처리기를 Lightning CSS로 변경하는 방안을 검토 중입니다. [`css.transformer: 'lightningcss'`](/config/shared-options#css-transformer) 설정을 사용해 보시고 [논의](https://github.com/vitejs/vite/discussions/13835)에 피드백을 공유해 주세요. + +### `import.meta.glob`의 대소문자 구분 없는 일치 {#case-insensitive-matching-for-import-meta-glob} + +`import.meta.glob`은 이제 `caseSensitive` 옵션을 지원해 대소문자를 구분하지 않고 파일을 일치시킬 수 있습니다. + +```ts +// ./dir/Module1.js와 일치 +const modules = import.meta.glob('./dir/module*.js', { + caseSensitive: false, +}) +``` + +### 커스텀 HTML 요소와 속성의 에셋 탐색 {#asset-discovery-for-custom-html-elements-and-attributes} + +이전에는 Vite가 미리 정의된 요소와 속성에서만 에셋을 탐색했습니다. 이제 [`html.additionalAssetSources`](/config/shared-options#html-additionalassetsources) 옵션으로 요소와 속성을 더 추가할 수 있습니다. + +```html + + +``` + +```ts [vite.config.js] +import { defineConfig } from 'vite' + +export default defineConfig({ + html: { + additionalAssetSources: { + 'html-import': { + srcAttributes: 'src', + }, + img: { + srcAttributes: ['data-src-dark', 'data-src-light'], + }, + }, + }, +}) +``` + +## 기타 변경 사항 {#other-changes} + +그 밖의 기능과 버그 수정은 [변경 사항](https://github.com/vitejs/vite/blob/v8.1.0/packages/vite/CHANGELOG.md)에서 확인하세요. + +## 감사의 말 {#acknowledgments} + +Vite 8.1은 기여자 커뮤니티, 생태계 유지보수자, [Vite 팀](/team) 덕분에 만들어졌습니다. Vite는 [Bolt](https://bolt.new/) 및 [Nuxt Labs](https://nuxtlabs.com/)와의 파트너십으로 [VoidZero](https://voidzero.dev)가 제공합니다. 또한 [Vite의 GitHub Sponsors](https://github.com/sponsors/vitejs)와 [Vite의 Open Collective](https://opencollective.com/vite)의 후원자들에게도 감사드립니다. diff --git a/blog/cloudflare-supports-vite.md b/blog/cloudflare-supports-vite.md new file mode 100644 index 000000000..026210cbe --- /dev/null +++ b/blog/cloudflare-supports-vite.md @@ -0,0 +1,61 @@ +--- +title: Cloudflare가 Vite의 사명을 지원합니다 +author: + name: The Vite Team +date: 2026-06-04 +sidebar: false +head: + - - meta + - property: og:type + content: website + - - meta + - property: og:title + content: Cloudflare가 Vite의 사명을 지원합니다 + - - meta + - property: og:image + content: https://vite.dev/og-image-cloudflare-supports-vite.webp + - - meta + - property: og:url + content: https://vite.dev/blog/cloudflare-supports-vite + - - meta + - property: og:description + content: VoidZero 팀이 Cloudflare에 합류합니다. Vite는 MIT 라이선스와 벤더 중립성을 유지하며, 기존처럼 다양한 구성원으로 이뤄진 팀이 계속 관리합니다. + - - meta + - name: twitter:card + content: summary_large_image +--- + +# Cloudflare가 Vite의 사명을 지원합니다 {#cloudflare-supports-vite-s-mission} + +_2026년 6월 4일_ + +![Cloudflare의 Vite 사명 지원 커버 이미지](/og-image-cloudflare-supports-vite.webp) + +오늘 Vite의 새로운 단계가 시작됩니다. VoidZero가 Cloudflare에 합류합니다. 전체 이야기는 [VoidZero의 발표](https://voidzero.dev/posts/voidzero-cloudflare)에 실린 Evan You의 글에서 확인할 수 있습니다. [Cloudflare 블로그 게시물](https://blog.cloudflare.com/voidzero-joins-cloudflare/)에서는 이제 웹의 기반 인프라로 자리 잡은 Vite 스택에 투자하는 이유를 설명합니다. Vite의 팀 거버넌스, 사명, 철학은 바뀌지 않습니다: + +- Vite는 MIT 라이선스의 오픈 소스로 유지됩니다. +- Vite는 특정 벤더에 종속되지 않으며, Vite로 만든 애플리케이션은 어디서나 실행할 수 있어야 합니다. +- Vite는 서로 다른 조직에 소속된 구성원과 독립 구성원으로 이루어진 [Vite 팀](/team)이 계속 관리합니다. +- [Vite의 Open Collective](https://opencollective.com/vite) 기금은 Vite 팀이 관리하며, 독립적으로 활동하는 코어 팀원과 디펜던시, 생태계의 다른 핵심 프로젝트를 지원하는 데 사용됩니다. +- VoidZero에 소속된 Vite 팀원은 모두 Cloudflare에 합류해 Vite 작업을 계속합니다. + +VoidZero와 Cloudflare의 발표에서 밝혔듯이 [Vitest](https://vitest.dev/team.html), [Rolldown](https://rolldown.rs/team), [Oxc](https://oxc.rs/team.html), [Vite+](https://viteplus.dev/team)도 마찬가지입니다. + +## Cloudflare Vite 생태계 오픈 소스 펀드 {#cloudflare-s-vite-ecosystem-open-source-fund} + +Cloudflare는 Vite가 중립성을 유지하도록 지원하는 데 전념하며, Vite 생태계를 위한 새로운 $1M 규모의 오픈 소스 펀드도 발표했습니다. Vite 팀이 계속 관리하는 Vite의 Open Collective와 함께, 이 기금은 다음을 포함해 Vite와 생태계를 더 개선할 수 있도록 지원합니다: + +- 생태계에서 널리 사용되는 플러그인과 도구를 더 많이 후원합니다. +- 독립적으로 활동하는 팀원을 지원하기 위해 코어 팀원 수당을 도입합니다. +- Rolldown, Oxc, Vite+를 비롯한 Vite 스택의 팀과 긴밀히 협력합니다. +- 프레임워크, 플러그인, 배포 플랫폼의 생태계 유지보수자와 긴밀히 협력합니다. +- 표준화 기구와 협력해 새로운 웹 플랫폼 기능을 더 빠르게 도입합니다. +- 보안 이슈를 더 신속하게 점검하고 공개합니다. + +이 중 다수는 이미 진행 중이며, 이번 지원으로 속도를 더 낼 수 있습니다. + +## 감사합니다 {#thank-you} + +지금도 큰 힘이 되어 주는 [GitHub Sponsors](https://github.com/sponsors/vitejs)와 [Open Collective](https://opencollective.com/vite)의 후원자들에게 감사드립니다. 협업을 통해 Vite가 오늘날의 위치에 도달하도록 도운 여러 프로젝트, 생태계 프레임워크, 플러그인 팀에도 감사드립니다. 또한 [Vite 리포지토리에 기여한 1,250명 이상의 기여자](https://github.com/vitejs/vite/graphs/contributors)와 Vite 개선에 소중한 피드백을 계속 전해 주는 사용자들에게도 감사드립니다. + +[Vite 8 발표](/blog/announcing-vite8#looking-ahead)에서 앞으로의 계획을 이야기했습니다. 전체 번들링 모드 개발은 순조롭게 진행 중이며, 여러 프레임워크, 배포 플랫폼, 플러그인 구성원이 모이는 새로운 생태계 동기화 회의는 Vite의 역량을 더 넓힐 아이디어를 만드는 훌륭한 동력이 되었습니다. Vite 9에서 Vite의 Environment API를 안정화하는 작업도 순조롭게 진행 중이라고 생각합니다. Vite의 이야기가 계속 펼쳐지는 가운데, 앞으로도 함께 웹을 만들어 갈 긴 여정이 기대됩니다. diff --git a/config/build-options.md b/config/build-options.md index 69dffdd97..6abe202f4 100644 --- a/config/build-options.md +++ b/config/build-options.md @@ -8,7 +8,7 @@ - **기본값:** `'baseline-widely-available'` - **관련 항목:** [브라우저 지원 현황](/guide/build#browser-compatibility) -최종 번들에 대한 브라우저 호환성 타깃입니다. 기본값은 Vite 전용 값인 `'baseline-widely-available'`로, 2026-01-01에 [Baseline](https://web-platform-dx.github.io/web-features/) Widely Available에 포함된 브라우저를 타깃으로 합니다. 구체적으로는 `['chrome111', 'edge111', 'firefox114', 'safari16.4']`입니다. +최종 번들에 대한 브라우저 호환성 타깃입니다. 기본값은 Vite 전용 값인 `'baseline-widely-available'`로, 2026-01-01에 [Baseline](https://web-platform-dx.github.io/web-features/) Widely Available에 포함된 브라우저를 타깃으로 합니다. 구체적으로는 `['chrome111', 'edge111', 'firefox114', 'safari16.4', 'ios16.4']`입니다. 또 다른 Vite 한정 옵션은 `'esnext'` 로, 네이티브 동적 Import를 지원하며 트랜스파일링을 최소한만 수행합니다. @@ -147,6 +147,17 @@ npm add -D esbuild 프로덕션에서 소스 맵을 생성합니다. `true`인 경우 별도의 소스 맵 파일이 생성됩니다. `'inline'`인 경우 소스 맵이 결과 출력 파일에 데이터 URI로 추가됩니다. `'hidden'`은 번들 파일의 해당 소스 맵 설명이 표시되지 않는 경우를 제외하고 `true`와 같이 작동합니다. +## build.chunkImportMap {#build-chunkimportmap} + +- **타입:** `boolean` +- **기본값:** `false` +- **실험적 기능** +- **관련 항목:** [청크 임포트 맵 최적화](/guide/features#chunk-import-map-optimization) + +청크 캐시 효율을 최적화하기 위해 임포트 맵 기능을 사용할지 여부입니다. + +이 옵션을 사용하려면 실행 환경에서 [`import.meta.resolve`](https://caniuse.com/mdn-javascript_operators_import_meta_resolve)를 지원해야 합니다. 구형 브라우저를 지원해야 한다면 [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy)를 참고하세요. + ## build.rolldownOptions {#build-rolldownoptions} - **타입:** [`RolldownOptions`](https://rolldown.rs/reference/) diff --git a/config/server-options.md b/config/server-options.md index 058cc15f6..983d28aff 100644 --- a/config/server-options.md +++ b/config/server-options.md @@ -57,7 +57,7 @@ HTTPS를 사용하는 경우 이 검사는 건너뜁니다. ::: ::: details 환경 변수를 통해 설정하기 -`__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` 환경 변수를 통해 허용할 호스트를 추가로 지정할 수 있습니다. +`__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` 환경 변수로 허용할 호스트를 추가할 수 있습니다. 여러 호스트는 쉼표로 구분하세요(예: `host1.example.com,host2.example.com`). ::: ## server.port {#server-port} @@ -142,7 +142,7 @@ export default defineConfig({ target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, configure: (proxy, options) => { - // proxy는 'http-proxy'의 인스턴스입니다. + // proxy는 'http-proxy-3'의 인스턴스입니다. }, }, // WebSocket 또는 socket.io 프록시: @@ -181,17 +181,45 @@ export default defineConfig({ ## server.hmr {#server-hmr} -- **타입:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }` +- **타입:** `boolean | { overlay?: boolean }` -HMR 연결을 설정하거나 사용하지 않을 수 있습니다. (HMR 웹 소켓이 http 서버와 다른 주소를 사용해야 하는 경우) +HMR 동작을 비활성화하거나 설정합니다. 서버 오류 오버레이를 사용하지 않으려면 `server.hmr.overlay`를 `false`로 설정하세요. -`protocol`은 HMR 연결에 사용되는 웹소켓 프로토콜을 설정합니다: `ws` (웹소켓) 또는 `wss` (보안 웹소켓) 값을 갖습니다. +::: warning 사용 중단된 옵션 -`clientPort`는 클라이언트 측의 포트만 재정의하는 고급 옵션으로, 클라이언트 코드에서 찾는 것과 다른 포트에서 웹 소켓을 제공할 수 있습니다. +WebSocket 관련 옵션(`protocol`, `host`, `port`, `path`, `clientPort`, `timeout`, `server`)은 사용 중단되었습니다. 대신 [`server.ws`](#server-ws)를 사용하세요. 사용 중단된 옵션은 자동으로 동기화되므로 기존 설정은 계속 동작합니다. -`server.hmr.server` 옵션이 정의되면 Vite는 제공된 서버를 통해 HMR 연결 요청을 처리합니다. 미들웨어 모드가 아니라면, Vite는 기존 서버를 통해 HMR 연결 요청을 처리합니다. 이는 자체적으로 서명된 인증서를 사용하거나 단일 포트의 네트워크를 통해 Vite를 제공하려는 경우 유용합니다. +::: + +## server.ws {#server-ws} + +- **타입:** `false | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, clientPort?: number, server?: Server }` + +WebSocket 연결 옵션을 설정합니다. WebSocket 연결을 완전히 비활성화하려면 `false`로 설정하세요. + +- `protocol` - WebSocket 프로토콜(`ws` 또는 `wss`) +- `host` - WebSocket 서버 호스트 +- `port` - WebSocket 서버 포트 +- `path` - WebSocket 경로 +- `clientPort` - 클라이언트 측 포트를 재정의하여 클라이언트 코드가 찾는 포트와 다른 포트에서 WebSocket을 제공할 수 있습니다. +- `timeout` - 연결 제한 시간(밀리초 단위, 기본값: 30000) +- `server` - WebSocket 연결에 커스텀 HTTP 서버 사용 + +`server.ws.server` 옵션이 정의되면 Vite는 제공된 서버를 통해 WebSocket 연결 요청을 처리합니다. 미들웨어 모드가 아니라면 Vite는 기존 서버를 통해 WebSocket 연결 요청을 처리하려고 시도합니다. 이는 자체 서명된 인증서를 사용하거나 네트워크에서 Vite를 단일 포트로 제공하려는 경우 유용합니다. + +```js +export default defineConfig({ + server: { + ws: { + protocol: 'wss', + host: 'localhost', + port: 3001, + }, + }, +}) +``` 예제는 [`vite-setup-catalogue`](https://github.com/sapphi-red/vite-setup-catalogue)를 참고해주세요. @@ -200,14 +228,14 @@ HMR 연결을 설정하거나 사용하지 않을 수 있습니다. (HMR 웹 소 기본적으로 Vite는 리버스 프록시가 WebSocket 프록시를 지원한다고 가정하고 동작합니다. 만약 Vite HMR 클라이언트가 WebSocket 연결에 실패하게 되면, 클라이언트는 리버스 프록시 대신 WebSocket을 Vite HMR 서버에 직접 연결합니다: ``` -Direct websocket connection fallback. Check out https://vite.dev/config/server-options.html#server-hmr to remove the previous connection error. +Direct websocket connection fallback. Check out https://vite.dev/config/server-options.html#server-ws to remove the previous connection error. ``` 위와 같은 상황이 발생될 때 브라우저에 나타나는 이 오류는 무시해도 됩니다. 다만 아래의 작업들 중 하나를 통해 직접 리버스 프록시를 우회해서 오류를 나타나지 않게끔 할 수도 있습니다: - WebSocket도 프록시하도록 리버스 프록시를 구성 -- [`server.strictPort` 옵션의 값을 `true`로](#server-strictport), 그리고 `server.hmr.clientPort`를 `server.port`와 동일한 값으로 설정 -- `server.hmr.port`를 [`server.port`](#server-port)와 다른 값으로 설정 +- [`server.strictPort = true`](#server-strictport)로 설정하고 `server.ws.clientPort`를 `server.port`와 동일한 값으로 설정 +- `server.ws.port`를 [`server.port`](#server-port)와 다른 값으로 설정 ::: @@ -396,7 +424,7 @@ export default defineConfig({ ## server.fs.deny {#server-fs-deny} - **타입:** `string[]` -- **기본값:** `['.env', '.env.*', '*.{crt,pem}', '**/.git/**']` +- **기본값:** `['.env', '.env.*', '*.{crt,pem,key,p12,pfx,cer,der}', '.npmrc', '.yarnrc.yml', '**/.git/**']` Vite dev 서버에서 제공되지 않기를 원하는 민감한 파일들에 대한 차단 목록입니다. 이 옵션은 [`server.fs.allow`](#server-fs-allow)보다 높은 우선 순위를 가지며, [피코매치 패턴](https://github.com/micromatch/picomatch#globbing-features)을 사용할 수 있습니다. diff --git a/config/shared-options.md b/config/shared-options.md index d6a57816a..8af5325f2 100644 --- a/config/shared-options.md +++ b/config/shared-options.md @@ -207,6 +207,18 @@ SSR 빌드의 경우, `build.rolldownOptions.output`을 통해 구성된 ESM 빌 tsconfig paths 해석 기능을 활성화합니다. `tsconfig.json`의 `paths` 옵션이 import 해석에 사용됩니다. 자세한 내용은 [기능](/guide/features.md#paths)을 참고하세요. +`paths`는 `tsconfig.json`의 `files` 또는 `include`와 일치하는 파일에만 적용됩니다. 확장자가 JS가 아닌 파일은 여기에 명시적으로 나열해야 합니다. TypeScript 동작에 따라 단순한 `"src"` 또는 `"**/*"` `include`는 TS/JS 확장자만 일치시키기 때문입니다. 예를 들어 `paths` 별칭을 CSS 파일 안에서(예: `@import '@/foo.css'`) 사용하려면 해당 파일을 `files`에 나열하거나 `include`에 확장자를 명시하세요: + +```json [tsconfig.json] +{ + "include": ["src", "src/**/*.css", "src/**/*.scss"] +} +``` + +::: warning Less는 지원되지 않습니다 +`resolve.tsconfigPaths`는 `.less` 파일 안에 적용되지 않습니다. Less는 Vite에 임포트하는 파일 자체가 아닌 그 파일의 디렉터리만 전달하므로 Vite가 일치하는 `tsconfig.json`을 찾을 수 없습니다. Less에서는 상대 경로나 [`resolve.alias`](#resolve-alias)를 `@import`에 사용하세요. +::: + ## html.cspNonce {#html-cspnonce} - **타입:** `string` @@ -214,6 +226,48 @@ tsconfig paths 해석 기능을 활성화합니다. `tsconfig.json`의 `paths` 스크립트 및 스타일 태그를 생성할 때 사용되는 nonce 값에 대한 자리 표시자입니다. 이 값을 설정하면 nonce 값을 가진 메타 태그도 생성됩니다. +## html.additionalAssetSources {#html-additionalassetsources} + +- **타입:** `Record` + +```ts +interface HtmlAssetSource { + srcAttributes?: string[] + srcsetAttributes?: string[] + filter?: (data: { + key: string + value: string + attributes: Record + }) => boolean +} +``` + +에셋 소스로 처리할 HTML 요소와 속성을 추가로 정의합니다. ``, `