[파란색 티셔츠를 입은 개발자가 집에서 마이크와 GitHub의 Octocat 로고로 장식된 팝 쉴드 뒤에 앉아 있습니다. 이 개발자는 오른쪽 위 모서리에 있는 웹캠에 계속 표시하면서 화면을 공유합니다. 화면에서 "js-project"라는 GitHub 리포지토리를 보고 있습니다.]
개발자: 이제 GitHub Codespaces에서 JavaScript 프로젝트를 실행하겠습니다.
[개발자가 리포지토리 페이지의 파일 목록 위에서 "코드" 단추를 선택하여 드롭다운 메뉴를 엽니다. "Codespaces로 열기"를 클릭한 다음 "새 codespace"를 클릭합니다.]
개발자: codespace를 만드는 동안 "codespace란 무엇인가요?" 라는 궁금증이 들 수 있습니다.
[브라우저에서 codespace가 로드됩니다. 흰색 배경에 GitHub의 Octocat 로고와 VS Code 로고 아래에 "codespace 준비" 텍스트가 표시됩니다.]
개발자: codespace는 우리가 개발 환경에서 수행하는 데 익숙한 모든 작업을 실행, 테스트, 디버그, 푸시할 수 있는 인스턴트 클라우드 개발자 환경이지만, 로컬에서 수행하는 데 사용되는 컴퓨터 설정은 없습니다.
[codespace가 브라우저의 VS Code 웹 편집기에서 열리고 어두운 테마로 실행됩니다. 리포지토리의 디렉터리와 파일이 왼쪽 사이드바에 표시됩니다. 통합 터미널에 "Codespaces 시작"이라는 메시지가 표시되고 목록에는 런타임 및 도구가 포함되어 있습니다.]
개발자: 이 codespace를 만들 때, 이미 설정된 컴퓨터에 배치되고 Python, Node, Docker 등이 이미 설치되어 있으므로 Java, Rust 및 Go 및 C++와 같은 도구가 있습니다.
하지만 기본 이미지가 표시되는 것을 볼 수 있습니다. Codespaces의 장점은 사용자뿐만 아니라 이 리포지토리에서 함께 제공되는 다른 모든 사용자를 위해 설정을 완전히 사용자 지정할 수 있다는 것입니다. 따라서 사용자 고유의 이미지, Dockerfile 또는 Docker Compose를 지원하는 "config-as-code" 설정을 사용할 수 있습니다.
우리 앱의 경우 바로 시작하면 됩니다. 여기서 npm start를 실행하겠습니다. 그러면 앱이 포트 3000에서 실행 중이라는 것을 알 수 있으며, 브라우저에서 열 수 있고, 앱이 완벽하게 실행 중인 전달된 포트에 안전하게 연결할 수 있습니다.
[전달된 포트에 대한 팝업이 표시됩니다. 팝업에서 개발자는 "브라우저에서 열기"라는 레이블이 있는 단추를 클릭합니다. "Haikus for Mona"라는 웹 페이지를 보여 주는 새 브라우저 탭이 열립니다. 이 웹 페이지에 보라색 우산으로 웅덩이를 건너 뛰는 웃는 Mona the Octocat을 보여 주는 카툰 이미지가 표시됩니다. 이 이미지 아래에는 "Rain in Seattle. Don't forget an umbrella, or it will be gloom."라는 시가 표시됩니다.]
개발자: codespace에 연결된 Node 앱이 작동 및 실행 중이라는 것을 알 수 있습니다. 그리고 Codespaces에서 설정하는 데 약 60초가 걸렸습니다.
[개발자가 촉수로 레코드 플레이어를 찌르는 Mona의 이미지로 스크롤합니다.]
개발자: 따라서 완전히 사용자 지정되어 모든 리포지토리의 설정 시간을 줄여 줄 것임을 알 수 있습니다.
GitHub Codespaces를 간단히 살펴보았습니다.
대화록의 끝. GitHub Codespaces에 대한 자세한 내용은 GitHub Codespaces 설명서를 참조하세요.