Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

GitHub Codespaces 살펴보기

GitHub은 지난 5월 Satellite 2020 행사에서 GitHub 웹사이트에서 바로 Visual Sutdio Code를 이용해서 개발할 수 있는 Codespaces를 공개했다.

GitHub Codespaces 홈페이지

아직 베타 상태라서 GitHub에서 초대를 보내줘야 사용할 수 있고 아직 정확히 언제 퍼블릭으로 열릴지는 공개되지 않았다.

GitHub Codespaces 초대메일

지난달에 베타 초대를 받아서 사용할 수 있게 되었다. 베타라서 지금은 과금이 되지 않지만 문서에 가격이 나와 있다.

  • Basic (2 cores, 4GB RAM, 32 GB SSD) - $0.085
  • Standard (4 cores, 8 GB RAM, 32 GB SSD) - $0.169
  • Premium (8 cores, 16 GB RAM, 32 GB SSD) - $0.339

Premium을 쓴다고 하면 30일 동안 내내 사용하면 244.08 달러가 나오고 Basic이라면 61.2 달러 정도가 나온다. 하지만 과금은 실제로 Codespace를 사용한 시간만 과금하고 사용하지 않는 상태도 30분이 지나면 자동으로 멈추므로 실제 과금은 훨씬 적을 것으로 보인다. Premium으로 하루 8시간 20일 정도를 사용한다고 하면 54.24 달러 정도(Basic이면 13.6달러)를 예상할 수 있다. 싸진 않지만, 업무에 주로 쓴다면 지불할 정도는 된다고 생각한다.

나는 VS Code도 거의 안 쓰고 JetBrains의 개발도구를 주로 쓰는 편이고 코딩을 로컬이 아닌 웹상에서 할 생각은 전혀 없지만, 베타를 받은 김에 좀 살펴봤다. Figma 덕에 디자인 쪽도 웹상에서 작업하는 쪽으로 옮겨가고 있고 개발도 그런 흐름으로 흘러갈 것으로 보인다.

Codespace 열기

저장소의 코드스페이스 생성 메뉴

저장소에서 "Code" 버튼을 누르면 "Open with Codespaces"라는 메뉴가 나오고 여기서 코드 스페이스로 진입할 수 있다. GitHub 페이지 상단의 "Codespaces" 메뉴에서도 저장소와 브랜치를 선택해서 코드스페이스를 생성할 수 있다.

GitHub 상단 메뉴의 코드스페이스 생성 메뉴

"Open with Codespaces"를 누르면 이미 만들어 놓은 코드스페이스가 없으므로 새로 만들어야 한다고 나온다.

No active codespaces 화면

이미 해당 저장소에서 코드스페이스를 띄워 놨다면 아래처럼 이전에 열어놓은 스페이스 정보가 나와서 바로 띄울 수도 있다.

이미 생성된 코드스페이지가 목록에 나온 화면

"New codespace"를 누르면 화면이 바뀌면서 서버를 불러오고 컨테이너를 띄우면서 환경을 준비한다. 1~3분 정도면 뜨는 것 같은데 아직 베타라 그런지 그것보다 더 오래 걸리는 경우도 있다.

코드스페이스 환경을 준비하면서 컨테이너 등의 로그가 나온다

주소는 https://outsideris-citizen-6g63.github.dev/ 같은 주소로 연결되고 로딩이 완료되면 다음과 같이 익숙한 VS Code 화면이 나오고 로고에서 알 수 있듯이 실제로도 VS Code임을 알 수 있다. VS Code 공지를 보면 VS Code 녹색 아이콘은 Insiders 버전임을 알 수 있는데 현재 Codespaces에 적용된 버전은 Insiders 버전이다. 설정에 가면 Stable 버전으로 전환할 수 있다.

웹브라우저에서 열린 코드스페이스 에디터


Codespace 기능

일단 테스트로 파일을 열고 수정할 때는 코딩할 때 무리 없을 정도로 괜찮은 속도를 보여준다. 물론 테스트라 업무로 몇 시간씩 사용하면서 괜찮을지는 다른 이야기일 수 있다. 레퍼런스를 찾아가거나 정보를 보여주는 것도 VS Code와 마찬가지로 잘 돌아가고 이질감은 거의 느껴지지 않는다. 당연히 설정에서 테마도 변경할 수 있다. 설정에 "Settings Sync is On"가 있어서 테마 등 자신에게 맞게 설정한 걸 다른 코드스페이스에 자동으로 적용해 주어서 웹상이지만 프로젝트가 달라도 하나의 IDE로 개발하는 경험을 가질 수 있다.

코드스페이스를 다크 테마로 변경

현재 최신 버전의 VS Code와 비교해 보면 메뉴나 화면 구성이 거의 똑같은 것을 알 수 있다.

최신버전의 VS Code와 메뉴를 비교해 보면 3개 외에는 같다

이 모든 기능을 다 살펴보는 것은 글도 VS Code를 설명하는 것과 다름없기 때문에 VS Code에는 없는 부분만 설명하려고 한다. 이 추가 기능들도 일부는 이미 VS Code에 있는 익스텐션일 것 같지만 VS COde로 개발을 하지 않아서 정확히는 모르겠다.

Remote Explorer

이 메뉴는 Codespace의 환경 정보를 보여준다.

Remote Explorer 메뉴

이미 생성해 놓은 코드스페이스 정보를 볼 수 있고 두 번째 칸에서는 현재 코드스페이스의 상태가 나온다. 이 메뉴에서 코드스페이스의 연결을 끊거나 하는 것도 가능하다.

터미널에서 실행한 서버의 포트가 Remote Explorer에서 포워디드 포트로 등록된다

"Forwarded Ports" 부분은 코드스페이스 개발하면 서버를 띄우거나 하고 접속해 보고해 봐야 하기 때문에 이러한 포트 포워딩 정보가 나오는 부분이다. 위처럼 터미널에서 프로젝트의 서버를 띄우면 로그 메시지를 보고 URL이 있으면 알아서 포워딩해준 화면이다. 포트 포워딩이 추가되면서 "Forwarded Ports" 부분에 포트 정보가 추가된 것을 볼 수 있다.

여기서는 http://localhost:3000를 탐지해서 포트 포워딩을 추가한 것인데 브라우저에서 열기를 누르면 아래와 같이 코드스페이스 내에서 띄운 서버가 https://3ac9ac26-8d0f-4eca-bec9-d07d7073b248-3000.apps.codespaces.githubusercontent.com/ 같은 GitHub 도메인을 통해서 연결된다. 터미널의 로그를 클릭해서도 바로 이러한 포워딩된 주소로 이동할 수 있다.

포워디드 포트로 연결된 페이지를 브라우저에서 확인


GitHub

Pull Reqeust 아이콘처럼 생긴 메뉴는 GitHub 메뉴인데 코드 스페이스 내에서 열린 Pull Reqeust나 Issue 목록을 볼 수 있다.

GitHub 메뉴에 나온 Pull Reqeust와 issue

Pull Reqeust의 올라온 파일 변경 내용을 보거나 체크아웃해서 소스를 살펴볼 수 있다.

GitHub 메뉴의 Pull Reqeust의 서브 메뉴

Issue에서는 이슈 내용을 열어보거나 해당 이슈를 작업하기 위해서 브랜치를 따서 시작하는 것 등을 할 수 있다.

GitHub 메뉴의 Issue의 서브 메뉴

물론 여기서 새로운 이슈나 Pull Request를 만들어서 올릴 수도 있다.

Live Share

Live Share는 온라인으로 다른 사람과 같이 코딩할 수 있는 기능이고 원래 VS Code에서 협업을 위해 지원하는 부분이다.

Live Share 메뉴

이 기능은 따로 해보진 않았다.


VS Code가 인기를 끌고 점점 발전에 가면서 VS Code도 결국은 웹 기반이라서 이런 식의 확장을 어느 정도 예상한 부분이었고 Microsoft가 GitHub을 인수하면서 훨씬 자연스럽게(혹은 강력하게) 개발자에게 다가왔다고 생각한다. 제대로 느끼려면 코드스페이스를 메인으로 개발을 좀 해봐야 할 것 같은데 테스트 삼아 만져본 느낌은 상당히 괜찮았다. 이미 Visual Studio Codespaces가 있는 것은 알고 있었지만, GitHub에 통합되니 확실히 느낌이 다르다. 근데 기능 테스트하느라 이것저것 하다 보면 난 Codespace에 열어놓은 파일을 닫을 의도로 Command + w를 눌렀지만, 실수로 Chrome 탭이 닫혀서 자꾸 놀라게 된다.

2020/09/19 22:03 2020/09/19 22:03
Response : No Trackback , No Comment

Comments

기술 뉴스 #158 : 20-09-15

웹개발 관련

  • RFC8890: The Internet is for End Users : IETF HTTP와 QUIC 워킹그룹의 공동 의장인 Mark Nottingham이 작성한 RFC 8890 The Internet is for End에 대해 쓴 글이다. IETF가 기술 문서를 작성하고 그 구현은 각 벤더나 정부에 따라 달라지기 때문에 IETF의 일이 기술에만 관련 있고 정치적인 부분과는 상관없다고 생각하는 경향이 있지만 실제로 사용자에게 영향을 주기 때문에 인터넷이 어때야 하는지, 또 최종 사용자에게 어떤 영향을 줄지를 고려해서 표준을 만들 때 고려해야 한다고 하고 있다. 글이 꽤 길지만 읽어볼 가치가 있는 글이라고 생각하고 이 글을 읽고 간단히 정리한 RFC 8890: 인터넷은 사용자의 것를 읽어보는 것도 좋다.(영어)
  • 11 Micro Frontends Frameworks You Should Know : 마이크로 프론트엔드 프레임워크를 소개하는 글로 기술적으로 깊게 살펴보는 것은 아니고 간단한 컨셉을 소개한다. 어떤 도구가 있는지 파악하는 용도로 가볍게 읽어볼 만 하다.(영어)
  • 2020년과 이후 JavaScript의 동향 - WebAssembly : WebAssembly가 무엇이고 왜 JavaScript보다 빠른지를 설명하고 각 브라우저의 WASM 지원 상황 및 Bytecode Alliance라는 파트너십 연합을 설립해서 생태계를 개선하고 있는 등 WASM 관련 변화의 흐름을 이해하기 쉽게 정리되어 있다.(한국어)
  • next.js를 이용해 레거시 프로젝트를 점진적으로 개선해나가기 : 기존 Django로 운영되던 서비스를 프론트엔드팀이 유지 보수하기 위해 프런트 영역을 분리하기로 하면서 몇 가지 접근 방법을 후보로 두고 검토한 뒤에 Next.js로 페이지별로 새로 작성하면서 nginx에서 새 Next.js 서버로 라우팅하면서 바꿔 가는 과정을 설명한 글이다.(한국어)

그 밖의 개발 관련

인프라 관련

볼만한 링크

  • CommunityBridge Spotlight: My first real experience with Open Source : 리눅스 재단에서 CNCF 프로젝트에 멘티로 참여해서 오픈소스 기여를 하게 되는 Community Bridge 프로그램에 참여해서 KubeVirt에 기여한 경험을 공유한 글이다. 트위터에서 보고 참여하게 되었고 영어를 잘한다고 생각했지만, 공개적으로 생각을 얘기하고 토론하는 데 어려움이 많았고 다른 사람이 너무 잘하고 KubeVirt도 처음 써봐서 심정적으로 힘들었는데 멘토들이 계속 피드백을 주어 조금씩 개선할 수 있었고 알고 있다고 생각하던 git도 안 쓰던 명령어를 많이 배웠다고 한다. 다른 프로젝트의 이슈를 해결하겠다고 나섰지만, 막상 시간이 없어서 제대로 해결 못 했던 경험과 다른 프로젝트와도 계속 대화를 하다 보니 해당 프로젝트 메인테이너가 도움을 준 경험 등이 나와 있다.(영어)
  • 좋은PM은 '허세 지표/메트릭'을 사용하지 않습니다. : Eric Ries가 "The Lean Startup"에서 언급한 허세 지표(Vanity Metics)를 인용하면서 "데이터를 얻는 데 노력은 필요 없지만 기분은 좋게 하면서 별다른 인사이트를 주지 않는" 다운로드 수, 팔로우 수, 좋아요 수 등을 허세 지표로 얘기하고 있다. 좋은 지표는 Actionable해야 하며 허세 지표를 팀 간 비교로 쓰면 더욱 위험하다고 하고 있다. 코호트 분석으로 허세 지표를 의미 있게 만들 수 있고 서비스에 맞는 좋은 지표를 찾기 위해 노력해야 한다고 하고 있다.(한국어)
  • 스크럼에 대한 경험 및 개인적인 생각 : 팀 내에서 업무를 진행하면서 Jira의 컨트롤 차트에서 팀의 생산성이 좋지 않은 것을 이슈 레이징하고 스크럼을 도입해서 작업에 걸리는 시간을 추적하고 번업/번다운 차트로 결과를 추정하고 회고하면서 개선한 과정을 설명하고 있다. 여러 번의 스프린트를 진행하면서 매번 추정과 결과가 성공적이었던 것은 아니지만 명확한 범위와 데드라인 설정으로 업무 집중도가 높아진 점을 장점으로 또 너무 많은 힘을 쏟게 되는 것을 단점으로 지적했다.(한국어)

IT 업계 뉴스

프로젝트

  • Component Driven User Interfaces : Storybook 팀에서 컴포넌트 기반의 글과 도구들을 모아놓은 사이트를 공개했다.
  • Design Systems For Figma : Uber, Atlassian, Slack들 Figma로 만든 디자인 시스템을 모아놓은 사이트.
  • Danfo.js : Pandas에서 영감을 받은 데이터 처리 라이브러리.

버전 업데이트

2020/09/15 23:51 2020/09/15 23:51
Response : No Trackback , No Comment

Comments

: 1 : ... 5 : 6 : 7 : 8 : 9 : 10 : 11 : 12 : 13 : ... 746 :