컨텐츠로 건너뛰기

자동 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. 설치 마법사 실행하기

섹션 제목: 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/ 디렉터리의 파일 변경 사항을 실시간으로 수신합니다. 따라서 개발 중 변경 사항을 적용하기 위해 서버를 다시 시작할 필요가 없습니다.

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

브라우저에서 프로젝트를 열 수 없는 경우 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 프로젝트 코드베이스를 사용해 보세요. 문제가 발생하거나 궁금한 점이 생기면 언제든지 이 문서로 돌아올 수 있습니다.

코드베이스 이해 프로젝트 구조 안내서에서 Astro의 파일 구조에 대해 자세히 알아보세요.
프레임워크 추가 통합 안내서에서 React, Svelte, Tailwind 등을 지원하여 Astro를 확장하세요.
사이트 배포 배포 안내서에서 Astro 프로젝트를 구축하고 웹에 배포하는 방법을 알아보세요.