i18n(ko-KR): update typescript.mdx (#11113)

Co-authored-by: Yan <[email protected]>

src/content/docs/ko/guides/typescript.mdx

@@ -10,7 +10,7 @@ Astro는 [TypeScript](https://www.typescriptlang.org/)를 기본적으로 지원
 
 TypeScript를 사용하면 코드에서 객체 및 컴포넌트의 형태를 정의하여 런타임 시 오류를 방지할 수 있습니다. 예를 들어 TypeScript를 사용하여 [컴포넌트의 props에 타입을 지정](#컴포넌트-props)하면 컴포넌트가 허용하지 않는 prop을 설정할 경우 편집기에서 오류가 발생합니다.
 
-Astro 프로젝트에서 TypeScript 코드를 작성하지 않아도 이점을 누릴 수 있습니다. Astro는 항상 컴포넌트 코드를 TypeScript로 처리하며, [Astro VSCode 확장 프로그램](/ko/editor-setup/)은 자동 완성, 힌트 및 편집기 오류를 제공하기 위해 최대한 많은 정보를 추론합니다.
+Astro 프로젝트에서 TypeScript 코드를 작성하지 않아도 이점을 누릴 수 있습니다. Astro는 항상 컴포넌트 코드를 TypeScript로 처리하며, [Astro VS Code 확장 프로그램](/ko/editor-setup/)은 자동 완성, 힌트 및 편집기 오류를 제공하기 위해 최대한 많은 정보를 추론합니다.
 
 Astro 개발 서버는 타입 검사를 수행하지 않지만, [별도의 스크립트](#타입-검사)를 사용하여 명령줄에서 타입 오류를 검사할 수 있습니다.
 
@@ -23,6 +23,7 @@ Astro 시작 프로젝트에는 `tsconfig.json` 파일이 포함되어 있습니
 Astro에는 확장 가능한 세 가지 `tsconfig.json` 템플릿인 `base`, `strict` 및 `strictest`가 포함되어 있습니다. `base` 템플릿은 최신 JavaScript 기능에 대한 지원을 활성화하며 다른 템플릿의 기반으로도 사용됩니다. 프로젝트에서 TypeScript를 작성하려는 경우 `strict` 또는 `strictest`를 사용하는 것이 좋습니다. [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)에서 세 가지 템플릿 구성을 보고 비교할 수 있습니다.
 
 템플릿 중 하나를 상속하려면 [`extends` 설정](https://www.typescriptlang.org/tsconfig#extends)을 사용하세요.
+
 ```json title="tsconfig.json"
 {
   "extends": "astro/tsconfigs/base"
@@ -47,14 +48,18 @@ Astro에는 확장 가능한 세 가지 `tsconfig.json` 템플릿인 `base`, `st
 // 사용자 정의 타입을 선언합니다.
 declare var myString: string;
 
-// Astro 타입입니다. tsconfig.json이 이미 있는 경우에는 필요하지 않습니다.
+// Astro 타입입니다. `tsconfig.json`이 이미 있는 경우에는 필요하지 않습니다.
 /// <reference path="../.astro/types.d.ts" />
 ```
 
 ### TypeScript 편집기 플러그인
+
 [공식 Astro VS Code 확장 프로그램](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 사용하지 않을 때 [Astro TypeScript 플러그인](https://www.npmjs.com/package/@astrojs/ts-plugin)을 별도로 설치할 수 있습니다. 이 플러그인은 VSCode 확장 프로그램에 의해 자동으로 설치 및 구성되므로 둘 다 설치할 필요는 없습니다.
+
 이 플러그인은 편집기에서만 실행됩니다. 터미널에서 `tsc`를 실행하면 `.astro` 파일은 완전히 무시됩니다. 대신 [`astro check` CLI 명령](/ko/reference/cli-reference/#astro-check)을 사용하여 `.astro` 및 `.ts` 파일을 모두 검사할 수 있습니다.
+
 이 플러그인은 `.ts` 파일에서 `.astro` 파일을 가져오는 것도 지원합니다 (다시 내보내기에 유용할 수 있음).
+
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```shell
@@ -72,15 +77,19 @@ declare var myString: string;
   ```
   </Fragment>
 </PackageManagerTabs>
+
 그런 다음 `tsconfig.json`에 다음을 추가하세요.
+
 ```json title="tsconfig.json"
+{
   "compilerOptions": {
     "plugins": [
       {
         "name": "@astrojs/ts-plugin"
       },
     ],
   }
+}
 ```
 플러그인이 작동하는지 확인하려면 `.ts` 파일을 만들고 Astro 컴포넌트를 가져옵니다. 편집기에서 경고 메시지가 표시되지 않아야 합니다.
 
@@ -102,18 +111,17 @@ import type { SomeType } from './script';
 `tsconfig.json` 파일에서 타입 가져오기를 적용하도록 TypeScript를 구성할 수 있습니다. [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)를 `true`로 설정하세요. TypeScript는 가져오기를 확인하고 `import type`을 사용해야 하는 시점을 알려줍니다. 이 설정은 모든 프리셋에서 기본적으로 활성화되어 있습니다.
 
 ```json title="tsconfig.json" ins={3}
-  {
-    "compilerOptions": {
-      "verbatimModuleSyntax": true
-    }
+{
+  "compilerOptions": {
+    "verbatimModuleSyntax": true
   }
+}
 ```
 
 ## 별칭 가져오기
 
 Astro는 `tsconfig.json` `paths` 구성에서 정의하는 [별칭 가져오기](/ko/guides/imports/#별칭)를 지원합니다. 자세한 내용은 [가이드](/ko/guides/imports/#별칭)를 참조하세요.
 
-
 ```astro title="src/pages/about/nate.astro" "@components" "@layouts"
 ---
 import HelloWorld from '@components/HelloWorld.astro';
@@ -159,6 +167,7 @@ interface Window {
 ## 컴포넌트 Props
 
 Astro는 TypeScript를 통해 컴포넌트 props의 타입을 지원합니다. 활성화하려면 컴포넌트 프런트매터에 TypeScript `Props` 인터페이스를 추가하세요. `export` 구문을 사용할 수 있지만 필수는 아닙니다. [Astro VSCode 확장 프로그램](/ko/editor-setup/)은 `Props` 인터페이스를 자동으로 찾아서 다른 템플릿에서 해당 컴포넌트를 사용할 때 적절한 TS 지원을 제공합니다.
+
 ```astro title="src/components/HelloProps.astro" ins={2-5}
 ---
 interface Props {
@@ -173,7 +182,6 @@ const { greeting = 'Hello', name } = Astro.props;
 ### 일반적인 prop 타입 패턴
 
 - 컴포넌트가 props 또는 슬롯 콘텐츠를 사용하지 않는 경우 `type Props = Record<string, never>`를 사용할 수 있습니다.
-
 - 컴포넌트의 기본 슬롯에 자식을 전달해야 하는 경우 `type Props = { children: any; };`를 사용하여 이를 적용할 수 있습니다.
 
 ## 타입 유틸리티
@@ -191,12 +199,15 @@ Astro는 마크업이 유효한 HTML 속성을 사용하고 있는지 검사하
 ```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
 ---
 import type { HTMLAttributes } from 'astro/types';
+
 // `type`을 사용합니다.
 type Props = HTMLAttributes<'a'>;
+
 // 또는 `interface`를 사용하여 확장합니다.
 interface Props extends HTMLAttributes<'a'> {
   myProp?: boolean;
 }
+
 const { href, ...attrs } = Astro.props;
 ---
 <a href={href} {...attrs}>
@@ -206,9 +217,7 @@ const { href, ...attrs } = Astro.props;
 
 `.d.ts` 파일에서 `astroHTML.JSX` 네임스페이스를 다시 선언하여 기본 JSX 정의를 확장할 수 있습니다. 이를 통해 비표준 속성을 추가할 수도 있습니다.
 
-```ts
-// src/custom-attributes.d.ts
-
+```ts title="src/custom-attributes.d.ts"
 declare namespace astroHTML.JSX {
   interface HTMLAttributes {
     'data-count'?: number;
@@ -243,7 +252,6 @@ type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
 ```astro title="src/pages/index.astro"
 ---
 import type { ComponentProps } from 'astro/types';
-
 import Button from "./Button.astro";
 
 type ButtonProps = ComponentProps<typeof Button>;
@@ -266,7 +274,6 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
 
 const { as: Tag, ...props } = Astro.props;
 ---
-
 <Tag {...props} />
 ```
 
@@ -297,6 +304,7 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { id } = Astro.params as Params;
 //                   ^? { id: string; }
+
 const { title } = Astro.props;
 //                      ^? { draft: boolean; title: string; }
 ---
@@ -306,11 +314,13 @@ const { title } = Astro.props;
 
 편집기에서 타입 오류를 확인하려면 [Astro VS Code 확장 프로그램](/ko/editor-setup/)이 설치되어 있는지 확인하세요. `astro start` 및 `astro build` 명령은 esbuild로 코드를 트랜스파일하지만 타입 검사를 실행하지는 않습니다. 코드에 TypeScript 오류가 포함된 경우 빌드되지 않도록 하려면 `package.json`의 "build" 스크립트를 다음과 같이 변경하세요.
 
-```json title="package.json" del={2} ins={3} ins="astro check &&"
+```json title="package.json" del={3} ins={4} ins="astro check &&"
+{
   "scripts": {
     "build": "astro build",
     "build": "astro check && astro build",
   },
+}
 ```
 
 :::note