컨텐츠로 이동

통합 추가

Astro 통합은 단 몇 줄의 코드만으로 프로젝트에 새로운 기능과 동작을 추가합니다. 사용자 정의 통합을 직접 작성하거나, 공식 통합을 사용하거나, 커뮤니티에서 구축한 통합을 사용할 수 있습니다.

통합은 다음을 수행할 수 있습니다.

  • React, Vue, Svelte, Solid 및 기타 널리 사용되는 UI 프레임워크를 사용합니다.
  • 몇 줄의 코드만으로 Tailwind 및 Partytown과 같은 도구를 추가합니다.
  • 자동 사이트맵 생성과 같은 새로운 기능을 프로젝트에 추가합니다.
  • 빌드 프로세스, 개발 서버 등에 연결되는 사용자 정의 코드를 작성합니다.

공식 통합

섹션 제목: 공식 통합

UI 프레임워크

SSR 어댑터

기타

자동 통합 설정

섹션 제목: 자동 통합 설정

Astro에는 통합 설정을 자동화하는 astro add 명령이 포함되어 있습니다.

선택한 패키지 관리자를 사용하여 astro add 명령을 실행하면 자동 통합 마법사가 구성 파일을 업데이트하고 필요한 종속성을 설치합니다.

Terminal window
npx astro add react

동시에 여러 통합을 추가하는 것도 가능합니다!

Terminal window
npx astro add react tailwind partytown

통합 사용

섹션 제목: 통합 사용

Astro 통합은 항상 astro.config.mjs 파일의 integrations 속성을 통해 추가됩니다.

Astro 프로젝트로 통합을 가져오는 세 가지 일반적인 방법이 있습니다.

  1. npm 패키지 통합 설치.

  2. 프로젝트의 로컬 파일에서 자체 통합을 가져옵니다.

  3. 구성 파일에 직접 통합 인라인을 작성합니다.

    astro.config.mjs
    import {defineConfig} from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';
    

    export default defineConfig({
      integrations: [
        // 1. 설치된 npm 패키지에서 가져옵니다.
        installedIntegration(),
        // 2. 로컬 JS 파일에서 가져옵니다.
        localIntegration(),
        // 3. 인라인 객체를 작성합니다.
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    })

통합을 작성할 수 있는 다양한 방법을 모두 알아보려면 통합 API 참조를 확인하세요.

맞춤 옵션

섹션 제목: 맞춤 옵션

통합은 대부분의 경우 실제 통합 객체를 반환하는 팩토리 함수로 작성됩니다. 이를 통해 프로젝트 통합을 사용자 정의하는 팩토리 함수에 인수와 옵션을 전달할 수 있습니다.

integrations: [
  // 예: 함수 인수를 사용하여 통합 사용자 정의
  sitemap({filter: true})
]

통합 켜고 끄기

섹션 제목: 통합 켜고 끄기

거짓같은 값을 나타내는 통합은 무시되므로 undefined 및 부울 값을 신경쓰지 않고 통합을 켜거나 끌 수 있습니다.

integrations: [
  // 예: Windows에서 사이트맵 작성 건너뛰기
  process.platform !== 'win32' && sitemap()
]

통합 업그레이드

섹션 제목: 통합 업그레이드

모든 공식 통합을 한 번에 업그레이드하려면 @astrojs/upgrade 명령을 실행하세요. 그러면 Astro와 모든 공식 통합이 최신 버전으로 업그레이드됩니다.

자동 업그레이드

섹션 제목: 자동 업그레이드
Terminal window
# Astro와 공식 통합을 최신 버전으로 함께 업그레이드
npx @astrojs/upgrade

수동 업그레이드

섹션 제목: 수동 업그레이드

하나 이상의 통합을 수동으로 업그레이드하려면 패키지 관리자에 적합한 명령을 사용하세요.

Terminal window
# 예: React 및 Tailwind 통합 업그레이드
npm install @astrojs/react@latest @astrojs/tailwind@latest

통합 제거

섹션 제목: 통합 제거

통합을 제거하려면 먼저 프로젝트에서 통합을 제거하세요.

Terminal window
npm uninstall @astrojs/react

그런 다음 astro.config.* 파일에서 통합을 제거합니다.

astro.config.mjs
import { defineConfig } from 'astro/config'


import react from "@astrojs/react";


export default defineConfig({
  integrations: [
    react()
  ]
})

더 많은 통합 찾기

섹션 제목: 더 많은 통합 찾기

Astro 통합 디렉터리에서 커뮤니티에서 개발한 다양한 통합을 찾을 수 있습니다. 자세한 사용법 및 구성 지침을 보려면 해당 링크를 따르세요.

나만의 통합 구축

섹션 제목: 나만의 통합 구축

Astro의 통합 API는 Rollup 및 Vite에서 영감을 얻었으며, 이전에 Rollup 또는 Vite 플러그인을 작성한 적이 있는 모든 사람에게 친숙하게 느껴지도록 설계되었습니다.

통합이 수행할 수 있는 작업과 직접 작성하는 방법을 알아보려면 통합 API 참조를 확인하세요.