개발 및 빌드

Astro 프로젝트가 준비되었다면, 이제 Astro를 사용하여 빌드할 준비가 된 것입니다! 🚀

프로젝트 편집

프로젝트를 변경하려면 코드 편집기에서 프로젝트 폴더를 여세요. 개발 서버를 실행하는 개발 모드에서 작업하면 코드를 편집할 때 사이트 업데이트를 확인할 수 있습니다.

TypeScript를 구성하거나 공식 Astro 편집기 확장 프로그램을 설치하는 등 개발 환경의 측면을 사용자 정의할 수도 있습니다.

Astro 개발 서버 시작

Astro에는 프로젝트 개발에 필요한 모든 기능을 갖춘 내장 개발 서버가 함께 제공됩니다. astro dev CLI 명령은 로컬 개발 서버를 시작하여 처음으로 새로운 웹사이트가 작동하는 모습을 볼 수 있도록 합니다.

모든 스타터 템플릿에는 astro dev를 실행하는 사전 구성된 스크립트가 함께 제공됩니다. 프로젝트 디렉터리로 이동한 후 원하는 패키지 관리자를 사용하여 이 명령을 실행하고 Astro 개발 서버를 시작하세요.

npm run dev

pnpm run dev

yarn run dev

모든 것이 잘 진행되면 Astro는 이제 http://localhost:4321/에서 프로젝트를 제공합니다. 브라우저에서 해당 링크를 방문하여 새 사이트를 확인하세요!

개발 모드에서 작업

Astro는 src/ 디렉터리의 파일 변경을 실시간으로 수신하고, 빌드하는 동안 사이트 미리보기를 업데이트하므로 개발 중 변경 사항이 발생할 때 서버를 다시 시작할 필요가 없습니다. 개발 서버가 실행 중일 때 브라우저에서 항상 최신 버전의 사이트를 볼 수 있습니다.

브라우저에서 사이트를 볼 때 Astro 개발 도구 모음에 접근할 수 있습니다. 빌드하는 동안 아일랜드를 검사하고 접근성 문제를 발견하는 등 다양한 작업을 수행하는 데 도움이 됩니다.

개발 서버를 시작한 후 브라우저에서 프로젝트를 열 수 없는 경우, dev 명령을 실행한 터미널로 돌아가서 표시된 메시지를 확인하세요. 오류가 발생했는지 또는 프로젝트가 http://localhost:4321/ 이외의 다른 URL에서 제공되는지 알려줍니다.

사이트 빌드 및 미리보기

빌드 시 생성될 사이트 버전을 확인하려면 개발 서버를 종료하고 (Ctrl + C) 터미널에서 패키지 관리자에 적합한 빌드 명령을 실행하세요.

npm run build

pnpm build

yarn run build

Astro는 배포 준비된 버전의 사이트를 별도의 폴더 (dist/가 기본값)에 빌드하며 터미널에서 진행 상황을 확인할 수 있습니다. 이렇게 하면 프로덕션에 배포하기 전에 프로젝트의 빌드 오류를 알 수 있습니다. TypeScript가 strict 또는 strictest로 구성된 경우 build 스크립트는 프로젝트의 타입 오류도 확인합니다.

빌드가 완료되면 터미널에서 적절한 preview 명령 (예: npm run preview)을 실행하여 동일한 브라우저 미리보기 창에서 로컬로 빌드된 버전의 사이트를 볼 수 있습니다.

빌드 명령이 마지막으로 실행되었을 때의 코드 상태를 미리 보여줍니다. 이는 웹에 배포되었을 때 사이트가 어떻게 보이는지 미리 보여주기 위한 것입니다. 빌드 후 코드의 변경 사항은 빌드 명령을 다시 실행할 때까지 사이트를 미리 보는 동안 반영되지 않습니다.

(Ctrl + C)를 사용하여 미리보기를 종료하고 다른 터미널 명령을 실행하세요. 예를 들어, 편집할 때마다 업데이트되어 코드 변경 사항의 실시간 미리보기를 보여주는 개발 모드로 돌아가려면 개발 서버를 다시 시작하세요.

Astro를 사용하여 빌드할 때 사용할 Astro CLI 및 터미널 명령에 대해 자세히 알아보세요.

다음 단계

성공! 이제 Astro로 빌드를 시작할 준비가 되었습니다! 🥳

다음은 다음에 탐색해 보는 것을 추천하는 몇 가지 사항입니다. 어떤 순서로든 읽을 수 있습니다. 잠시 문서를 떠나 새로운 Astro 프로젝트 코드베이스에서 자유롭게 작업하다가 문제가 발생하거나 질문이 생길 때 언제든지 다시 돌아올 수도 있습니다.

개발 환경 구성

개발 환경을 사용자 정의하려면 아래 가이드를 살펴보세요.

편집기 설정 Astro 개발자 경험을 향상시키고 새로운 기능을 잠금 해제하도록 코드 편집기를 사용자 정의하세요.

개발 도구 모음 개발 도구 모음의 유용한 기능을 살펴보세요.

TypeScript 구성 타입 검사, IntelliSense 등의 옵션을 구성하세요.

Astro 기능 살펴보기

코드베이스 이해 프로젝트 구조 가이드에서 Astro의 파일 구조에 대해 알아보세요.

콘텐츠 컬렉션 생성 프런트매터 유효성 검사 및 자동 타입 안전을 통해 새 사이트에 콘텐츠를 추가하세요.

뷰 전환 추가 매끄러운 페이지 전환 및 애니메이션을 만드세요.

아일랜드에 대해 알아보기 Astro의 아일랜드 아키텍처에 대해 알아보세요.

입문 튜토리얼

입문 튜토리얼에서 빈 페이지 하나부터 시작하여 완전한 기능을 갖춘 Astro 블로그를 만들어 보세요.

이 튜토리얼은 Astro가 어떻게 작동하는지 보여주는 좋은 방법이며 페이지, 레이아웃, 컴포넌트, 라우팅, 아일랜드 등의 기본 사항을 안내합니다. 또한 웹 개발 개념에 익숙하지 않은 사람들을 위한 초보자 친화적인 선택적 유닛도 포함되어 있으며, 컴퓨터에 필요한 애플리케이션 설치, GitHub 계정 생성 및 사이트 배포 과정을 안내합니다.

기여하기 커뮤니티 후원하기