첫 번째 Astro 프로젝트 만들기
이번에 배울 내용
create astro
설정 마법사를 실행하여 새 Astro 프로젝트 생성하기- 개발(dev) 모드에서 Astro 서버 시작하기
- 브라우저에서 웹사이트를 실시간으로 확인하기
Astro 설정 마법사 실행하기
섹션 제목: Astro 설정 마법사 실행하기새 Astro 사이트를 만드는 데 가장 권장되는 방법은 create astro
설정 마법사를 사용하는 것입니다.
-
터미널의 명령줄에서 선호하는 패키지 관리자를 사용하여 다음 명령을 실행하세요.
터미널 창 # npm으로 새 프로젝트를 만듭니다npm create astro@latest터미널 창 # pnpm으로 새 프로젝트를 만듭니다pnpm create astro@latest터미널 창 # yarn으로 새 프로젝트를 만듭니다yarn create astro -
create-astro
를 설치하려면y
를 입력하세요. -
프로젝트를 어디에 만들지 묻는 메시지가 표시되면 폴더 이름을 입력하여 새 프로젝트 디렉터리를 만드세요. 예:
./tutorial
새 Astro 프로젝트는 완전히 비어 있는 폴더에만 만들 수 있으므로 아직 존재하지 않는 폴더 이름을 선택하세요!
-
선택할 수 있는 몇 가지 시작 템플릿 목록이 표시됩니다. 방향키 (위, 아래)를 사용하여 minimal (empty) 템플릿으로 이동하여 리턴키 (엔터키)를 눌러 템플릿을 선택하세요.
-
의존성을 설치할지 묻는 메시지가 표시되면
y
를 입력하세요. -
새로운 git 리포지토리를 초기화할지 묻는 메시지가 표시되면
y
를 입력하세요.
설치 마법사가 완료되면 더 이상 터미널이 필요하지 않습니다. 이제 VS Code를 실행하여 과정을 계속 진행할 수 있습니다.
VS Code에서 프로젝트 실행하기
섹션 제목: VS Code에서 프로젝트 실행하기-
VS Code를 실행하세요. 그러면 폴더를 열라는 메시지가 표시됩니다. 설정 마법사에서 생성한 폴더를 선택하세요.
-
이 과정이 Astro 프로젝트를 처음으로 실행하는 것이라면, 추천 확장 프로그램을 설치할지 물어보는 알림이 표시될 것입니다. 이 알림을 클릭하여 추천 확장 프로그램 목록을 확인하고, Astro 언어 지원 확장 프로그램을 선택하세요. 이 확장 프로그램은 Astro 코드를 위한 구문 강조와 자동 완성 기능을 제공할 것입니다.
-
터미널에 다음과 같은 명령 프롬프트가 나타나는지 확인하세요.
터미널 창 user@machine:~/tutorial$키보드에서 Ctrl + J (macOS의 경우 Cmd ⌘ + J) 키를 눌러 터미널을 열고 닫을 수 있습니다.
이제 이 튜토리얼의 다음 단계부터는 컴퓨터의 Terminal 앱 대신 내장된 터미널을 사용할 수 있습니다.
개발 모드로 Astro 실행하기
섹션 제목: 개발 모드로 Astro 실행하기개발하는 동안 프로젝트 파일들이 웹사이트에서 어떻게 보이는지 확인하려면, Astro를 개발(dev) 모드로 실행해야 합니다.
개발 서버 실행하기
섹션 제목: 개발 서버 실행하기-
VS Code의 터미널에 다음 명령을 입력하여 Astro 개발 서버를 실행하세요.
터미널 창 npm run dev터미널 창 pnpm run dev터미널 창 yarn run dev이제 Astro가 개발 모드에서 실행 중이라는 메시지가 터미널에 표시됩니다. 🚀
웹사이트 미리보기
섹션 제목: 웹사이트 미리보기프로젝트 파일에는 Astro 웹사이트를 나타내는 데 필요한 모든 코드가 포함되어 있습니다. 하지만 코드를 웹 페이지로 나타내는 것은 브라우저의 역할입니다.
-
터미널 창에서
localhost
링크를 클릭하면 Astro 웹사이트의 실시간 미리보기를 확인할 수 있습니다!(
4321
포트를 사용할 수 있다면, Astro는 기본적으로http://localhost:4321
을 사용합니다.)Astro의 “Empty Project” 시작 웹사이트는 브라우저 미리보기에서 다음과 같이 보여야 합니다.
Astro 서버가 개발 모드에서 실행되는 동안에는 터미널 창에서 명령을 실행할 수 없습니다. 대신 사이트의 실시간 미리보기에 대한 피드백을 제공합니다.
터미널에서 Ctrl + C 키를 입력하여 언제든지 개발 서버를 종료하고 명령 프롬프트로 돌아갈 수 있습니다.
때로는 개발 서버가 의도치않게 종료되는 경우도 있습니다. 이로 인해 실시간 미리보기가 작동하지 않는다면 터미널에서 npm run dev
를 입력하여 개발 서버를 다시 실행하세요.
체크리스트
섹션 제목: 체크리스트리소스
섹션 제목: 리소스-
Visual Studio Code 시작하기 외부 링크 — VS Code를 설치하고, 설정하고 사용하는 방법을 다루는 동영상 튜토리얼