@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/ko/formatters.md

@@ -52,42 +52,12 @@ Intlayer는 네이티브 `Intl` API 위에 구축된 경량 헬퍼 세트와 무
 
 포매터 생성은 상대적으로 비용이 많이 들기 때문에, 이 캐싱은 동작을 변경하지 않으면서 성능을 향상시킵니다. 이 래퍼는 네이티브 `Intl`과 동일한 API를 제공하므로 사용법도 동일합니다.
 
-- 캐싱은 프로세스별로 이루어지며 호출자에게 투명합니다.
-
 > 환경에 `Intl.DisplayNames`가 없으면, 개발자 전용 경고가 한 번 출력됩니다(폴리필 사용을 고려하세요).
 
-예시:
-
-```ts
-import { Intl } from "intlayer";
-
-// 숫자 포맷팅
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// 언어, 지역 등의 표시 이름
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// 정렬을 위한 콜레이션
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (동일)
-
-// 복수형 규칙
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## 로케일 유틸리티
 
 ### `getLocaleLang(locale?)`
 
-로케일 문자열에서 언어 코드를 추출합니다:
-
 ```ts
 import { getLocaleLang } from "intlayer";
 
@@ -96,28 +66,15 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: 언어를 추출할 로케일 (기본값은 현재 로케일)
-
 ### `getLocaleFromPath(inputUrl)`
 
 URL 또는 경로명에서 로케일 부분을 추출합니다:
 
-```ts
-import { getLocaleFromPath } from "intlayer";
-
-getLocaleFromPath("/en/dashboard"); // "en"
-getLocaleFromPath("/fr/dashboard"); // "fr"
-getLocaleFromPath("/dashboard"); // "en" (기본 로케일)
-getLocaleFromPath("https://example.com/es/about"); // "es"
-```
-
 - **inputUrl**: 처리할 전체 URL 문자열 또는 경로명
 - **returns**: 감지된 로케일 또는 로케일이 없을 경우 기본 로케일
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-현재 로케일에 맞는 로컬라이즈된 URL을 생성합니다:
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -126,12 +83,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**: 로컬라이즈할 원본 URL
-- **currentLocale**: 현재 로케일
-- **locales**: 선택적 지원 로케일 배열 (기본값은 구성된 로케일)
-- **defaultLocale**: 선택적 기본 로케일 (구성된 기본 로케일을 기본값으로 사용)
-- **prefixDefault**: 기본 로케일에 접두사를 붙일지 여부 (구성된 값을 기본값으로 사용)
-
 ### `getHTMLTextDir(locale?)`
 
 로케일에 대한 텍스트 방향을 반환합니다:
@@ -144,15 +95,10 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**: 텍스트 방향을 가져올 로케일 (기본값은 현재 로케일)
-- **returns**: `"ltr"`, `"rtl"`, 또는 `"auto"`
-
 ## 콘텐츠 처리 유틸리티
 
 ### `getContent(node, nodeProps, locale?)`
 
-모든 사용 가능한 플러그인(번역, 열거, 삽입 등)을 사용하여 콘텐츠 노드를 변환합니다:
-
 ```ts
 import { getContent } from "intlayer";
 
@@ -163,36 +109,16 @@ const content = getContent(
 );
 ```
 
-- **node**: 변환할 콘텐츠 노드
-- **nodeProps**: 변환 컨텍스트를 위한 속성
-- **locale**: 선택적 로케일 (기본값은 구성된 기본 로케일)
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 언어 콘텐츠 객체에서 특정 로케일의 콘텐츠를 추출합니다:
 
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
 - **languageContent**: 로케일을 콘텐츠에 매핑한 객체
 - **locale**: 대상 로케일 (기본값은 설정된 기본 로케일)
 - **fallback**: 기본 로케일로 대체할지 여부 (기본값은 true)
 
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
-키로 사전에서 콘텐츠를 가져오고 변환합니다:
-
 ```ts
 import { getIntlayer } from "intlayer";
 
@@ -200,10 +126,6 @@ const content = getIntlayer("common", "fr");
 const nestedContent = getIntlayer("common", "fr", customPlugins);
 ```
 
-- **dictionaryKey**: 가져올 사전의 키
-- **locale**: 선택적 로케일 (기본 설정된 기본 로케일 사용)
-- **plugins**: 선택적 사용자 정의 변환 플러그인 배열
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 원격 사전에서 비동기적으로 콘텐츠를 가져옵니다:
@@ -214,25 +136,12 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**: 가져올 사전의 키
-- **locale**: 선택적 로케일 (기본 설정된 기본 로케일 사용)
-- **plugins**: 선택적 사용자 정의 변환 플러그인 배열
-
 ## 포매터(Formatters)
 
 아래의 모든 헬퍼는 `intlayer`에서 내보내집니다.
 
 ### `percentage(value, options?)`
 
-숫자를 백분율 문자열로 포맷합니다.
-
-동작: 1보다 큰 값은 전체 백분율로 해석되어 정규화됩니다 (예: `25` → `25%`, `0.25` → `25%`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-예시:
-
 ```ts
 import { percentage } from "intlayer";
 
@@ -428,13 +337,6 @@ pluralRules.select(11); // "many"
 
 ### `units(value, options?)`
 
-`Intl.NumberFormat`의 `style: 'unit'`을 사용하여 숫자 값을 현지화된 단위 문자열로 포맷합니다.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - 공통 필드: `unit` (예: `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - 기본값: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
 예제:
 
 ```ts
@@ -457,11 +359,6 @@ getLocaleLang("fr-CA"); // "fr"
 
 ### `compact(value, options?)`
 
-숫자를 축약 표기법(예: `1.2K`, `1M`)으로 포맷합니다.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (`notation: 'compact'`를 내부적으로 사용)
-
 예제:
 
 ```ts
@@ -484,13 +381,6 @@ getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
 
 ### `list(values, options?)`
 
-`Intl.ListFormat`을 사용하여 값 배열을 현지화된 목록 문자열로 포맷합니다.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - 공통 필드: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - 기본값: `type: 'conjunction'`, `style: 'long'`
-
 예시:
 
 ```ts
@@ -519,56 +409,6 @@ getHTMLTextDir("he"); // "rtl"
 
 클라이언트 컴포넌트:
 
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// 또는 Next.js 앱에서
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-서버 컴포넌트(또는 React 서버 런타임):
-
 ```ts
 import {
   useNumber,
@@ -593,8 +433,6 @@ import {
 } from "next-intlayer/server/format";
 ```
 
-> 이 훅들은 `IntlayerProvider` 또는 `IntlayerServerProvider`에서 설정된 로케일을 고려합니다.
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 특정 로케일의 콘텐츠를 추출합니다:
@@ -626,28 +464,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> 이 컴포저블들은 주입된 `IntlayerProvider`에서 로케일을 고려합니다.
-
 ## 문서 변경 이력
 
-| 버전  | 날짜       | 변경 사항        |
-| ----- | ---------- | ---------------- |
-| 5.8.0 | 2025-08-20 | vue 포매터 추가  |
-| 5.8.0 | 2025-08-18 | 포매터 문서 추가 |
-
-클라이언트 컴포넌트:
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "vue-intlayer/format";
-```
-
 > 이 컴포저블들은 주입된 `IntlayerProvider`에서 로케일을 고려합니다.

package/docs/ko/how_works_intlayer.md

@@ -62,6 +62,8 @@ Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하
    - 이러한 사전은 모든 요구를 충족하고 애플리케이션 성능을 최적화하기 위해 다양한 형식으로 생성됩니다.
 
 3. 사전 타입 생성
+
+4. 사전 타입 생성
    `사전(dictionary)`을 기반으로 Intlayer는 애플리케이션에서 사용할 수 있는 타입을 생성합니다.
 
 - 사전 타입은 Intlayer의 `콘텐츠 선언 파일(content declaration files)`에서 생성됩니다. 기본적으로 Intlayer 사전 타입은 프로젝트의 `.intlayer/types` 디렉토리에 생성됩니다.
@@ -98,6 +100,9 @@ Intlayer는 콘텐츠를 시각적으로 편집할 수 있는 시각적 편집
 
 ![시각적 편집기](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- 서버는 클라이언트의 요청을 수신하고 애플리케이션의 콘텐츠(예: `dictionaries` 및 구성)를 검색하여 클라이언트 측에서 접근할 수 있도록 하는 간단한 Express 애플리케이션입니다.
+- 한편, 클라이언트는 시각적 인터페이스를 사용하여 콘텐츠와 상호작용하는 데 사용되는 React 애플리케이션입니다.
+
 - 서버는 클라이언트의 요청을 수신하고 애플리케이션의 `dictionaries`와 같은 콘텐츠 및 구성을 가져와 클라이언트 측에서 접근할 수 있도록 하는 간단한 Express 애플리케이션입니다.
 - 반면 클라이언트는 시각적 인터페이스를 사용하여 콘텐츠와 상호작용하는 데 사용되는 React 애플리케이션입니다.
   `useIntlayer`를 사용하여 콘텐츠를 호출하고 편집기가 활성화되면, 자동으로 문자열을 `IntlayerNode`라는 Proxy 객체로 감쌉니다. 이 노드는 `window.postMessage`를 사용하여 시각적 편집기 인터페이스가 포함된 래핑된 iframe과 통신합니다.  
@@ -105,6 +110,8 @@ Intlayer는 콘텐츠를 시각적으로 편집할 수 있는 시각적 편집
 
 ## 애플리케이션 빌드 최적화
 
+애플리케이션의 번들 크기를 최적화하기 위해 Intlayer는 애플리케이션 빌드를 최적화하는 두 가지 플러그인을 제공합니다: `@intlayer/babel` 및 `@intlayer/swc` 플러그인.
+
 애플리케이션 번들 크기를 최적화하기 위해 Intlayer는 `@intlayer/babel` 및 `@intlayer/swc` 플러그인을 제공합니다.  
 Babel 및 SWC 플러그인은 애플리케이션의 추상 구문 트리(Abstract Syntax Tree, AST)를 분석하여 Intlayer 함수 호출을 최적화된 코드로 대체하는 방식으로 작동합니다. 이 과정은 실제로 사용되는 사전만 가져오도록 하여 청킹(chunking)을 최적화하고 번들 크기를 줄임으로써 프로덕션에서 최종 번들을 더 가볍게 만듭니다.
 

package/docs/ko/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+`--with` 플래그를 사용하면 다른 명령과 병렬로 편집기를 시작할 수 있습니다:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## 구성
 
 Intlayer 구성 파일에서 편집기 설정을 사용자 정의할 수 있습니다:
@@ -146,6 +156,8 @@ export default config;
 
    > **애플리케이션을 병렬로 실행해야 합니다.** 애플리케이션 URL은 편집기 구성(`applicationURL`)에 설정한 URL과 일치해야 합니다.
 
+> **참고: 이 명령은 `intlayer` 패키지에서 재내보내집니다. 대신 `npx intlayer editor start`를 사용할 수 있습니다.**
+
 2. 그런 다음 제공된 URL을 엽니다. 기본값은 `http://localhost:8000`입니다.
 
    Intlayer에 의해 색인된 각 필드를 커서를 사용하여 콘텐츠 위로 이동하면 볼 수 있습니다.

package/docs/ko/intlayer_with_adonisjs.md

@@ -258,9 +258,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... 기타 구성 옵션
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/ko/intlayer_with_analog.md

@@ -405,6 +405,8 @@ Intlayer 개발 환경을 개선하려면 공식 **Intlayer VS Code Extension**
 
 확장 프로그램 사용 방법에 대한 자세한 내용은 [Intlayer VS Code Extension 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
 
+---
+
 ### 더 나아가기
 
 더 나아가려면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_astro.md

@@ -122,6 +122,30 @@ GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlay
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`을 사용하세요.
+
+> 이 명령어는 당신의 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # 선택 사항: React 아일랜드 지원 추가 시
@@ -454,87 +478,41 @@ export const GET: APIRoute = ({ site }) => {
 - Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+solid.md)
 - Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+preact.md)
 
-### TypeScript 설정
-
-Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.
-
-![자동 완성](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![번역 오류](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 기존 TypeScript 설정
-  "include": [
-    // ... 기존 TypeScript 설정
-    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
-  ],
-}
-```
-
-### Git 설정
-
-Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.
-
-무시하려면 `.gitignore` 파일에 다음 지침을 추가하세요:
-
-```bash
-# Intlayer가 생성한 파일 무시
-.intlayer
-```
-
-### VS Code 확장 프로그램
-
-Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
-
-[VS Code Marketplace에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-이 확장 프로그램은 다음 기능을 제공합니다:
-
-- 번역 키 **자동 완성**.
-- 누락된 번역에 대한 **실시간 오류 감지**.
-- 번역된 콘텐츠의 **인라인 미리보기**.
-- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업(Quick Actions)**.
-
-확장 프로그램 사용에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
-
----
-
-</Step>
-
-<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
+<Step number={15} title="컴포넌트에서 콘텐츠 추출" isOptional={true}>
 
-기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
+기존 codebase가 있다면 수천 개의 파일을 변환하는 것은 시간이 오래 걸릴 수 있습니다.
 
-이 프로세스를 용이하게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하기 위한 [컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [추출기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제안합니다.
+이 프로세스를 쉽게 하기 위해 Intlayer는 [컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제안하여 컴포넌트를 변환하고 콘텐츠를 추출할 수 있습니다.
 
-설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다.
+이를 설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  // ... 나머지 구성
+  // ... Rest of your config
   compiler: {
     /**
-     * 컴파일러 활성화 여부를 나타냅니다.
+     * 컴파일러가 활성화되어야 하는지 여부를 나타냅니다.
      */
     enabled: true,
 
     /**
-     * 출력 파일 경로를 정의합니다.
+     * 출력 파일 경로를 정의합니다
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
+     * 변환 후 컴포넌트를 저장해야 하는지 여부를 나타냅니다.
+     *
+     * - `true`인 경우, 컴파일러는 디스크의 컴포넌트 파일을 다시 작성합니다. 그러므로 변환은 영구적이고, 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환할 수 있고, 그 후 제거할 수 있습니다.
+     *
+     * - `false`인 경우, 컴파일러는 빌드 출력에만 `useIntlayer()` 함수 호출을 주입하고 기본 codebase를 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
      */
     saveComponents: false,
 
     /**
-     * 사전 키 접두사
+     * Dictionary 키 접두사
      */
     dictionaryKeyPrefix: "",
   },
@@ -544,9 +522,9 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='추출 명령'>
+ <Tab value='Extract command'>
 
-컴포넌트를 변환하고 콘텐츠를 추출하기 위해 추출기를 실행합니다
+extractor를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출합니다
 
 ```bash packageManager="npm"
 npx intlayer extract
@@ -565,11 +543,11 @@ bun x intlayer extract
 ```
 
  </Tab>
- <Tab value='Babel 컴파일러'>
+ <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+> v9 이후로, `intlayerCompiler`는 `intlayer` 플러그인에 포함되어 있습니다. 따라서 수동으로 추가할 필요가 없습니다.
 
-`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
+`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함시키세요:
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
@@ -578,9 +556,25 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
+    intlayerCompiler(), // 컴파일러 플러그인 추가
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 또는 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 또는 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 또는 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 또는 bun run dev
 ```
 
  </Tab>
@@ -592,6 +586,54 @@ export default defineConfig({
 
 </Steps>
 
+### TypeScript 설정
+
+Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.
+
+![자동 완성](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![번역 오류](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 기존 TypeScript 설정
+  "include": [
+    // ... 기존 TypeScript 설정
+    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
+  ],
+}
+```
+
+### Git 설정
+
+Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.
+
+무시하려면 `.gitignore` 파일에 다음 지침을 추가하세요:
+
+```bash
+# Intlayer가 생성한 파일 무시
+.intlayer
+```
+
+### VS Code 확장 프로그램
+
+Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
+
+[VS Code Marketplace에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+이 확장 프로그램은 다음 기능을 제공합니다:
+
+- 번역 키 **자동 완성**.
+- 누락된 번역에 대한 **실시간 오류 감지**.
+- 번역된 콘텐츠의 **인라인 미리보기**.
+- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업(Quick Actions)**.
+
+확장 프로그램 사용에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
+
+---
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.