아이패드로 리액트 사용하기(gitpod/ codespace)

 

코딩공부를 할 때 나는 집에서는 노트북을 사용한다. 내가 갖고 있는 노트북은 게이밍 노트북이라 무게가 꽤 나간다. 심지어 충전기도 엄청 크고 둔탁하다. 그래서 밖에서 놀다가 카페에서 공부하고 싶을 때 항상 공부를 제대로 실습하지 못하곤 한다. 갖고 있는 아이패드로 활용할 수 있는 방법이 없을까? 싶어서 이것저것 계속해서 찾아봤다. 자바스크립트 강의와 파이썬 강의를 들을 때는 vscode 웹 버전과 다른 홈페이지를 이용하여 간단하게 실행하곤 했다. 요즘은 리액트를 배우는 중인데 리액트를 위한 개발환경을 아이패드로 갖추기에는 꽤나 힘들었다.

리액트 홈페이지에서 언급하는 CodePen, CodeSandbox, Stackblitz 를 이용해도 좋지만 뭔가... 강의하는 화면과 환경이 똑같았으면 좋겠으면 하는 마음이 컸다. 그렇게 찾다가 '라즈베리파이'라는 초소형 컴퓨터를 이용하여 서버를 만들어서 밖에서도 지속적으로 연결하여 프로그래밍을 할 수 있다는걸 발견했다. 직접적으로 패드에 연결해서도 사용이 가능하다길래 라즈베리파이를 찾아봤는데 가격이 만만치 않았다. 메모리칩까지 하면 거의 20만 원...! 한 10만 원이면 눈 딱 감고 샀을 수도 있지만... 20만 원은 그냥 노트북이나 쓰자 가 되어버렸다.
그렇게 얼레벌레 서핑하다가 발견한 것이 gitpod!





https://www.gitpod.io/

Gitpod: Always ready to code.

첫 화면은 그냥 vscode 처럼 생겼다. 온라인 vscode처럼 github랑 연결해서 사용하면 되려나 싶어서 해봤다.
일단 npx create-react-app my-app을 실행시켜봤다. 어라? 뭐가 굴러간다...?
침착하게 cd my-app 과 npm start도 실행시켜 봤다. 어라??? 된다??? PC 환경처럼 폴더가 제대로 생성이 되었다.

설정에 들어가서 색상도, 폰트도 vdcode 처럼 설정값을 바꿔줄 수 있다.

폰트는 이미 내 아이패드에 폰트가 깔려서 설정이 된 걸 수도 있다. 만약 안되시는 분들은 ifont 어플을 통해서 설치하시면 됩니다!


웹페이지 프리뷰를 웹 페이지 내 에디터 내에서 열 수 있다는 점이 장점이다. vscode - codespaces에서는 별도 창이 열리는데... 내가 못 본 건지 모르겠지만 파일을 수정하면 웹페이지를 열었다가 다시 확인해 보거나 해야 한다. 파일 변경 후 저장은 그냥 알아서 저장이 되어서 gitpod 사이트 내 프리뷰를 띄우면 새로고침이 좀 안 되는 듯하고, 별도의 브라우저 탭으로 열어서 보면 잘 된다~ 암튼 그래서 이제부터 아이패드로 공부할 때 gitpod을 사용해야겠다~

 

- 추가 -

vscode 에서 터미널을 실행할 수 없어 다음에 대한 작업 계속하기를 눌러 코드스페이스와 연결을 했다.

혹시나 하고 여기서 리액트 설치를 진행해 봤는데 뭔가 되긴 한다...!

 

 

- 추가 2 -

 

gitpod이 무료라고 생각했는데 그게 아니었다. 여느 때처럼 공부하려고 gitpod를 켰는데...

 

 

위와 같은 창이 떴다. 사용할 수 있는 한계에 도달했고, 너의 요금계정을 바꾸라는 말이었다. Go to Billing으로 들어가면 아래와 같은 게 나온다.

무료인 500크레딧을 넘겨서 10.76 크레디트를 초과했으며,

지금은 무료버전을 사용 중이고,

플랜을 업그레이드 하게 되면 500 크레디트 (=50시간)까지 무료이고,

그 이후는 처음 1000크레딧(100시간)까지는 매 달 $9이며, 이를 초과할 1 크레디트마다 $0.036가 추가된다고 나와있다.

...

어쩐지...창을 켜놓고 어디 갔다 오면 자꾸 gitpod을 새로고침해서 사용했었어야 했는데 이 때문이었나 보다. 기존에 공부하던 코드들을 갖고 오려면 업그레이를 할 수밖에 없는데...ㅎ... 연습한 거니까 그냥 포기하고 vscode로 사용해야겠다ㅎㅎ... 젠장