컨텐츠로 이동
Astro Astro

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

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

요구사항

섹션 제목: 요구사항
  • Node.js - v18.14.1 또는 상위 버전.
  • 텍스트 에디터 - 공식 Astro 확장이 설치된 VS Code를 권장합니다.
  • 터미널 - Astro는 명령줄 인터페이스(CLI)를 통해 액세스됩니다.

설치

섹션 제목: 설치

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

1. 설치 마법사 실행하기

섹션 제목: 1. 설치 마법사 실행하기

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

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

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

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

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

2. Astro 시작하기 ✨

섹션 제목: 2. Astro 시작하기 ✨

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

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

Terminal window
npm run dev

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

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

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

시작 템플릿

섹션 제목: 시작 템플릿

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

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


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

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

블로그, 포트폴리오, 문서, 랜딩 페이지 등 다양한 테마를 찾아볼 수 있는 테마 및 시작 템플릿 쇼케이스를 살펴보세요! 또는 더 많은 시작 템플릿 프로젝트를 Github에서 검색해 보세요.

다음 단계

섹션 제목: 다음 단계

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

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

📚 프레임워크 추가: 통합 가이드 (EN)에서 npx astro add를 사용하여 Astro에 React, Svelte, Tailwind 등에 대한 지원을 추가하는 방법에 대해 알아보세요.

📚 사이트 배포: 배포 가이드 (EN)에서 Astro 프로젝트를 구축하고 웹에 배포하는 방법에 대해 알아보세요.

📚 코드베이스 이해: 프로젝트 구조 가이드에서 Astro의 프로젝트 구조에 대해 자세히 알아보세요.