컨텐츠로 건너뛰기

첫 번째 Astro 프로젝트 만들기

요구 사항

  • create astro 설정 마법사를 실행하여 새로운 Astro 프로젝트를 생성하세요.
  • 개발 (dev) 모드에서 Astro 서버를 시작하세요.
  • 브라우저에서 웹사이트의 실시간 미리보기를 확인하세요.

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

  1. 터미널의 명령줄에서 원하는 패키지 관리자를 사용하여 다음 명령을 실행합니다.

    Terminal window
    # npm으로 새 프로젝트를 만듭니다
    npm create astro@latest
  2. create-astro를 설치하려면 y를 입력하세요.

  3. 프롬프트가 “Where would you like to create your new project?” 라고 묻는다면 프로젝트의 새로운 디렉터리를 생성하기 위해 폴더의 이름을 입력하세요. (예: ./tutorial)

  4. 선택할 수 있는 시작 템플릿의 짧은 목록이 표시됩니다. 화살표 키 (위쪽 및 아래)를 사용하여 “Empty” 템플릿으로 이동한 다음 return (enter) 키를 눌러 선택 사항을 제출합니다.

  5. “Would you like to install dependencies?” 라는 메시지가 표시되면 y를 입력하세요.

  6. TypeScript를 작성할 계획인지 묻는 메시지가 나타나면 n을 입력하세요.

  7. “Would you like to initialize a new git repository?” 라는 메시지가 표시되면 y를 입력하세요.

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

VS Code에서 프로젝트 실행

섹션 제목: VS Code에서 프로젝트 실행
  1. VS Code를 실행합니다. 폴더를 열라는 메시지가 표시됩니다. 설정 마법사로 생성한 폴더를 선택합니다.

  2. Astro 프로젝트를 처음 여는 경우 권장 확장 프로그램을 설치할 것인지 묻는 알림이 표시됩니다. 클릭하여 권장 확장을 확인하고 Astro 언어 지원 확장을 선택하세요. 이는 Astro 코드에 대한 구문 강조 및 자동 완성 기능을 제공합니다.

  3. 터미널이 표시되고 다음과 같은 명령 프롬프트가 표시되는지 확인합니다.

    Terminal window
    user@machine:~/tutorial$

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

Astro를 개발 모드로 실행

섹션 제목: Astro를 개발 모드로 실행

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

  1. VS Code 터미널에 다음 명령을 입력하여 Astro 개발 서버를 시작하는 명령을 실행하세요.

    Terminal window
    npm run dev

    이제 Astro가 개발 모드에서 실행되고 있다는 확인이 터미널에 표시됩니다. 🚀

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

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

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

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

    상단에 Astro라는 단어가 있는 빈 흰색 페이지.