[파란색 티셔츠를 입은 개발자가 집에 마이크와 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, 노드, Docker 등이 있으므로 Java, Rust 및 Go 및 C++와 같은 도구가 있습니다.
그러나 기본 이미지에 착륙한 것을 볼 수 있습니다. Codespaces의 좋은 점은 사용자뿐만 아니라 이 리포지토리에서 함께 제공되는 다른 모든 사용자를 위해 설정을 완전히 사용자 지정할 수 있다는 것입니다. 따라서 사용자 고유의 이미지 또는 Dockerfile 또는 Docker Compose를 사용할 수 있는 "config-as-code" 설정을 사용할 수 있습니다.
따라서 앱의 경우 실제로 계속 진행하여 시작하겠습니다. 여기서 실행 npm start 하겠습니다. 그러면 앱이 포트 3000에서 실행 중이라는 것을 알 수 있으며 브라우저에서 열고 앱이 완전히 실행되고 있는 전달된 포트에 안전하게 연결할 수 있습니다.
[전달된 포트에 대한 팝업이 표시됩니다. 팝업에서 개발자는 "브라우저에서 열기"라는 레이블이 지정된 단추를 클릭합니다. "Haikus for Mona"라는 웹 페이지를 보여 주는 새 브라우저 탭이 열립니다. 웹 페이지에서 만화 이미지는 보라색 우산을 들고 웅덩이를 건너 뛰는 웃는 모나 옥토캣을 보여줍니다. 이미지 아래에는 "시애틀에 비가 내립니다. 우산을 잊지 마세요, 또는 우울 할 것이다."]
개발자: 코드스페이스에서 연결된 내 노드 앱이 실행 중이라는 것을 알 수 있습니다. 그리고 Codespaces에서 설정하는 데 약 60초가 걸렸습니다.
[개발자는 촉수로 레코드 플레이어를 찌르는 모나의 이미지로 스크롤합니다.]
개발자: 따라서 완전히 사용자 지정된 이 리포지토리를 실제로 모든 리포지토리에 대한 설정 시간을 단축할 수 있다고 상상할 수 있습니다.
GitHub Codespaces를 간단히 살펴봅니다.
대본의 끝입니다. GitHub Codespaces에 대한 자세한 내용은 GitHub Codespaces 설명서를 참조하세요.