시작 전 확인: 1단계 - 설정

이제 무엇을 만들지 알았으니, 필요한 모든 도구를 설정할 차례입니다!

이 단계에서는 개발 환경을 설정하고 Netlify에 배포하는 방법을 안내합니다. 이미 환경과 작업 흐름에 익숙하다면 2단계로 건너뛰세요.

온라인 코드 편집기에서 이 튜토리얼을 완료하고 싶나요? 아래 지침에 따라 Google IDX에서 시작하세요.

Google IDX 사용하기: 이 안내를 따른 후, 바로 2단계로 이동하세요!

IDX 설정

IDX의 새 작업 공간에서 “Empty Project” 템플릿을 실행하기 위해 외부 링크를 따라가세요.
아직 로그인하지 않았다면 안내에 따라 Google 계정에 로그인하세요.
기본 이름인 “Empty Project”에서 변경하고 싶다면 프로젝트 이름을 입력하세요. Create를 클릭하세요.
작업 공간이 생성될 때까지 기다리세요. 30 ~ 60초 정도 걸릴 수 있습니다. 모든 과정이 순조롭게 진행되면 온라인 코드 편집기에 Astro 프로젝트가 로드된 것을 확인할 수 있습니다.
IDX가 두 스크립트를 실행할 때까지 기다리세요. 하나는 Astro를 설치하는 스크립트이며, 다른 하나는 개발 서버를 시작하는 스크립트입니다. Astro가 설치되기 전에 작업 공간이 로드되면 “couldn’t find Astro”라는 메시지가 잠시 나타날 수 있습니다. 이 메시지가 자동으로 사라지지 않으면 무시하고 취소해도 됩니다.

코드 변경

모든 과정이 순조롭게 진행되면 웹사이트의 실시간 미리보기와 src/pages/index.astro 파일의 코드가 분할 화면으로 함께 실행되는 것을 확인할 수 있습니다. “첫 번째 Astro 코드 작성하기”의 안내에 따라 이 파일을 수정해 보세요.

Github 리포지토리 생성

세로 메뉴 바에서 “Source Control” 탐색 항목으로 이동하거나, CTRL + SHIFT + G 키를 눌러 메뉴를 여세요.
GitHub에 게시하기 위한 옵션을 선택하세요. 그러면 GitHub 계정에 새 리포지토리가 생성됩니다.
안내에 따라 GitHub 계정에 로그인하세요.
로그인 후, IDX 탭으로 돌아가 새 리포지토리의 이름을 지정하고, 비공개 또는 공개 리포지토리 여부를 선택할 수 있습니다. 이 튜토리얼에서는 원하는 이름과 유형의 리포지토리를 선택할 수 있습니다.
IDX는 첫 커밋을 생성하고, 프로젝트를 새 Github 리포지토리에 게시할 것입니다.
앞으로는 GitHub에 커밋할 변경 사항이 있을 때마다 Source Control 탐색 아이콘에 숫자가 표시됩니다. 이 숫자는 마지막 커밋 이후 변경된 파일의 개수입니다. 이 탭으로 이동하여 커밋과 게시를 수행하면 커밋 메시지를 입력하고 리포지토리를 업데이트할 수 있습니다.

사이트 배포

개발하는 동안 Netlify에 배포하여 실시간 게시 버전의 사이트를 확인하고 싶다면, 1단계의 사이트를 웹에 배포하기를 확인하세요.

그렇지 않다면, 2단계로 건너뛰어 Astro를 사용해 빌드를 시작하세요.

어떻게 진행되나요?

이 단계에서는 GitHub에 온라인으로 저장되고 Netlify에 연결되는 새 프로젝트를 만듭니다.

코드를 작성하면서 주기적으로 변경 사항을 GitHub에 커밋하게 됩니다. Netlify는 GitHub 리포지토리의 파일을 사용하여 웹사이트를 빌드한 후, 누구나 볼 수 있는 고유한 주소로 인터넷에 게시합니다.

GitHub에 변경 사항을 커밋할 때마다 Netlify로 알림이 전송됩니다. 그러면 Netlify는 해당 변경 사항을 반영하기 위해 게시된 사이트를 다시 빌드하고 게시합니다.