@intlayer/docs 5.5.11 → 5.6.0

package/docs/ko/intlayer_with_vite+react.md

@@ -1,40 +1,43 @@
 ---
-createdAt: 2025-03-07
-updatedAt: 2025-06-29
-title: React Native 및 Expo 모바일 앱 번역하기 (i18n)
-description: React Native 및 Expo 모바일 앱을 다국어로 만드는 방법을 알아보세요. 문서를 따라 국제화(i18n) 및 번역을 진행하세요.
+createdAt: 2024-03-07
+updatedAt: 2024-03-07
+title: Vite + React에서 Intlayer 시작하기
+description: Intlayer를 사용하여 Vite 및 React 애플리케이션에 국제화(i18n)를 추가하는 방법을 배우세요. 이 가이드를 따라 앱을 다국어로 만드세요.
 keywords:
   - 국제화
   - 문서
   - Intlayer
   - Vite
   - React
-  - React Native
-  - JavaScript
+  - i18n
+  - 자바스크립트
 slugs:
   - doc
   - environment
-  - react-native-and-expo
----
+  - vite-and-react
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4---
+
+# Intlayer와 Vite 및 React로 국제화(i18n) 시작하기
 
-# Intlayer와 Vite, React로 국제화(i18n) 시작하기
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
-GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-vite-react-template)을 확인하세요.
+GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-vite-react-template)을 참조하세요.
 
-## Intlayer란 무엇인가요?
+## Intlayer란?
 
-**Intlayer**는 현대 웹 애플리케이션에서 다국어 지원을 간소화하기 위해 설계된 혁신적인 오픈 소스 국제화(i18n) 라이브러리입니다.
+**Intlayer**는 최신 웹 애플리케이션에서 다국어 지원을 간소화하기 위해 설계된 혁신적이고 오픈 소스인 국제화(i18n) 라이브러리입니다.
 
 Intlayer를 사용하면 다음을 할 수 있습니다:
 
-- **컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리**할 수 있습니다.
+- **컴포넌트 수준에서 선언적 사전을 사용하여** 번역을 쉽게 관리할 수 있습니다.
 - **메타데이터, 라우트 및 콘텐츠를 동적으로 현지화**할 수 있습니다.
 - **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 향상시킵니다.
 - **동적 로케일 감지 및 전환과 같은 고급 기능**을 활용할 수 있습니다.
 
 ---
 
-## Vite와 React 애플리케이션에서 Intlayer 설정 단계별 가이드
+## Vite 및 React 애플리케이션에서 Intlayer 설정 단계별 가이드
 
 ### 1단계: 의존성 설치
 
@@ -42,17 +45,17 @@ npm을 사용하여 필요한 패키지를 설치하세요:
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
-npm install --save-dev vite-intlayer
+npm install vite-intlayer --save-dev
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
-pnpm add --save-dev vite-intlayer
+pnpm add vite-intlayer --save-dev
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
-yarn add --save-dev vite-intlayer
+yarn add vite-intlayer --save-dev
 ```
 
 - **intlayer**
@@ -60,14 +63,14 @@ yarn add --save-dev vite-intlayer
   구성 관리, 번역, [콘텐츠 선언](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md), 트랜스파일링 및 [CLI 명령어](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_cli.md)를 위한 국제화 도구를 제공하는 핵심 패키지입니다.
 
 - **react-intlayer**
-  Intlayer를 React 애플리케이션과 통합하는 패키지로, React 국제화를 위한 컨텍스트 제공자와 훅을 제공합니다.
+  Intlayer를 React 애플리케이션과 통합하는 패키지로, React 국제화를 위한 컨텍스트 프로바이더와 훅을 제공합니다.
 
 - **vite-intlayer**
-  Vite 번들러([Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production))와 Intlayer를 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
+  Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
 ### 2단계: 프로젝트 구성
 
-애플리케이션의 언어를 구성하기 위한 설정 파일을 만드세요:
+애플리케이션의 언어를 구성하기 위해 설정 파일을 만드세요:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -164,7 +167,7 @@ module.exports = defineConfig({
 });
 ```
 
-> `intlayerPlugin()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의합니다. 추가로, 성능 최적화를 위한 별칭(alias)을 제공합니다.
+> `intlayerPlugin()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의합니다. 추가로, 성능 최적화를 위한 별칭(alias)도 제공합니다.
 
 ### 4단계: 콘텐츠 선언하기
 
@@ -204,12 +207,12 @@ const appContent = {
       ),
       fr: (
         <>
-          <code>src/App.tsx</code>를 편집하고 저장하여 HMR을 테스트하세요
+          HMR을 테스트하려면 <code>src/App.tsx</code>를 편집하고 저장하세요
         </>
       ),
       es: (
         <>
-          <code>src/App.tsx</code>를 편집하고 저장하여 HMR을 테스트하세요
+          HMR을 테스트하려면 <code>src/App.tsx</code>를 편집하고 저장하세요
         </>
       ),
     }),
@@ -235,13 +238,11 @@ const appContent = {
     viteLogo: t({
       en: "Vite logo",
       fr: "Logo Vite",
-      ko: "Vite 로고",
       es: "Logo Vite",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
-      ko: "React 로고",
       es: "Logo React",
     }),
 
@@ -250,7 +251,6 @@ const appContent = {
     count: t({
       en: "count is ",
       fr: "le compte est ",
-      ko: "카운트는 ",
       es: "el recuento es ",
     }),
 
@@ -258,10 +258,11 @@ const appContent = {
       t <
       ReactNode >
       {
-        // 콘텐츠에 React 노드를 사용하는 경우 React를 반드시 import 하세요
+        // 콘텐츠에 React 노드를 사용하는 경우 React를 반드시 import하세요
         en: (
           <>
-            Edit <code>src/App.tsx</code> and save to test HMR
+            Edit <code>src/App.tsx</code> 파일을 수정하고 저장하여 HMR을
+            테스트하세요
           </>
         ),
         fr: (
@@ -277,7 +278,6 @@ const appContent = {
       },
 
     readTheDocs: t({
-      ko: "더 알아보려면 Vite 및 React 로고를 클릭하세요",
       en: "Click on the Vite and React logos to learn more",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
@@ -318,7 +318,7 @@ const appContent = {
       t <
       ReactNode >
       {
-        // 콘텐츠에 React 노드를 사용하는 경우 React를 반드시 import 하세요
+        // 콘텐츠에 React 노드를 사용하는 경우 React를 임포트하는 것을 잊지 마세요
         en: (
           <>
             Edit <code>src/App.tsx</code> and save to test HMR
@@ -331,7 +331,7 @@ const appContent = {
         ),
         es: (
           <>
-            Edita <code>src/App.tsx</code> 및 저장하여 HMR을 테스트하세요
+            Edita <code>src/App.tsx</code> y guarda para probar HMR
           </>
         ),
       },
@@ -340,7 +340,7 @@ const appContent = {
       en: "Click on the Vite and React logos to learn more",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
-      ko: "더 알아보려면 Vite 및 React 로고를 클릭하세요",
+      ko: "Vite 및 React 로고를 클릭하여 자세히 알아보세요",
     }),
   },
 };
@@ -365,37 +365,37 @@ module.exports = appContent;
     "reactLogo": {
       "nodeType": "translation",
       "translation": {
-        "ko": "React 로고",
         "en": "React logo",
         "fr": "Logo React",
-        "es": "Logo React"
+        "es": "Logo React",
+        "ko": "리액트 로고"
       }
     },
     "title": {
       "nodeType": "translation",
       "translation": {
-        "ko": "Vite + React",
         "en": "Vite + React",
         "fr": "Vite + React",
-        "es": "Vite + React"
+        "es": "Vite + React",
+        "ko": "Vite + React"
       }
     },
     "count": {
       "nodeType": "translation",
       "translation": {
-        "ko": "카운트는 ",
         "en": "count is ",
         "fr": "le compte est ",
-        "es": "el recuento es "
+        "es": "el recuento es ",
+        "ko": "카운트는 "
       }
     },
     "edit": {
       "nodeType": "translation",
       "translation": {
-        "ko": "src/App.tsx를 편집하고 저장하여 HMR을 테스트하세요",
         "en": "Edit src/App.tsx and save to test HMR",
         "fr": "Éditez src/App.tsx et enregistrez pour tester HMR",
-        "es": "Edita src/App.tsx y guarda para probar HMR"
+        "es": "Edita src/App.tsx y guarda para probar HMR",
+        "ko": "src/App.tsx를 편집하고 저장하여 HMR을 테스트하세요"
       }
     },
     "readTheDocs": {
@@ -411,11 +411,11 @@ module.exports = appContent;
 }
 ```
 
-> 애플리케이션 내 어디서든 `contentDir` 디렉토리(기본값은 `./src`)에 포함되는 즉시 콘텐츠 선언을 정의할 수 있습니다. 그리고 콘텐츠 선언 파일 확장자(기본값은 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)와 일치해야 합니다.
+> 애플리케이션 내 어디에서든 `contentDir` 디렉토리(기본값: `./src`)에 포함되면 콘텐츠 선언을 정의할 수 있습니다. 그리고 콘텐츠 선언 파일 확장자(기본값: `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)와 일치해야 합니다.
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)를 참조하세요.
 
-> 콘텐츠 파일에 TSX 코드가 포함된 경우, 콘텐츠 파일에서 `import React from "react";`를 임포트하는 것을 고려해야 합니다.
+> 콘텐츠 파일에 TSX 코드가 포함된 경우, 콘텐츠 파일에 `import React from "react";`를 가져오는 것을 고려해야 합니다.
 
 ### 5단계: 코드에서 Intlayer 사용하기
 
@@ -568,7 +568,7 @@ module.exports = App;
 > <img src={content.image.src.value} alt={content.image.value} />
 > ```
 
-> `useIntlayer` 훅에 대해 더 알고 싶다면, [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참고하세요.
+> `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
 
 ### (선택 사항) 6단계: 콘텐츠의 언어 변경하기
 
@@ -627,14 +627,14 @@ const LocaleSwitcher = () => {
 - https://example.com/fr/about
 ```
 
-> 기본적으로 기본 로케일에 대해서는 경로에 접두사가 붙지 않습니다. 기본 로케일에 접두사를 붙이고 싶다면, 구성 파일에서 `middleware.prefixDefault` 옵션을 `true`로 설정할 수 있습니다. 자세한 내용은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
+> 기본적으로, 기본 로케일에 대해서는 경로에 접두사가 붙지 않습니다. 기본 로케일에 접두사를 붙이고 싶다면, 구성 설정에서 `middleware.prefixDefault` 옵션을 `true`로 설정할 수 있습니다. 자세한 내용은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
 애플리케이션에 지역화된 라우팅을 추가하려면, 애플리케이션의 라우트를 감싸고 로케일 기반 라우팅을 처리하는 `LocaleRouter` 컴포넌트를 생성할 수 있습니다. 다음은 [React Router](https://reactrouter.com/home)를 사용한 예제입니다:
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
 // 필요한 의존성과 함수들을 임포트합니다
-import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // 'intlayer'에서 제공하는 유틸리티 함수와 타입
-import type { FC, PropsWithChildren } from "react"; // 함수형 컴포넌트와 props 타입을 위한 React 타입
+import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // 'intlayer'에서 제공하는 유틸리티 함수 및 타입
+import type { FC, PropsWithChildren } from "react"; // 함수형 컴포넌트 및 props 타입
 import { IntlayerProvider } from "react-intlayer"; // 국제화 컨텍스트를 위한 프로바이더
 import {
   BrowserRouter,
@@ -644,7 +644,7 @@ import {
   useLocation,
 } from "react-router-dom"; // 네비게이션 관리를 위한 라우터 컴포넌트
 
-// Intlayer에서 설정 구조 분해 할당
+// Intlayer에서 설정값 구조 분해 할당
 const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
@@ -667,7 +667,7 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
   );
 
   /**
-   * middleware.prefixDefault가 true인 경우, 기본 로케일은 항상 접두사가 붙어야 합니다.
+   * middleware.prefixDefault가 true인 경우, 기본 로케일은 항상 접두사로 붙어야 합니다.
    */
   if (middleware.prefixDefault) {
     // 로케일 유효성 검사
@@ -676,19 +676,19 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // 현재 기록 항목을 새 항목으로 교체
+          replace // 현재 기록 항목을 새 항목으로 교체합니다
         />
       );
     }
 
-    // 자식 컴포넌트를 IntlayerProvider로 감싸고 현재 로케일을 설정
+    // 자식 컴포넌트를 IntlayerProvider로 감싸고 현재 로케일을 설정합니다
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
   } else {
     /**
      * middleware.prefixDefault가 false일 때, 기본 로케일은 접두사가 붙지 않습니다.
-     * 현재 로케일이 유효하고 기본 로케일이 아님을 확인합니다.
+     * 현재 로케일이 유효하며 기본 로케일이 아님을 확인합니다.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
@@ -698,11 +698,11 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
         )
         .includes(currentLocale) // 현재 로케일이 유효한 로케일 목록에 있는지 확인
     ) {
-      // 로케일 접두사가 없는 경로로 리디렉션
+      // 로케일 접두어가 없는 경로로 리디렉션
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
     }
 
-    // 자식 컴포넌트를 IntlayerProvider로 감싸고 현재 로케일 설정
+    // IntlayerProvider로 자식 컴포넌트를 감싸고 현재 로케일 설정
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
@@ -722,10 +722,10 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
         )
         .map((locale) => (
           <Route
-            // 로케일을 캡처하는 라우트 패턴 (예: /en/, /fr/) 및 이후 모든 경로와 매칭
+            // 로케일을 캡처하는 경로 패턴 (예: /en/, /fr/) 및 이후 모든 경로와 매칭
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 로케일 관리를 위해 children을 감쌈
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 로케일 관리를 위해 children을 래핑
           />
         ))}
 
@@ -736,7 +736,7 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // 로케일 관리를 위해 children을 감쌈
+            } // 로케일 관리를 위해 children을 래핑
           />
         )
       }
@@ -746,9 +746,9 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
 ```
 
 ```jsx fileName="src/components/LocaleRouter.mjx" codeFormat="esm"
-// 필요한 종속성과 함수들을 임포트합니다.
-import { configuration, getPathWithoutLocale } from "intlayer"; // 'intlayer'에서 제공하는 유틸리티 함수와 타입들
-// 'intlayer'에서 제공하는 유틸리티 함수와 타입들
+// 필요한 의존성과 함수들을 임포트합니다.
+import { configuration, getPathWithoutLocale } from "intlayer"; // 'intlayer'에서 제공하는 유틸리티 함수와 타입
+// 'intlayer'에서 제공하는 유틸리티 함수와 타입
 import { IntlayerProvider } from "react-intlayer"; // 국제화 컨텍스트를 위한 프로바이더
 import {
   BrowserRouter,
@@ -763,9 +763,9 @@ const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * 로케일 처리를 담당하며, 자식 컴포넌트를 적절한 로케일 컨텍스트로 감싸는 컴포넌트입니다.
+ * 로컬라이제이션을 처리하고 자식 컴포넌트를 적절한 로케일 컨텍스트로 감싸는 컴포넌트입니다.
 /**
- * URL 기반 로케일 감지 및 검증을 관리하는 컴포넌트입니다.
+ * URL 기반 로케일 감지 및 검증을 관리합니다.
  */
 const AppLocalized = ({ children, locale }) => {
   const { pathname, search } = useLocation(); // 현재 URL 경로를 가져옵니다.
@@ -779,7 +779,7 @@ const AppLocalized = ({ children, locale }) => {
   );
 
   /**
-   * middleware.prefixDefault가 true인 경우 기본 로케일은 항상 접두사로 붙어야 합니다.
+   * middleware.prefixDefault가 true인 경우, 기본 로케일은 항상 접두사로 붙어야 합니다.
    */
   if (middleware.prefixDefault) {
     // 로케일을 검증합니다.
@@ -800,7 +800,7 @@ const AppLocalized = ({ children, locale }) => {
   } else {
     /**
      * middleware.prefixDefault가 false일 때, 기본 로케일은 접두사가 붙지 않습니다.
-     * 현재 로케일이 유효하고 기본 로케일이 아님을 확인합니다.
+     * 현재 로케일이 유효하며 기본 로케일이 아님을 확인합니다.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
@@ -808,13 +808,13 @@ const AppLocalized = ({ children, locale }) => {
         .filter(
           (locale) => locale.toString() !== defaultLocale.toString() // 기본 로케일 제외
         )
-        .includes(currentLocale) // 현재 로케일이 유효한 로케일 목록에 포함되어 있는지 확인
+        .includes(currentLocale) // 현재 로케일이 유효한 로케일 목록에 있는지 확인
     ) {
       // 로케일 접두사가 없는 경로로 리디렉션
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
     }
 
-    // 자식 컴포넌트를 IntlayerProvider로 감싸고 현재 로케일 설정
+    // IntlayerProvider로 자식 컴포넌트를 감싸고 현재 로케일 설정
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
@@ -842,7 +842,7 @@ export const LocaleRouter = ({ children }) => (
         ))}
 
       {
-        // 기본 로케일 접두어 사용이 비활성화된 경우, 루트 경로에서 직접 자식 컴포넌트를 렌더링
+        // 기본 로케일 접두어 사용이 비활성화된 경우, 루트 경로에서 자식 컴포넌트를 직접 렌더링
         !middleware.prefixDefault && (
           <Route
             path="*"
@@ -858,8 +858,8 @@ export const LocaleRouter = ({ children }) => (
 ```
 
 ```jsx fileName="src/components/LocaleRouter.cjx" codeFormat="commonjs"
-// 필요한 의존성과 함수들을 임포트합니다.
-const { configuration, getPathWithoutLocale } = require("intlayer"); // 'intlayer'에서 제공하는 유틸리티 함수와 타입
+// 필요한 종속성과 함수들을 가져옵니다.
+const { configuration, getPathWithoutLocale } = require("intlayer"); // 'intlayer'에서 제공하는 유틸리티 함수 및 타입
 const { IntlayerProvider, useLocale } = require("react-intlayer"); // 국제화 컨텍스트를 위한 프로바이더
 const {
   BrowserRouter,
@@ -867,7 +867,7 @@ const {
   Route,
   Navigate,
   useLocation,
-} = require("react-router-dom"); // 네비게이션 관리를 위한 라우터 컴포넌트들
+} = require("react-router-dom"); // 내비게이션 관리를 위한 라우터 컴포넌트
 
 // Intlayer에서 설정을 구조 분해 할당합니다.
 const { internationalization, middleware } = configuration;
@@ -883,33 +883,33 @@ const AppLocalized = ({ children, locale }) => {
   // 현재 로케일을 결정하며, 제공되지 않은 경우 기본 로케일로 대체합니다.
   const currentLocale = locale ?? defaultLocale;
 
-  // 경로에서 로케일 접두어를 제거하여 기본 경로를 만듭니다.
+  // 경로에서 로케일 접두사를 제거하여 기본 경로를 만듭니다.
   const pathWithoutLocale = getPathWithoutLocale(
     pathname // 현재 URL 경로
   );
 
   /**
-   * middleware.prefixDefault가 true인 경우, 기본 로케일은 항상 접두어로 붙어야 합니다.
+   * middleware.prefixDefault가 true인 경우, 기본 로케일은 항상 접두사로 붙어야 합니다.
    */
   if (middleware.prefixDefault) {
-    // 로케일 유효성 검사
+    // 로케일을 검증합니다.
     if (!locale || !locales.includes(locale)) {
-      // 기본 로케일과 업데이트된 경로로 리다이렉트합니다.
+      // 업데이트된 경로와 함께 기본 로케일로 리다이렉트합니다.
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // 현재 기록 항목을 새 항목으로 교체합니다.
+          replace // 현재 기록 항목을 새 항목으로 교체
         />
       );
     }
 
-    // 자식 컴포넌트를 IntlayerProvider로 감싸고 현재 로케일을 설정합니다.
+    // 자식 컴포넌트를 IntlayerProvider로 감싸고 현재 로케일을 설정
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
   } else {
     /**
-     * middleware.prefixDefault가 false일 때, 기본 로케일은 접두사로 붙지 않습니다.
+     * middleware.prefixDefault가 false일 때, 기본 로케일은 접두사가 붙지 않습니다.
      * 현재 로케일이 유효하며 기본 로케일이 아님을 확인합니다.
      */
     if (
@@ -920,7 +920,7 @@ const AppLocalized = ({ children, locale }) => {
         )
         .includes(currentLocale) // 현재 로케일이 유효한 로케일 목록에 포함되어 있는지 확인
     ) {
-      // 로케일 접두사 없이 경로로 리디렉션합니다.
+      // 로케일 접두사가 없는 경로로 리디렉션합니다.
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
     }
 
@@ -933,7 +933,7 @@ const AppLocalized = ({ children, locale }) => {
 
 /**
  * 로케일별 경로를 설정하는 라우터 컴포넌트입니다.
- * React Router를 사용하여 네비게이션을 관리하고 로컬라이즈된 컴포넌트를 렌더링합니다.
+ * React Router를 사용하여 내비게이션을 관리하고 로컬라이즈된 컴포넌트를 렌더링합니다.
  */
 const LocaleRouter = ({ children }) => (
   <BrowserRouter>
@@ -944,21 +944,21 @@ const LocaleRouter = ({ children }) => (
         )
         .map((locale) => (
           <Route
-            // 로케일을 캡처하는 경로 패턴 (예: /en/, /fr/) 및 이후 모든 경로를 매칭합니다.
+            // 로케일을 캡처하는 경로 패턴 (예: /en/, /fr/) 및 이후 모든 경로와 매칭합니다.
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 자식 컴포넌트를 로케일 관리로 감쌉니다
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 자식 컴포넌트를 로케일 관리로 감쌈
           />
         ))}
 
       {
-        // 기본 로케일 접두어 사용이 비활성화된 경우, 루트 경로에서 자식 컴포넌트를 직접 렌더링합니다
+        // 기본 로케일 접두어 사용이 비활성화된 경우, 루트 경로에서 자식 컴포넌트를 직접 렌더링
         !middleware.prefixDefault && (
           <Route
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // 자식 컴포넌트를 로케일 관리로 감쌉니다
+            } // 자식 컴포넌트를 로케일 관리로 감쌈
           />
         )
       }
@@ -973,7 +973,7 @@ const LocaleRouter = ({ children }) => (
 import { LocaleRouter } from "./components/LocaleRouter";
 import type { FC } from "react";
 
-// ... 당신의 AppContent 컴포넌트
+// ... 여러분의 AppContent 컴포넌트
 
 const App: FC = () => (
   <LocaleRouter>
@@ -985,7 +985,7 @@ const App: FC = () => (
 ```jsx fileName="src/App.mjx" codeFormat="esm"
 import { LocaleRouter } from "./components/LocaleRouter";
 
-// ... 당신의 AppContent 컴포넌트
+// ... 여러분의 AppContent 컴포넌트
 
 const App = () => (
   <LocaleRouter>
@@ -997,7 +997,7 @@ const App = () => (
 ```jsx fileName="src/App.cjx" codeFormat="commonjs"
 const { LocaleRouter } = require("./components/LocaleRouter");
 
-// ... 당신의 AppContent 컴포넌트
+// ... 여러분의 AppContent 컴포넌트
 
 const App = () => (
   <LocaleRouter>
@@ -1043,7 +1043,7 @@ module.exports = defineConfig({
 
 ### (선택 사항) 8단계: 로케일이 변경될 때 URL 변경하기
 
-로케일이 변경될 때 URL을 변경하려면, `useLocale` 훅에서 제공하는 `onLocaleChange` prop을 사용할 수 있습니다. 동시에, `react-router-dom`의 `useLocation`과 `useNavigate` 훅을 사용하여 URL 경로를 업데이트할 수 있습니다.
+로케일이 변경될 때 URL을 변경하려면, `useLocale` 훅에서 제공하는 `onLocaleChange` 속성을 사용할 수 있습니다. 동시에, `react-router-dom`의 `useLocation`과 `useNavigate` 훅을 사용하여 URL 경로를 업데이트할 수 있습니다.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
 import { useLocation, useNavigate } from "react-router-dom";
@@ -1063,7 +1063,7 @@ const LocaleSwitcher: FC = () => {
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (locale) => {
       // 업데이트된 로케일로 URL을 구성합니다
-      // 예시: /es/about?foo=bar
+      // 예: /es/about?foo=bar
       const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
       // URL 경로를 업데이트합니다
@@ -1091,11 +1091,11 @@ const LocaleSwitcher: FC = () => {
               {localeItem}
             </span>
             <span>
-              {/* 해당 로케일의 언어명 - 예: Français */}
+              {/* 해당 로케일에서의 언어명 - 예: Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* 현재 로케일에서의 언어명 - 예: Francés (현재 로케일이 Locales.SPANISH인 경우) */}
+              {/* 현재 로케일에서의 언어명 - 예: Francés (현재 로케일이 Locales.SPANISH일 때) */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
@@ -1159,11 +1159,11 @@ const LocaleSwitcher = () => {
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* 현재 로케일에서의 언어 - 예: 현재 로케일이 Locales.SPANISH로 설정된 경우 Francés */}
+              {/* 현재 로케일에서의 언어 - 예: Locales.SPANISH로 설정된 현재 로케일에서 Francés */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* 영어로 된 언어명 - 예: French */}
+              {/* 영어로 된 언어 - 예: French */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1227,7 +1227,7 @@ const LocaleSwitcher = () => {
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* 영어로 된 언어 이름 - 예: French */}
+              {/* 영어로 된 언어명 - 예: French */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1253,19 +1253,19 @@ const LocaleSwitcher = () => {
 
 ---
 
-### (선택 사항) 9단계: HTML의 언어 및 방향 속성 변경하기
+### (선택 사항) 9단계: HTML의 언어 및 방향 속성 변경
 
 애플리케이션이 다국어를 지원할 때, 현재 로케일에 맞게 `<html>` 태그의 `lang` 및 `dir` 속성을 업데이트하는 것이 매우 중요합니다. 이렇게 하면 다음을 보장할 수 있습니다:
 
 - **접근성**: 화면 낭독기 및 보조 기술은 올바른 `lang` 속성에 의존하여 콘텐츠를 정확하게 발음하고 해석합니다.
-- **텍스트 렌더링**: `dir`(방향) 속성은 텍스트가 올바른 순서로 렌더링되도록 보장합니다(예: 영어는 왼쪽에서 오른쪽, 아랍어나 히브리어는 오른쪽에서 왼쪽). 이는 가독성에 필수적입니다.
-- **SEO**: 검색 엔진은 `lang` 속성을 사용하여 페이지의 언어를 판단하고, 올바른 현지화된 콘텐츠를 검색 결과에 제공하는 데 도움을 줍니다.
+- **텍스트 렌더링**: `dir`(방향) 속성은 텍스트가 올바른 순서로 렌더링되도록 보장합니다(예: 영어는 왼쪽에서 오른쪽으로, 아랍어나 히브리어는 오른쪽에서 왼쪽으로), 이는 가독성에 필수적입니다.
+- **SEO**: 검색 엔진은 `lang` 속성을 사용하여 페이지의 언어를 판단하고, 검색 결과에서 적절한 현지화된 콘텐츠를 제공하는 데 도움을 줍니다.
 
 로케일이 변경될 때 이러한 속성을 동적으로 업데이트하면, 지원되는 모든 언어에서 사용자에게 일관되고 접근 가능한 경험을 보장할 수 있습니다.
 
 #### 훅 구현하기
 
-HTML 속성을 관리하는 커스텀 훅을 만드세요. 이 훅은 로케일 변경을 감지하고 그에 따라 속성을 업데이트합니다:
+HTML 속성을 관리하는 커스텀 훅을 만듭니다. 이 훅은 로케일 변경을 감지하여 속성을 적절히 업데이트합니다:
 
 ```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
 import { useEffect } from "react";
@@ -1283,7 +1283,7 @@ export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
 
   useEffect(() => {
-    // 현재 로케일에 맞게 언어 속성을 업데이트합니다.
+    // 현재 로케일로 언어 속성을 업데이트합니다.
     document.documentElement.lang = locale;
 
     // 현재 로케일에 따라 텍스트 방향을 설정합니다.
@@ -1323,7 +1323,7 @@ const { useLocale } = require("react-intlayer");
 const { getHTMLTextDir } = require("intlayer");
 
 /**
- * 현재 로케일을 기반으로 HTML <html> 요소의 `lang` 및 `dir` 속성을 업데이트합니다.
+ * 현재 로케일에 따라 HTML <html> 요소의 `lang` 및 `dir` 속성을 업데이트합니다.
  * - `lang`: 브라우저와 검색 엔진에 페이지의 언어를 알립니다.
  * - `dir`: 올바른 읽기 순서 보장을 위해 설정합니다 (예: 영어는 'ltr', 아랍어는 'rtl').
  *
@@ -1355,7 +1355,7 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent: FC = () => {
-  // 로케일에 따라 <html> 태그의 lang 및 dir 속성을 업데이트하기 위해 훅을 적용합니다.
+  // 로케일에 따라 <html> 태그의 lang과 dir 속성을 업데이트하기 위해 훅을 적용합니다.
   useI18nHTMLAttributes();
 
   // ... 컴포넌트의 나머지 부분
@@ -1379,7 +1379,7 @@ const AppContent = () => {
   // 로케일에 따라 <html> 태그의 lang 및 dir 속성을 업데이트하기 위해 훅을 적용합니다.
   useI18nHTMLAttributes();
 
-  // ... 컴포넌트의 나머지 부분
+  // ... 나머지 컴포넌트 내용
 };
 
 const App = () => (
@@ -1403,11 +1403,6 @@ const AppContent = () => {
 
   // ... 컴포넌트의 나머지 부분
 };
-  // 로케일에 따라 <html> 태그의 lang 및 dir 속성을 업데이트하기 위해 훅을 적용합니다.
-  useI18nHTMLAttributes();
-
-  // ... 나머지 컴포넌트 내용
-};
 
 const App = () => (
   <IntlayerProvider>
@@ -1418,11 +1413,11 @@ const App = () => (
 module.exports = App;
 ```
 
-이 변경 사항을 적용하면 애플리케이션은 다음을 수행합니다:
+이 변경 사항을 적용하면 애플리케이션은 다음을 보장합니다:
 
-- 현재 로케일을 올바르게 반영하는 **언어**(`lang`) 속성을 보장하여 SEO 및 브라우저 동작에 중요합니다.
+- 현재 로케일을 올바르게 반영하는 **언어**(`lang`) 속성으로 SEO 및 브라우저 동작에 중요합니다.
 - 로케일에 따라 **텍스트 방향**(`dir`)을 조정하여, 서로 다른 읽기 순서를 가진 언어에 대해 가독성과 사용성을 향상시킵니다.
-- 보조 기술이 최적의 기능을 수행하는 데 의존하는 이러한 속성들 덕분에 더 **접근성 높은** 경험을 제공합니다.
+- 보조 기술이 이러한 속성에 의존하므로 더 **접근성 높은** 경험을 제공합니다.
 
 ### (선택 사항) 10단계: 지역화된 링크 컴포넌트 만들기
 
@@ -1430,9 +1425,9 @@ module.exports = App;
 
 이 동작은 여러 가지 이유로 유용합니다:
 
-- **SEO 및 사용자 경험**: 지역화된 URL은 검색 엔진이 언어별 페이지를 올바르게 인덱싱하도록 도와주며, 사용자가 선호하는 언어로 된 콘텐츠를 제공합니다.
-- **일관성**: 애플리케이션 전반에 걸쳐 지역화된 링크를 사용함으로써 내비게이션이 현재 로케일 내에서 유지되어 예상치 못한 언어 전환을 방지합니다.
-  /// **유지보수성**: 로컬라이제이션 로직을 단일 컴포넌트에 중앙 집중화하면 URL 관리를 단순화하여 애플리케이션이 성장함에 따라 코드베이스를 더 쉽게 유지보수하고 확장할 수 있습니다.
+- **SEO 및 사용자 경험**: 지역화된 URL은 검색 엔진이 언어별 페이지를 올바르게 색인화하도록 돕고, 사용자가 선호하는 언어로 된 콘텐츠를 제공합니다.
+- **일관성**: 애플리케이션 전반에 걸쳐 지역화된 링크를 사용함으로써 내비게이션이 현재 로케일 내에서 유지되어 예기치 않은 언어 전환을 방지합니다.
+- **유지보수성**: 로컬라이제이션 로직을 단일 컴포넌트에 중앙 집중화하면 URL 관리를 단순화하여 애플리케이션이 성장함에 따라 코드베이스를 더 쉽게 유지보수하고 확장할 수 있습니다.
 
 아래는 TypeScript로 구현한 로컬라이즈된 `Link` 컴포넌트입니다:
 
@@ -1461,7 +1456,7 @@ export const checkIsExternalLink = (href?: string): boolean =>
 /**
  * 현재 로케일에 따라 href 속성을 조정하는 커스텀 Link 컴포넌트입니다.
  * 내부 링크의 경우 `getLocalizedUrl`을 사용하여 URL 앞에 로케일을 붙입니다 (예: /fr/about).
- * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 유지되도록 합니다.
+ * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 이루어지도록 보장합니다.
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ href, children, ...props }, ref) => {
@@ -1497,8 +1492,8 @@ export const checkIsExternalLink = (href?: string): boolean =>
 
 /**
  * 현재 로케일에 따라 href 속성을 조정하는 커스텀 Link 컴포넌트입니다.
- * 내부 링크의 경우 `getLocalizedUrl`을 사용하여 URL 앞에 로케일을 붙입니다 (예: /fr/about).
- * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 유지되도록 합니다.
+ * 내부 링크의 경우 `getLocalizedUrl`을 사용하여 URL 앞에 로케일 접두사를 붙입니다 (예: /fr/about).
+ * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 이루어지도록 보장합니다.
  */
 export const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
@@ -1532,13 +1527,13 @@ const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 /**
  * 현재 로케일에 따라 href 속성을 조정하는 커스텀 Link 컴포넌트입니다.
  * 내부 링크의 경우 `getLocalizedUrl`을 사용하여 URL 앞에 로케일을 붙입니다 (예: /fr/about).
- * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 유지되도록 합니다.
+ * 이를 통해 내비게이션이 동일한 로케일 컨텍스트 내에서 이루어지도록 보장합니다.
  */
 const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
   const isExternalLink = checkIsExternalLink(href);
 
-  // 링크가 내부 링크이고 유효한 href가 제공된 경우, 로케일이 적용된 URL을 가져옵니다.
+  // 링크가 내부 링크이고 유효한 href가 제공된 경우, 로컬라이즈된 URL을 가져옵니다.
   const localizedHref = isExternalLink ? href : getLocalizedUrl(href, locale);
 
   return (
@@ -1556,7 +1551,7 @@ const Link = forwardRef(({ href, children, ...props }, ref) => {
 Link.displayName = "Link";
 ```
 
-#### 작동 방식
+#### 작동 원리
 
 - **외부 링크 감지**:  
   헬퍼 함수 `checkIsExternalLink`는 URL이 외부 링크인지 여부를 판단합니다. 외부 링크는 현지화가 필요 없으므로 변경하지 않습니다.
@@ -1565,12 +1560,12 @@ Link.displayName = "Link";
   `useLocale` 훅은 현재 로케일(예: 프랑스어의 경우 `fr`)을 제공합니다.
 
 - **URL 현지화**:  
-  내부 링크(즉, 외부 링크가 아닌 경우)에 대해서는 `getLocalizedUrl`을 사용하여 URL 앞에 현재 로케일을 자동으로 붙입니다. 예를 들어 사용자가 프랑스어 로케일에 있다면, `href`에 `/about`을 전달할 경우 `/fr/about`로 변환됩니다.
+  내부 링크(즉, 외부 링크가 아닌 경우)에 대해 `getLocalizedUrl`을 사용하여 URL 앞에 현재 로케일을 자동으로 붙입니다. 예를 들어 사용자가 프랑스어 로케일에 있다면, `href`에 `/about`을 전달하면 `/fr/about`로 변환됩니다.
 
 - **링크 반환**:  
   컴포넌트는 지역화된 URL을 가진 `<a>` 요소를 반환하여, 내비게이션이 현재 로케일과 일치하도록 보장합니다.
 
-이 `Link` 컴포넌트를 애플리케이션 전반에 통합하면, 일관되고 언어에 민감한 사용자 경험을 유지할 수 있으며, SEO 및 사용성 향상에도 도움이 됩니다.
+이 `Link` 컴포넌트를 애플리케이션 전반에 통합함으로써, 일관되고 언어 인식이 가능한 사용자 경험을 유지할 수 있으며, SEO 및 사용성 향상에도 도움이 됩니다.
 
 ### TypeScript 구성
 
@@ -1586,39 +1581,15 @@ TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하
 {
   // ... 기존 TypeScript 구성
   "include": [
-    // ... 기존 TypeScript 구성
-    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
-  ],
-}
-```
-
-컴포넌트는 지역화된 URL을 가진 `<a>` 요소를 반환하여, 로케일에 맞는 일관된 내비게이션을 보장합니다.
-
-이 `Link` 컴포넌트를 애플리케이션 전반에 통합하면, 일관되고 언어를 인식하는 사용자 경험을 유지하는 동시에 SEO와 사용성 향상의 이점을 누릴 수 있습니다.
-
-### TypeScript 구성
-
-Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
-
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
-
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
-
-TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 기존 TypeScript 구성
-  "include": [
-    // ... 기존 TypeScript 구성
+    // ... 기존 TypeScript 설정
     ".intlayer/**/*.ts", // 자동 생성된 타입 포함
   ],
 }
 ```
 
-### Git 구성
+### Git 설정
 
-Intlayer가 생성한 파일은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
+Intlayer가 생성한 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
 
 이를 위해 `.gitignore` 파일에 다음 지침을 추가할 수 있습니다:
 
@@ -1627,18 +1598,18 @@ Intlayer가 생성한 파일은 Git 저장소에 커밋하지 않도록 무시
 .intlayer
 ```
 
-### VS Code 확장
+### VS Code 확장 프로그램
 
-Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장**을 설치할 수 있습니다.
+Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
 
 [VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-이 확장은 다음 기능을 제공합니다:
+이 확장 프로그램은 다음 기능을 제공합니다:
 
 - 번역 키에 대한 **자동 완성**.
-- **누락된 번역에 대한 실시간 오류 감지**.
-- **번역된 콘텐츠의 인라인 미리보기**.
-- **번역을 쉽게 생성 및 업데이트할 수 있는 빠른 작업**.
+- **실시간 오류 감지**로 누락된 번역을 확인할 수 있습니다.
+- **인라인 미리보기**를 통해 번역된 내용을 바로 확인할 수 있습니다.
+- **빠른 작업**으로 번역을 쉽게 생성하고 업데이트할 수 있습니다.
 
 확장 기능 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.