자동 CLI를 사용해 Astro 설치하기

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

요구사항

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

설치

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

1. 설치 마법사 실행하기

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

# npm으로 새 프로젝트 생성
npm create astro@latest

# pnpm으로 새 프로젝트 생성
pnpm create astro@latest

# yarn으로 새 프로젝트 생성
yarn create astro

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

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

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

2. Astro 시작하기 ✨

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

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

npm run dev

pnpm run dev

yarn run dev

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

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

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

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

시작 템플릿

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

# 공식 샘플을 사용해 새 프로젝트 생성
npm create astro@latest -- --template <example-name>

# GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
npm create astro@latest -- --template <github-username>/<github-repo>

# 공식 샘플을 사용해 새 프로젝트 생성
pnpm create astro@latest --template <example-name>

# GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
pnpm create astro@latest --template <github-username>/<github-repo>

# 공식 샘플을 사용해 새 프로젝트 생성
yarn create astro --template <example-name>

# GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
yarn create astro --template <github-username>/<github-repo>