개발 및 빌드

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 구성 타입 검사, 자동 완성 등의 옵션을 구성하세요.

Astro 기능 살펴보기

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

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

view transitions 추가 자연스러운 페이지 전환과 애니메이션을 생성하세요.

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

입문 튜토리얼 시작하기

입문 튜토리얼에서 빈 페이지 하나로 시작하여 완전히 작동하는 Astro 블로그를 만들어보세요.

이는 Astro가 어떻게 작동하는지 살펴보고 페이지, 레이아웃, 컴포넌트, 라우팅, 아일랜드 등의 기본 사항을 안내받을 수 있는 좋은 방법입니다. 또한 웹 개발 개념에 익숙하지 않은 초보자를 위한 선택적 학습 자료도 포함되어 있어, 컴퓨터에 필요한 애플리케이션 설치, GitHub 계정 생성, 사이트 배포를 안내해드립니다.

기여하기 커뮤니티 Sponsor