첫 번째 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

:::note새 Astro 프로젝트는 완전히 비어 있는 폴더에만 만들 수 있으므로 아직 존재하지 않는 폴더 이름을 선택하세요!:::
선택할 수 있는 몇 가지 시작 템플릿 목록이 표시됩니다. 방향키 (위, 아래)를 사용하여 minimal (empty) 템플릿으로 이동하여 리턴키 (엔터키)를 눌러 템플릿을 선택하세요.
의존성을 설치할지 묻는 메시지가 표시되면 y를 입력하세요.
새로운 git 리포지토리를 초기화할지 묻는 메시지가 표시되면 y를 입력하세요.

설치 마법사가 완료되면 더 이상 터미널이 필요하지 않습니다. 이제 VS Code를 실행하여 과정을 계속 진행할 수 있습니다.

VS Code를 실행하세요. 그러면 폴더를 열라는 메시지가 표시됩니다. 설정 마법사에서 생성한 폴더를 선택하세요.
이 과정이 Astro 프로젝트를 처음으로 실행하는 것이라면, 추천 확장 프로그램을 설치할지 물어보는 알림이 표시될 것입니다. 이 알림을 클릭하여 추천 확장 프로그램 목록을 확인하고, Astro 언어 지원 확장 프로그램을 선택하세요. 이 확장 프로그램은 Astro 코드를 위한 구문 강조와 자동 완성 기능을 제공할 것입니다.
터미널에 다음과 같은 명령 프롬프트가 나타나는지 확인하세요.
```
user@machine:~/tutorial$
```
:::tip[키보드 단축키]키보드에서 Ctrl + J (macOS의 경우 Cmd ⌘ + J) 키를 눌러 터미널을 열고 닫을 수 있습니다.:::

이제 이 튜토리얼의 다음 단계부터는 컴퓨터의 Terminal 앱 대신 내장된 터미널을 사용할 수 있습니다.

개발하는 동안 프로젝트 파일들이 웹사이트에서 어떻게 보이는지 확인하려면, Astro를 개발(dev) 모드로 실행해야 합니다.

프로젝트 파일에는 Astro 웹사이트를 나타내는 데 필요한 모든 코드가 포함되어 있습니다. 하지만 코드를 웹 페이지로 나타내는 것은 브라우저의 역할입니다.

터미널 창에서 localhost 링크를 클릭하면 Astro 웹사이트의 실시간 미리보기를 확인할 수 있습니다!

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

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

:::tip[Astro 개발 서버 사용하기]

Astro 서버가 개발 모드에서 실행되는 동안에는 터미널 창에서 명령을 실행할 수 없습니다. 대신 사이트의 실시간 미리보기에 대한 피드백을 제공합니다.

터미널에서 Ctrl + C 키를 입력하여 언제든지 개발 서버를 종료하고 명령 프롬프트로 돌아갈 수 있습니다.

때로는 개발 서버가 의도치않게 종료되는 경우도 있습니다. 이로 인해 실시간 미리보기가 작동하지 않는다면 터미널에서 npm run dev를 입력하여 개발 서버를 다시 실행하세요.:::