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