# GitHub Codespaces 빠른 시작

GitHub Codespaces를 빠르게 시작해 보세요.

## 소개

이 가이드에서는 템플릿 리포지토리에서 codespace를 만들고 codespace 내에서 사용할 수 있는 몇 가지 필수 기능을 탐색합니다. 처음에는 Visual Studio Code의 기본 편집기인 GitHub Codespaces의 브라우저 버전에서 작업합니다. 이 빠른 시작을 시도한 후 다른 편집기에서 Codespaces을(를) 사용할 수 있으며 기본 편집기를 변경할 수 있습니다. 링크는 이 가이드의 끝에 제공됩니다.

이 빠른 시작에서는 codespace를 만들고, 전달된 포트에 연결하여 실행 중인 응용 프로그램을 보고, codespace를 새 리포지토리에 게시하고, 익스텐션을 사용하여 설정을 사용자 지정하는 방법을 알아봅니다.

GitHub Codespaces의 작동 방식에 대한 자세한 내용은 도우미 가이드 [GitHub Codespaces에 대한 심층 분석](/ko/codespaces/about-codespaces/deep-dive)을(를) 참조하세요.

## Codespace 만들기

1. [github/haikus-for-codespaces](https://github.com/github/haikus-for-codespaces) 템플릿 리포지토리로 이동합니다.
2. **이 템플릿 사용**을 클릭한 다음, **codespace에서 열기**를 클릭합니다.

   !["이 템플릿 사용" 단추와 "codespace에서 열기" 옵션을 표시하도록 확장된 드롭다운 메뉴의 스크린샷.](/assets/images/help/repository/use-this-template-button.png)

## 애플리케이션 실행

Codespace가 만들어지면 템플릿 리포지토리가 자동으로 복제됩니다. 이제 응용 프로그램을 실행하고 브라우저에서 시작할 수 있습니다.

1. 터미널이 사용 가능해지면 `npm run dev` 명령을 입력합니다. 이 예시에서는 Node.js 프로젝트를 사용하며, 이 명령은 샘플 리포지토리에 정의된 웹 응용 프로그램을 시작하는 `package.json` 파일에서 “dev”라는 레이블이 지정된 스크립트를 실행합니다.

   !["npm run dev" 명령이 입력된 VS Code의 터미널 스크린샷](/assets/images/help/codespaces/codespaces-npm-run-dev.png)

   다른 응용 프로그램 유형을 따르는 경우 해당 프로젝트에 해당하는 시작 명령을 입력합니다.

2. 응용 프로그램이 시작되면 codespace는 응용 프로그램이 실행 중인 포트를 인식하고 전달되었음을 알리는 프롬프트를 표시합니다.

   !["포트 3000에서 실행되는 응용 프로그램을 사용할 수 있습니다."라는 팝업 메시지의 스크린샷 아래에는 "브라우저에서 열기"라는 레이블이 지정된 녹색 단추가 있습니다.](/assets/images/help/codespaces/quickstart-port-toast.png)

3. **브라우저에서 열기**를 클릭하여 새 탭에서 실행 중인 응용 프로그램을 봅니다.

## 응용 프로그램 편집 및 변경 내용 보기

1. Codespace로 다시 전환하고 파일 탐색기에서 `haikus.json` 파일을 클릭하여 엽니다.

2. 첫 번째 haiku의 `text` 필드를 편집하여 고유한 haiku로 응용 프로그램을 개인 설정합니다.

3. 브라우저에서 실행 중인 애플리케이션 탭으로 돌아가서 새로 고침하여 변경 내용을 확인합니다.

   <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-light-bulb" aria-label="light-bulb" role="img"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg> 브라우저 탭을 닫은 경우, VS Code에서 Ports 탭을 클릭하고 실행 중인 포트의 **Local Address** 값을 마우스로 가리킨 다음, **Open in Browser** 아이콘을 클릭합니다.

   !["포트" 패널의 스크린샷. 브라우저에서 전달된 포트를 여는 "포트" 탭과 지구본 아이콘이 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/quickstart-forward-port.png)

## 변경 내용 커밋 및 푸시

이제 몇 가지 변경 내용을 적용했으므로 통합 터미널 또는 원본 보기를 사용하여 새 리포지토리에 작업을 게시할 수 있습니다.

1. 작업 표시줄에서 **Source Control**(원본 제어) 보기를 클릭합니다.

   ![소스 제어 단추가 주황색 윤곽선으로 강조 표시된 VS Code 작업 표시줄의 스크린샷.](/assets/images/help/codespaces/source-control-activity-bar-button.png)

2. 변경 내용을 스테이징하려면 `haikus.json` 파일 옆 또는 여러 파일을 변경하고 모두 스테이징하려는 경우 **변경 내용** 옆의 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-plus" aria-label="Stage Changes" role="img"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path></svg>을(를) 클릭합니다.

   !["변경 내용" 항목 오른쪽에 있는 스테이징 단추(더하기 기호)이 진한 주황색 윤곽선으로 강조된 "원본 제어" 사이드바의 스크린샷입니다.](/assets/images/help/codespaces/codespaces-commit-stage.png)

3. 스테이징된 변경 사항을 커밋하려면 변경 내용을 설명하는 커밋 메시지를 입력한 다음 **커밋**을 클릭합니다.

   !["소스 제어" 사이드바의 스크린샷 커밋 메시지인, "Change haiku text and styles" 및 "Commit" 버튼이 주황색 윤곽선으로 강조되어 있습니다.](/assets/images/help/codespaces/vscode-commit-button.png)

4. **브랜치 게시**를 클릭합니다.

   !["브랜치 게시" 단추를 보여주는 "소스 제어" 사이드바의 스크린샷.](/assets/images/help/codespaces/vscode-publish-branch-button.png)

5. "리포지토리 이름" 드롭다운에서 새 리포지토리의 이름을 입력한 다음 **GitHub 개인용 리포지토리에 게시**를 선택하거나 **GitHub 공용 리포지토리에 게시**를 선택합니다.

   ![VS Code의 리포지토리 이름 드롭다운 스크린샷. 개인용 또는 공용 리포지토리에 게시하는 두 가지 옵션이 표시됩니다.](/assets/images/help/codespaces/choose-new-repository.png)

   새 리포지토리의 소유자는 codespace를 만든 GitHub 계정이 됩니다.

6. 편집기의 오른쪽 아래 모서리에 표시되는 팝업에서 **GitHub에서 열기**를 클릭하여 GitHub에서 새 리포지토리를 봅니다. 새로운 리포지토리에서 `haikus.json` 파일을 보고 codespace에서 변경한 내용이 리포지토리에 성공적으로 푸시되었는지 확인합니다.

   !["GitHub에서 열기" 단추를 보여 주는 성공적으로 게시된 리포지토리에 대한 확인 메시지의 스크린샷](/assets/images/help/codespaces/open-on-github.png)

## 확장을 사용하여 개인 설정

브라우저 또는 Visual Studio Code 데스크톱 응용 프로그램을 사용하여 codespace에 연결하는 경우 편집기에서 Visual Studio Code Marketplace에 직접 액세스할 수 있습니다. 이 예시에서는 테마를 변경하는 VS Code 익스텐션을 설치하지만 워크플로에 유용한 익스텐션을 설치할 수 있습니다.

1. 액티비티 바에서 익스텐션 아이콘을 클릭합니다.

   ![액티비티 바의 스크린샷 익스텐션 아이콘은 주황색 윤곽선으로 강조 표시됩니다.](/assets/images/help/codespaces/extensions-activity-bar-icon.png)

2. 검색 창에서 `fairyfloss`를 입력하고 **설치**를 클릭합니다.

   !["Extensions: Marketplace"의 스크린샷 검색 상자에 "fairyfloss"가 표시됩니다. 결과에는 "Install" 단추가 있는 "fairyfloss" 확장이 표시됩니다.](/assets/images/help/codespaces/add-extension.png)

3. 목록에서 `fairyfloss` 테마를 선택하여 선택합니다.

   !["fairyfloss" 테마가 선택된 "색 테마 선택" 드롭다운의 스크린샷](/assets/images/help/codespaces/fairyfloss.png)

### 설정 동기화에 대한 정보

설정 동기화를 사용하도록 설정하여 VS Code의 디바이스 및 인스턴스에서 익스텐션 및 기타 설정을 동기화할 수 있습니다. 동기화된 설정은 클라우드에 캐시됩니다. 설정 동기화가 codespace에서 켜져 있으면 codespace의 설정에 대한 모든 업데이트가 클라우드로 푸시되고 다른 위치에서 클라우드로 푸시하는 모든 업데이트가 codespace로 끌어와집니다. 자세한 내용은 [계정에 대한 GitHub Codespace 개인 설정](/ko/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#settings-sync)을(를) 참조하세요.

## 다음 단계

Codespace 내에서 첫 번째 응용 프로그램을 성공적으로 만들고, 개인화하고, 실행했지만 탐색할 것이 훨씬 더 많습니다. GitHub Codespaces을(를) 사용하여 다음 단계를 수행하는 데 유용한 리소스는 다음과 같습니다.

* [GitHub Codespaces에 대한 심층 분석](/ko/codespaces/about-codespaces/deep-dive): 이 빠른 시작에서는 GitHub Codespaces의 일부 기능을 제공합니다. 심층 분석에서는 기술적인 관점에서 이러한 영역을 살펴봅니다.
* [리포지토리에 개발 컨테이너 구성 추가](/ko/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration): 이 가이드에서는 특정 언어로 GitHub Codespaces을(를) 사용하도록 리포지토리를 설정하는 방법에 대한 정보를 제공합니다.
* [개발 컨테이너 소개](/ko/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers): 이 가이드에서는 프로젝트에 대한 Codespaces의 사용자 지정 구성을 만드는 방법에 대한 세부 정보를 제공합니다.

## 추가 참고 자료

* [조직에 GitHub Codespaces 사용 또는 사용 안 함](/ko/codespaces/managing-codespaces-for-your-organization/enabling-or-disabling-github-codespaces-for-your-organization)
* [Visual Studio Code에서 GitHub Codespaces 사용](/ko/codespaces/developing-in-a-codespace/using-github-codespaces-in-visual-studio-code)
* [GitHub CLI에서 GitHub Codespace 사용](/ko/codespaces/developing-in-a-codespace/using-github-codespaces-with-github-cli)
* [GitHub Codespaces에 대한 기본 편집기 설정](/ko/codespaces/setting-your-user-preferences/setting-your-default-editor-for-github-codespaces).
* [조직에서 GitHub Codespace의 비용 관리](/ko/codespaces/managing-codespaces-for-your-organization/managing-the-cost-of-github-codespaces-in-your-organization)