Skip to content

Latest commit

 

History

History
155 lines (119 loc) · 7.25 KB

auto.mdx

File metadata and controls

155 lines (119 loc) · 7.25 KB
Raw
title description i18nReady
자동 CLI를 사용해 Astro 설치하기
create-astro CLI 도구를 사용하여 NPM, PNPM, 또는 Yarn으로 Astro 설치하기
true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro를 설치할 준비가 되셨나요? create astro CLI를 사용하여 시작하려면 이 가이드를 따르세요.

:::note[ASTRO를 수동으로 설치하는 것을 선호하시나요?] 단계별 수동 설치 가이드를 읽어보세요. :::

요구사항

  • Node.js - v18.17.1 또는 v20.3.0 또는 상위 버전. (v19는 지원되지 않습니다.)
  • 텍스트 에디터 - 공식 Astro 확장이 설치된 VS Code를 권장합니다.
  • 터미널 - Astro는 명령줄 인터페이스(CLI)를 통해 액세스됩니다.

설치

create astro는 새 Astro 프로젝트를 처음부터 시작하는 가장 빠른 방법입니다. 이는 새 Astro 프로젝트를 설정하는 전체 단계를 안내합니다. 또한, 몇 가지 공식 시작 템플릿 중 하나를 선택하거나 --template 인수를 사용하여 GitHub에 저장된 기존 프로젝트를 사용할 수도 있습니다.

:::tip[웹에서 미리보기]

브라우저에서 Astro를 사용해보고 싶으신가요? astro.new를 방문해 시작 템플릿을 선택하여 브라우저를 떠나지 않고 새로운 Astro 프로젝트를 시작해 보세요. :::

1. 설치 마법사 실행하기

편리한 설치 마법사를 시작하려면 터미널에서 다음 명령을 실행하세요.

```shell # npm으로 새 프로젝트 생성 npm create astro@latest ``` ```shell # pnpm으로 새 프로젝트 생성 pnpm create astro@latest ``` ```shell # yarn으로 새 프로젝트 생성 yarn create astro ```

컴퓨터 어느 곳에서나 create astro를 실행할 수 있습니다. 새 프로젝트를 위한 빈 디렉터리가 존재하지 않는다면 설치 마법사가 자동으로 디렉터리를 생성하므로 시작하기 전에 프로젝트를 위한 새 디렉터리를 생성할 필요가 없습니다.

모든 작업이 정상적으로 완료되면 "Liftoff confirmed. Explore your project!"라는 메시지가 출력되고 권장되는 몇 가지 추가 작업이 표시됩니다. 이후, Astro를 시작하기 위해 cd 명령을 사용하여 새 프로젝트 디렉터리로 이동하세요.

CLI 마법사를 이용해 프로젝트를 설정하는 중 npm install 단계를 생략한 경우 직접 패키지를 설치해야 합니다.

2. Astro 시작하기 ✨

Astro에는 프로젝트 개발에 필요한 모든 것을 갖춘 개발 서버가 내장되어 있습니다. astro dev 명령을 통해 로컬 개발 서버를 시작하여 웹사이트가 작동하는 모습을 확인할 수 있습니다.

모든 시작 템플릿에는 astro dev를 실행하도록 설정된 스크립트가 포함되어 있습니다. 선호하는 패키지 관리자를 사용하여 Astro 개발 서버를 시작하세요.

```shell npm run dev ``` ```shell pnpm run dev ``` ```shell yarn run dev ```

모든 작업이 정상적으로 완료되었다면 Astro는 http://localhost:4321/에서 프로젝트를 제공할 것입니다!

Astro는 src/ 디렉터리의 파일 변경 사항을 실시간으로 수신합니다. 따라서 개발 중 변경 사항을 적용하기 위해 서버를 다시 시작할 필요가 없습니다.

브라우저에서 사이트를 확인할 때, Astro 개발 툴바를 사용할 수 있습니다. 이는 빌드하면서 아일랜드를 검사하고, 접근성 문제 등을 발견하는 데 도움이 됩니다.

브라우저에서 프로젝트를 열 수 없는 경우 dev 명령을 실행한 터미널로 돌아가 오류가 발생했는지, 또는 프로젝트가 다른 URL에서 제공되고 있는지 확인하세요.

시작 템플릿

create astro 명령에 --template 인수를 전달하여 공식 샘플 또는 Github 저장소의 main 브랜치를 사용하는 새 Astro 프로젝트를 시작할 수 있습니다.

```shell # 공식 샘플을 사용해 새 프로젝트 생성 npm create astro@latest -- --template

GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성

npm create astro@latest -- --template /

</Fragment>
<Fragment slot="pnpm">
```shell
# 공식 샘플을 사용해 새 프로젝트 생성
pnpm create astro@latest --template <example-name>

# GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
pnpm create astro@latest --template <github-username>/<github-repo>
```shell # 공식 샘플을 사용해 새 프로젝트 생성 yarn create astro --template

GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성

yarn create astro --template /

</Fragment>
</PackageManagerTabs>

기본적으로 이 명령은 템플릿 저장소의 `main` 브랜치를 사용합니다. 다른 브랜치 이름을 사용하려면 `--template` 인수의 일부로 `<github-username>/<github-repo>#<branch>`를 전달하세요.

블로그, 포트폴리오, 문서, 랜딩 페이지 등 다양한 테마를 찾아볼 수 있는 [테마 및 시작 템플릿 쇼케이스](https://astro.build/themes/)를 살펴보세요! 또는 더 많은 시작 템플릿 프로젝트를 [Github에서 검색](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories)해 보세요.

## 다음 단계

성공입니다! 이제 Astro와 함께 개발을 시작할 준비가 되었습니다. 🥳

더 살펴볼만한 몇 가지 주제는 다음과 같으며 어떤 순서로든 읽을 수 있습니다. 문서에서 잠시 벗어나 새 Astro 프로젝트 코드베이스를 사용해 보세요. 문제가 발생하거나 궁금한 점이 생기면 언제든지 이 문서로 돌아올 수 있습니다.

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
<LinkCard
  title="코드베이스 이해"
  description="프로젝트 구조 안내서에서 Astro의 파일 구조에 대해 자세히 알아보세요."
  href="/ko/basics/project-structure/"
/>
<LinkCard
  title="프레임워크 추가"
  description="통합 안내서에서 React, Svelte, Tailwind 등을 지원하여 Astro를 확장하세요."
  href="/ko/guides/integrations-guide/"
/>
<LinkCard
  title="사이트 배포"
  description="배포 안내서에서 Astro 프로젝트를 구축하고 웹에 배포하는 방법을 알아보세요."
  href="/ko/guides/deploy/"
/>
</CardGrid>