체크인: 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에 커밋할 변경사항이 있을 때마다 소스 제어 탐색 아이콘에 숫자가 표시됩니다. 이는 마지막 커밋 이후 변경된 파일의 수입니다. 이 탭으로 이동하여 두 단계(커밋과 게시)를 수행하면 커밋 메시지를 입력하고 저장소를 업데이트할 수 있습니다.

사이트 배포

작업하는 동안 사이트의 라이브 게시 버전을 Netlify에 배포하고 싶다면, 1단원의 웹에 사이트 배포하기를 진행하세요.

그렇지 않다면, Astro로 구축을 시작하기 위해 2단원으로 건너뛰세요!

어떻게 진행되나요?

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

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

GitHub에 변경 사항을 커밋할 때마다 Netlify로 알림이 전송됩니다. 그런 다음 Netlify는 해당 변경 사항을 반영하기 위해 라이브 사이트를 자동으로 재빌드하고 다시 게시합니다.