i18n(ko-KR): add alpinejs.mdx (#6068)

Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/ko/guides/integrations-guide/alpinejs.mdx

@@ -0,0 +1,131 @@
+---
+type: integration
+title: '@astrojs/alpinejs'
+description: '@astrojs/alpinejs 프레임워크 통합을 사용하여 Astro 프로젝트에서 컴포넌트 지원을 확장하는 방법을 알아보세요.'
+githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/'
+category: renderer
+i18nReady: true
+---
+
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
+이 **[Astro 통합][astro-integration]** 은 프로젝트에 [Alpine.js](https://alpinejs.dev/)를 추가하므로 페이지 어디에서나 Alpine.js를 사용할 수 있습니다.
+
+## 설치
+
+Astro에는 공식 통합 설정을 자동화하는 `astro add` 명령이 포함되어 있습니다. 원하는 경우 대신 [통합을 수동으로 설치](#수동으로-설치하기)할 수 있습니다.
+
+`@astrojs/alpinejs`를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+    ```sh
+    npx astro add alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="pnpm">
+    ```sh
+    pnpm astro add alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="yarn">
+    ```sh
+    yarn astro add alpinejs
+    ```
+  </Fragment>
+</PackageManagerTabs>
+
+문제가 발생하면 [GitHub에 언제든지 보고](https://github.com/withastro/astro/issues)하고 아래 수동 설치 단계를 시도해 보세요.
+
+### 수동으로 설치하기
+
+먼저 `@astrojs/alpinejs` 패키지를 설치하세요.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+    ```sh
+    npm install @astrojs/alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="pnpm">
+    ```sh
+    pnpm add @astrojs/alpinejs
+    ```
+  </Fragment>
+  <Fragment slot="yarn">
+    ```sh
+    yarn add @astrojs/alpinejs
+    ```
+  </Fragment>
+</PackageManagerTabs>
+
+대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. 그러나 Astro를 시작할 때 "Cannot find package 'alpinejs'" (또는 이와 유사한) 경고가 표시되면 Alpine.js를 직접 설치해야 합니다.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install alpinejs @types/alpinejs
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add alpinejs @types/alpinejs
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add alpinejs @types/alpinejs
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+그런 다음 `integrations` 속성을 사용하여 `astro.config.*` 파일에 통합을 적용합니다.
+
+```js ins="alpine()" title="astro.config.mjs" ins={2}
+import { defineConfig } from 'astro/config';
+import alpine from '@astrojs/alpinejs';
+
+export default defineConfig({
+  // ...
+  integrations: [alpine()],
+});
+```
+
+## 사용
+
+통합이 설치되면 모든 Astro 컴포넌트에서 [Alpine.js](https://alpinejs.dev/) 지시어와 구문을 사용할 수 있습니다. Alpine.js 스크립트는 웹사이트의 모든 페이지에 자동으로 추가되고 활성화됩니다.
+
+통합에 대한 자세한 내용은 [Astro 통합 문서][astro-integration]를 확인하세요.
+
+## 한계
+
+Alpine.js 통합은 스크립트가 로드되거나 초기화되는 방법을 제어할 수 없습니다. 이 컨트롤이 필요한 경우 [Alpine.js를 수동으로 설치하고 사용](https://alpinejs.dev/essentials/installation)하는 것이 좋습니다. Astro는 Astro 컴포넌트의 `<script>` 태그를 사용하여 공식적으로 문서화된 모든 Alpine.js 수동 설정 지침을 지원합니다.
+
+**현재 이 컴포넌트를 사용할 때 [Alpine.js를 확장](https://alpinejs.dev/advanced/extending)하는 것은 불가능합니다.** 이 기능이 필요한 경우 Astro 스크립트 태그를 사용하는 대신 [수동 Alpine.js 설정](https://alpinejs.dev/essentials/installation)을 따르는 것이 좋습니다.
+
+```astro title="src/pages/index.astro"
+---
+---
+
+<!-- 예: 단일 페이지에 AlpineJS를 로드합니다. -->
+<script>
+  import Alpine from 'alpinejs';
+
+  // Optional: Extend Alpine.js
+  // Alpine.directive('foo', ...)
+
+  window.Alpine = Alpine;
+  Alpine.start();
+</script>
+```
+
+## 구성
+
+Alpine.js 통합은 현재 사용자 정의 구성을 지원하지 않습니다.
+
+## 예시
+
+* [Astro Alpine.js 예시](https://github.com/withastro/astro/tree/latest/examples/framework-alpine)는 Astro 프로젝트에서 Alpine.js를 사용하는 방법을 보여줍니다.
+
+[astro-integration]: /ko/guides/integrations-guide/
+[astro-ui-frameworks]: /ko/core-concepts/framework-components/#컴포넌트-프레임워크-사용하기