본문 바로가기
IT 잡학사전/Git & Github

[Codespaces] 아이패드로 코딩하는 코드스페이스 (파이썬, 주피터, JS, npm, 리액트)

by GiraffePark 2022. 12. 6.
깃허브의 수익 상품
Codespaces (코드스페이스) : https://arnopark.tistory.com/548
Copilot (코파일럿)https://arnopark.tistory.com/553

 

 

안녕하세요. 박기린 입니다.

 

 

코드스페이스 베타테스터 기린

깃허브에서는 Codespaces(코드스페이스)라는 클라우드-원격 vscode 기반 코드 편집 프로그램을 발표하고, 베타테스터를 모집하였습니다. 저 또한 이전에 베타테스터를 신청하고 오랜 시간 기다린 끝에 당첨이 되었었습니다.

그러고 몇 달이 지나.. 이제 코드스페이스 베타테스트가 종료된다는 공지와 함께 무료 이용권도 없어진다고 메일이 왔습니다.

 

사실 쓸 일이 없어서 별로 쓰지는 않았지만, 기한이 만료가 되기 전에 마지막으로 한 번 사용해보고, 소개글을 적으면 좋겠다고 생각하였습니다.

 

 


코드스페이스 실행하기

https://github.com/ParkGiraffe/genshin-redeem-code-marcro-py

이전에 원신의 리딤코드를 긁어오는 매크로 프로그램을 만들었습니다. python(파이썬), jupyter notebook(주피터 노트북)으로 각각 제작을 했었습니다. 이 리포를 codespace로 실행해보겠습니다.

 

 

 

codespace 접속방법은 간단합니다. '< > Code' 버튼을 누른 후에 'Codespaces 탭의 + 버튼'을 눌러줍니다.

 

 

 

그러면 VSCode와 거의 똑같은 Codespace 창이 뜹니다. 초기 세팅을 위해 로딩이 되는 것을 기다리고 나면,

 

 

 

 

본격적으로 리포지토리의 코드들을 편집하고 실행할 수 있습니다.

 

 


확장 프로그램 설치

파이썬과 주피터 노트북 코드를 열람하니, 'Python' Extension 설치를 추천하는 알림이 뜹니다.

 

 

 

 

Codespaces도 Extension(확장프로그램) 설치를 똑같이 지원합니다. VSCode Extension 마켓플레이스와 완전 동일합니다.

그리고 여기서 설치한 Extension은 Codespaces를 나갔다가 들어와도 계속 유지됩니다.

 

 

 

 

심지어 테마, 아이콘 변경까지 전부 가능합니다.

기존에 사용하시던 VScode와 동일한 디자인, 테마를 만들 수 있습니다.

 

 

 


자동완성 기능 & 프로그램 실행

코드 편집기의 꽃인 '자동완성' 기능 또한 정상 작동합니다.

 

 

 

그리고 Codespaces가 단순한 코드 편집기가 아님을 보여주듯, Python 파일을 실행할 수도 있습니다.

 

 

 

주피터 노트북 또한 마찬가지로 잘 실행됩니다.

 

 

 


Git & 모듈 설치

Github 프로그램 답게, Codespaces 내부에는 Git이 기본으로 설치되어 있습니다. 그리고 깃허브 로그인 또한 되어있습니다.

그래서 Git 버전 관리가 가능합니다.

 

 

게다가 외부 모듈 설치까지 가능합니다. python의 matplotlib을 설치한 모습입니다.

conda를 이용하는 유저들도 코드스페이스를 잘 사용할 수 있을 것으로 보입니다.

 

 

 


JS & npm(NodeJS) 실행해보기

문득 호기심이 들었습니다. JS 웹페이지도 설마 출력이 가능할까?

 

이전에 JS 공부하면서 만든 사이트가 담긴 리포를 코드스페이스로 열어보았습니다.

 

 

 

각 리포에서 코드스페이스를 생성하면, 각각 새로운 컴퓨터를 할당해주는 개념이기 때문에, 아까 설치했던 Extension은 연동되지 않는 모습입니다. 다시 python 리포의 코드스페이스를 실행하면 Extension이 그대로 남아 있습니다.

 

 


npm 모듈 지원

코드스페이스는 npm을 지원합니다. 심지어 npm install을 해줄 필요 없이, 코드스페이스를 처음 실행하면 알아서 package.json의 데이터를 읽고 모듈들을 설치합니다.

 

 

 


live-server 실행해보기

이제 대망의 웹페이지 실행을 해보겠습니다.

우선 첫 번째로 Live server 확장프로그램을 이용해보겠습니다.

 

 

Extension을 설치하고 나니, Live server 실행 버튼이 뜹니다.

이제 실행을 해보겠습니다.

 

 

 

Live server 페이지

실행 결과물입니다. 겉보기에는 이상해보이실 수 있습니다. 근데 정상적으로 작동한 모습입니다.

왜냐하면 이 사이트는 CSS가 아니라 SASS를 사용하기 때문입니다. SASS로 디자인한 사이트는 NodeJS로 실행해야 정상적으로 보입니다. 그러면 이제 NodeJS 웹 서버를 실행해보겠습니다.

 

 


NodeJS-npm으로 실행해보기

npm으로 실행했더니, 브라우저에서 웹페이지를 열 수 있다는 알림이 뜹니다.

 

 

 

 

 

조금 기다리고 나니 사이트가 정상적으로 작동합니다.

 

 

 

서버와의 통신도 정상적으로 작동합니다.

코드스페이스의 웹개발 기능에 감탄이 나옵니다.

 

 

 


아이폰으로 실행해보기

또 다른 의문이 생깁니다. 코드스페이스는 클라우드-리모트 코드 편집이 가능하기에, 기기의 제약이 없다는 큰 장점을 가지고 있습니다. 그러면 설마 아이폰에서도 가능하지 않을까 싶었습니다. 만약 아이폰에서도 가능하다면, 아이패드에서는 거의 맥북 수준으로 쾌적하게 코딩을 즐길 수 있을 것입니다.

 

 

아이폰 12 pro의 Safari(사파리) 브라우저에서 코드스페이스를 들어왔습니다.

정말 비좁은 화면이지만, 구성은 컴퓨터와 동일합니다.

 

 

 

 

비좁은 화면에 커다란 키보드까지.. 총체적 난국이지만 꾸역꾸역 터미널에서 npm을 실행합니다.

 

 

 

웹서버가 켜집니다!

 

 

 

 

스마트폰 웹 브라우저에서도 정상적으로 Node 서버의 웹페이지를 불러올 수 있습니다!

 

 

 

 

 

이렇게 브라우저 내부에서 새로운 탭을 만들어서 실행하는 방식입니다.

 

 

 

 

 

역시나 확장프로그램 설치와 테마적용, 코드 자동완성까지 정상적으로 작동합니다. 아이폰에서도 기능에 막힘이 없으니, 아이패드는 더 쾌적하게 코딩을 할 수 있을 것입니다. 게다가 매직키보드와 같은 물리키보드나 마우스까지 연결해준다면 맥북과 유사한 환경을 즐길 수 있을 것입니다.

 

 

 

 


React, Next.JS.. & 가격

깃허브의 상단 내비게이션 바를 보면 'Codespaces' 버튼이 있습니다. 눌러서 들어가주면,

 

 

 

코드스페이스가 어디까지 지원하는 지를 알 수 있습니다. Jupyter Notebook, React, Express, Next.js, Django... 정말 다양합니다.

코드스페이스는 확실히 웹 프로그래밍에 아주 괜찮은 프로그램인 것 같습니다. 서버 쪽은 보안 문제로 안 될 가능성이 높고, 앱 개발은 가상 디바이스 문제로 아직은 어려울 것 같습니다. 하지만 언젠가는 가상 디바이스마저 어떻게든 지원해줄 수도 있지 않을까 싶네요...

 

 

 

https://docs.github.com/ko/enterprise-cloud@latest/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces

코드스페이스의 가격 정책입니다. 월 구독 결제로 운영이 됩니다.

 

 

 


소감

정말 괜찮은 프로그램입니다. 아이패드로 코딩을 하는 것에 로망이 있는 분이시라면 코드스페이스가 최고의 방법이라고 생각합니다.

다만, 인터넷이 필요하다는 점 때문에, 이동이 잦은 아이패드의 경우 오히려 독이 될 수도 있을 것 같습니다.

집에 코드 서버를 두고 원격으로 코딩을 하시는 분들에게도 좋은 대안이 될 것 같습니다. 집 서버의 전기세, 보안 문제를 생각해보면 오히려 코드스페이스가 저렴해보이기도 합니다.

 

저는 코드스페이스를 추가 연장할 생각은 없습니다. 맥북 하나 들고 여기저기서 코딩을 하다보니 원격 코딩의 필요성을 느끼지 못하고 있기 때문입니다. 하지만 언젠가 원격 코딩의 로망에 빠져든다면, 그때 다시 결제할지도 모르겠습니다.

 

반응형