i18n(ko-KR): update from-nextjs, from-nuxtjs, troubleshooting, sharing-state (#14219)

jsparkdev · ArmandPhilippot · web-flow · commit c5277250027c · 2026-07-13T10:59:59.000+02:00
Co-authored-by: Armand Philippot &lt;git@armand.philippot.eu&gt;
diff --git a/src/content/docs/ko/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/ko/guides/migrate-to-astro/from-nextjs.mdx
@@ -516,16 +516,23 @@ React (`.jsx`) 컴포넌트에서는 표준 JSX 이미지 구문 (`<img />`)을
     ```astro title="src/pages/index.astro" "class" "</a>" "<a"
     ---
     ---
+
     <ul class="plain-list pokeList">
-        {pokemons.map((pokemon) => (
-            <li class="pokemonListItem">
-                <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
-                    <p class="pokemonId">No. {pokemon.id}</p>
-                    <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/>
-                    <h2 class="pokemonName">{pokemon.name}</h2>
-                </a>
-            </li>
-        ))}
+      {
+        pokemons.map((pokemon: any) => (
+          <li class="pokemonListItem">
+            <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
+              <p class="pokemonId">No. {pokemon.id}</p>
+              <img
+                class="pokemonImage"
+                src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+                alt={`${pokemon.name} picture`}
+              />
+              <h2 class="pokemonName">{pokemon.name}</h2>
+            </a>
+          </li>
+        ))
+      }
     </ul>
     ```
 
@@ -536,36 +543,42 @@ React (`.jsx`) 컴포넌트에서는 표준 JSX 이미지 구문 (`<img />`)을
     - `getStaticProps` 함수는 더 이상 필요하지 않습니다. API의 데이터는 코드 펜스에서 직접 가져옵니다.
     - `<Layout>` 컴포넌트를 가져와서 페이지 템플릿을 래핑합니다.
 
-    ```astro ins={2,4-16,19,31} title="src/pages/index.astro"
+    ```astro ins={2,4-16,19,37} title="src/pages/index.astro"
     ---
-    import Layout from '../layouts/layout.astro';
+    import Layout from "../layouts/layout.astro";
 
     const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151");
     const resJson = await res.json();
-    const pokemons = resJson.results.map(pokemon => {
-        const name = pokemon.name;
-        // https://pokeapi.co/api/v2/pokemon/1/
-        const url = pokemon.url;
-        const id = url.split("/")[url.split("/").length - 2];
-        return {
-            name,
-            url,
-            id
-        }
+    const pokemons = resJson.results.map((pokemon: any) => {
+      const name = pokemon.name;
+      // https://pokeapi.co/api/v2/pokemon/1/
+      const url = pokemon.url;
+      const id = url.split("/")[url.split("/").length - 2];
+      return {
+        name,
+        url,
+        id,
+      };
     });
     ---
 
     <Layout>
       <ul class="plain-list pokeList">
-          {pokemons.map((pokemon) => (
-              <li class="pokemonListItem" key={pokemon.name}>
-                  <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
-                      <p class="pokemonId">No. {pokemon.id}</p>
-                      <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/>
-                      <h2 class="pokemonName">{pokemon.name}</h2>
-                  </a>
-              </li>
-          ))}
+        {
+          pokemons.map((pokemon: any) => (
+            <li class="pokemonListItem">
+              <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
+                <p class="pokemonId">No. {pokemon.id}</p>
+                <img
+                  class="pokemonImage"
+                  src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+                  alt={`${pokemon.name} picture`}
+                />
+                <h2 class="pokemonName">{pokemon.name}</h2>
+              </a>
+            </li>
+          ))
+        }
       </ul>
     </Layout>
     ```
diff --git a/src/content/docs/ko/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/ko/guides/migrate-to-astro/from-nuxtjs.mdx
@@ -300,7 +300,7 @@ Astro 컴포넌트의 속성 또는 컴포넌트 속성을 바인딩하려면 
 
 <p aria-label={message}>...</p>
 <!-- 컴포넌트 props도 지원 -->
-<Header title={"Page"}/>
+<Header title="Page"/>
 ```
 
 ### Nuxt Links 변환
@@ -369,15 +369,16 @@ Astro에서도 마찬가지로 두 가지 선택이 있습니다.
 ```astro title="src/pages/pokemon/[name].astro"
 ---
 export const getStaticPaths = async () => {
-  const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151")
+  const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151");
   const resJson = await res.json();
   const pokemons = resJson.results;
-  return pokemons.map(({ name }) => ({
-      params: { name },
-    }))
-}
+  return pokemons.map((pokemon: any) => ({
+    params: { name: pokemon.name },
+  }));
+};
 // ...
 ---
+
 <!-- 템플릿 작성 -->
 ```
 
@@ -440,7 +441,7 @@ Nuxt는 Vue의 컴포넌트 스타일을 활용하여 페이지 스타일을 생
 
 마찬가지로 Astro에서는 페이지 템플릿에 `<style>` 요소를 추가하여 컴포넌트에 범위가 지정된 스타일을 제공할 수 있습니다.
 
-```astro title="src/pages/index.vue"
+```astro title="src/pages/index.astro"
 ---
 // 서버 로직 작성
 ---
@@ -456,7 +457,7 @@ Nuxt는 Vue의 컴포넌트 스타일을 활용하여 페이지 스타일을 생
 
 `<style>` 태그는 Astro에서 기본적으로 `scoped`입니다. `<style>` 태그를 전역으로 만들려면 `is:global` 속성으로 표시하세요.
 
-```astro title="src/pages/index.vue"
+```astro title="src/pages/index.astro"
 <style is:global>
 	p {
 		color: red;
@@ -589,7 +590,7 @@ Astro 앱 내의 Vue (`.vue`) 컴포넌트에서 표준 JSX 이미지 구문 (`<
 
     - `v-for`는 `.map`이 됩니다.
 
-    - `:attr="val"`은 `attr={val}`이 됩니다.
+    - `:attr="val"`은 `attr={val}`로 변경됩니다. 단, `key`는 Astro의 `li` 요소에서 속성으로 사용되지 않으므로 제외됩니다.
 
     - `<NuxtLink>`는 `<a>`가 됩니다.
 
@@ -598,26 +599,33 @@ Astro 앱 내의 Vue (`.vue`) 컴포넌트에서 표준 JSX 이미지 구문 (`<
     ```astro title="src/pages/index.astro" ".map" "</a>" "<a" "key={" "}>" "href={" " {pokemon.id}" "} alt={" "src={" "}/>" ">{pokemon.name}<"
     ---
     ---
+
     <ul class="plain-list pokeList">
-        {pokemons.map((pokemon) => (
-            <li class="pokemonListItem" key={pokemon.name}>
-                <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
-                    <p class="pokemonId">No. {pokemon.id}</p>
-                    <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/>
-                    <h2 class="pokemonName">{pokemon.name}</h2>
-                </a>
-            </li>
-        ))}
+      {
+        pokemons.map((pokemon: any) => (
+          <li class="pokemonListItem">
+            <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
+              <p class="pokemonId">No. {pokemon.id}</p>
+              <img
+                class="pokemonImage"
+                src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+                alt={`${pokemon.name} picture`}
+              />
+              <h2 class="pokemonName">{pokemon.name}</h2>
+            </a>
+          </li>
+        ))
+      }
     </ul>
 
     <style>
-    .pokeList {
-      display: grid;
-      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
-      gap: 1rem;
-    }
+      .pokeList {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1rem;
+      }
 
-    /* ... */
+      /* ... */
     </style>
     ```
 
@@ -629,47 +637,53 @@ Astro 앱 내의 Vue (`.vue`) 컴포넌트에서 표준 JSX 이미지 구문 (`<
     - `<Layout>` 컴포넌트를 가져와 페이지 템플릿을 래핑합니다.
       - `head()` Nuxt 메소드는 `<Layout>` 컴포넌트에 전달되며, 이는 `<title>` 요소에 속성으로 전달됩니다.
 
-    ```astro ins={2,4-16,19,31} title="src/pages/index.astro"
+    ```astro ins={2,4-16,19,37} title="src/pages/index.astro"
     ---
-    import Layout from '../layouts/layout.astro';
+    import Layout from "../layouts/layout.astro";
 
     const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151");
     const resJson = await res.json();
-    const pokemons = resJson.results.map(pokemon => {
-        const name = pokemon.name;
-        // https://pokeapi.co/api/v2/pokemon/1/
-        const url = pokemon.url;
-        const id = url.split("/")[url.split("/").length - 2];
-        return {
-            name,
-            url,
-            id
-        }
+    const pokemons = resJson.results.map((pokemon: any) => {
+      const name = pokemon.name;
+      // https://pokeapi.co/api/v2/pokemon/1/
+      const url = pokemon.url;
+      const id = url.split("/")[url.split("/").length - 2];
+      return {
+        name,
+        url,
+        id,
+      };
     });
     ---
 
     <Layout title="Pokedex: Generation 1">
       <ul class="plain-list pokeList">
-          {pokemons.map((pokemon) => (
-              <li class="pokemonListItem" key={pokemon.name}>
-                  <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
-                      <p class="pokemonId">No. {pokemon.id}</p>
-                      <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/>
-                      <h2 class="pokemonName">{pokemon.name}</h2>
-                  </a>
-              </li>
-          ))}
+        {
+          pokemons.map((pokemon: any) => (
+            <li class="pokemonListItem">
+              <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}>
+                <p class="pokemonId">No. {pokemon.id}</p>
+                <img
+                  class="pokemonImage"
+                  src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+                  alt={`${pokemon.name} picture`}
+                />
+                <h2 class="pokemonName">{pokemon.name}</h2>
+              </a>
+            </li>
+          ))
+        }
       </ul>
     </Layout>
 
     <style>
-    .pokeList {
-      display: grid;
-      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
-      gap: 1rem;
-    }
+      .pokeList {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1rem;
+      }
 
-    /* ... */
+      /* ... */
     </style>
     ```
 </Steps>
diff --git a/src/content/docs/ko/guides/troubleshooting.mdx b/src/content/docs/ko/guides/troubleshooting.mdx
@@ -40,8 +40,8 @@ Astro 컴포넌트 디버깅을 돕기 위해 Astro는 모든 값을 컴포넌
 
 ```astro {2,7}
 ---
-import { Debug } from 'astro:components';
-const sum = (a, b) => a + b;
+import { Debug } from "astro:components";
+const sum = (a: any, b: any) => a + b;
 ---
 
 <!-- 예: 브라우저에 {answer: 6}을 출력합니다. -->
@@ -50,15 +50,16 @@ const sum = (a, b) => a + b;
 
 Debug 컴포넌트는 더욱 유연하고 간결한 디버깅을 위해 다양한 구문 옵션을 지원합니다.
 
-```astro {2,7-9}
+```astro {2,8-10}
 ---
-import { Debug } from 'astro:components';
-const sum = (a, b) => a + b;
+import { Debug } from "astro:components";
+const sum = (a: any, b: any) => a + b;
 const answer = sum(2, 4);
 ---
+
 <!-- 예: 세 가지 예시는 모두 동일합니다. -->
 <Debug answer={sum(2, 4)} />
-<Debug {...{answer: sum(2, 4)}} />
+<Debug {...{ answer: sum(2, 4) }} />
 <Debug {answer} />
 ```
 
diff --git a/src/content/docs/ko/recipes/sharing-state.mdx b/src/content/docs/ko/recipes/sharing-state.mdx
@@ -52,32 +52,35 @@ Astro 웹 사이트를 구축할 때 컴포넌트 간 상태를 공유해야 할
     <button id="openDialog">Open</button>
 
     <script>
-      import { isOpen } from '../store.js';
+      import { isOpen } from "../store.js";
       
       // 버튼을 클릭하면 스토어를 true로 설정합니다.
       function openDialog() {
         isOpen.set(true);
       }
 
       // 버튼에 이벤트 리스너 추가를 추가합니다.
-      document.getElementById('openDialog').addEventListener('click', openDialog);
+      document.getElementById("openDialog")?.addEventListener("click", openDialog);
     </script>
     ```
 
     ```astro title="src/components/Dialog.astro"
     <div id="dialog" style="display: none">Hello world!</div>
 
     <script>
-      import { isOpen } from '../store.js';
+      import { isOpen } from "../store.js";
 
+      const dialog = document.getElementById("dialog");
       // 스토어의 변경 사항을 수신하여 그에 따라 대화 상자를 표시하거나 숨깁니다.  
-      isOpen.subscribe(open => {
-        if (open) {
-          document.getElementById('dialog').style.display = 'block';
-        } else {
-          document.getElementById('dialog').style.display = 'none';
+      isOpen.subscribe((open) => {
+        if (dialog) {
+          if (open) {
+            dialog.style.display = "block";
+          } else {
+            dialog.style.display = "none";
+          }
         }
-      })
+      });
     </script>
     ```
 </Steps>
