첫 번째 Astro 프로젝트 만들기

이번에 배울 내용

Astro 설정 마법사 실행

새로운 Astro 사이트를 생성하는 가장 좋은 방법은 create astro 설정 마법사를 이용하는 것입니다.

터미널의 명령줄에서 원하는 패키지 관리자를 사용하여 다음 명령을 실행합니다.
- npm
- pnpm
- Yarn
터미널 창
# npm으로 새 프로젝트를 만듭니다 npm create astro@latest
터미널 창
# pnpm으로 새 프로젝트를 만듭니다 pnpm create astro@latest
터미널 창
# yarn으로 새 프로젝트를 만듭니다 yarn create astro
create-astro를 설치하려면 y를 입력하세요.
프롬프트가 프로젝트를 생성할 위치를 묻는 경우, 프로젝트의 새 디렉터리를 생성하기 위해 폴더 이름을 입력하세요. 예: ./tutorial

새로운 Astro 프로젝트는 완전히 비어 있는 폴더에서만 생성할 수 있으므로, 아직 존재하지 않는 폴더 이름을 선택하세요!
선택할 수 있는 스타터 템플릿의 짧은 목록이 표시됩니다. 화살표 키 (위, 아래)를 사용하여 minimal (empty) template으로 이동한 다음, Return (엔터) 키를 눌러 선택을 제출하세요.
프롬프트가 의존성을 설치할지 여부를 물어볼 때, y를 입력하세요.
프롬프트가 새로운 git 저장소를 초기화할지 여부를 물어볼 때, y를 입력하세요.

설치 마법사가 완료되면 더 이상 이 터미널이 필요하지 않습니다. 이제 VS Code를 열어 계속 작업할 수 있습니다.

VS Code를 실행합니다. 폴더를 열라는 메시지가 표시됩니다. 설정 마법사로 생성한 폴더를 선택합니다.
Astro 프로젝트를 처음 여는 경우 권장 확장 프로그램을 설치할 것인지 묻는 알림이 표시됩니다. 클릭하여 권장 확장을 확인하고 Astro 언어 지원 확장을 선택하세요. 이는 Astro 코드에 대한 구문 강조 및 자동 완성 기능을 제공합니다.
터미널이 표시되고 다음과 같은 명령 프롬프트가 표시되는지 확인합니다.
터미널 창
```
user@machine:~/tutorial$
```
터미널을 열고 닫으려면 Ctrl + J (macOS: Cmd ⌘ + J)를 사용하세요.

이제 이 튜토리얼의 나머지 부분에서 컴퓨터의 터미널 앱 대신 이 창에서 바로 내장된 터미널을 사용할 수 있습니다.

작업하는 동안 프로젝트 파일을 웹사이트로 미리 보려면 Astro가 개발 (dev) 모드에서 실행되어야 합니다.

프로젝트 파일에는 Astro 웹사이트를 표시하는 데 필요한 모든 코드가 포함되어 있지만 브라우저는 코드를 웹페이지로 표시하는 역할을 담당합니다.

터미널 창에서 localhost 링크를 클릭하여 새로운 Astro 웹사이트의 실시간 미리보기를 확인하세요!

(Astro는 4321 포트를 사용할 수 있는 경우 기본적으로 http://localhost:4321을 사용합니다.)

Astro “Empty Project” 시작 웹사이트는 브라우저 미리보기에서 다음과 같이 보여야 합니다.