[톡리포트] #2 군대 싸지방에서 React Native로 앱 개발하기 (아이패드 -> Github Codespace)

군대 싸지방에서 코딩하기

저번 포스팅에서는 열심히 아이패드로 코딩을 했었는데, 아이패드로 평소에 인터넷을 사용할 수 없다는 점과 아이패드 성능 상 빌드 속도가 느린 점이 너무 불편해서 결국 싸지방 컴퓨터를 사용하기로 결정했다.

 

먼저 싸지방 컴퓨터의 스펙과 제한 사항은 어떻게 될까?

 

보안 상 스펙을 정확히 확인할 수는 없지만 대략적으로 설명해 보겠다.

 

• 웹페이지 접속 -> 페이지 로딩 속도가 느리긴 하지만 감안할 정도
• 영상 재생(유튜브) -> 1080 해상도 원활히 재생 가능
• 개발 프로그램 설치 불가

 

이 정도 조건이면 프론트, 백 개발 모두 싸지방 컴퓨터로 충분히 가능하다고 판단했다.

 

일단 개발 프로그램을 설치할 수 없기에 온라인 IDE를 지원하는 사이트를 찾아보았다. vscode를 제공하는 Github Codespace가 가장 적합해 보였다. 깃 레포지토리 연동도 쉽게 할 수 있고 무엇보다 학생 인증을 통해 Github Pro 계정으로 코드스페이스를 한 달에 180시간 무료로 사용할 수 있다는 점이 큰 장점이었다.

 

GitHub Student Developer Pack을 통해 학생 인증을 하면 아래와 같은 혜택을 받을 수 있다.

확인된 학생은 개인 계정 GitHub Codespaces을(를) 매월 최대 180시간까지 무료로 사용할 수 있습니다. 학생이 사용할 수 있는 월별 스토리지 양 및 코어 사용 시간은 GitHub Pro 계정에 포함된 양과 같습니다. 자세한 내용은 [AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)을(를) 참조하세요. 시작 GitHub Codespaces에 대한 자세한 내용은 [AUTOTITLE](/codespaces/quickstart)을 참조하세요.

 

한 달 내내 코딩을 한다고 가정해도 추가 비용은 약 10달러 수준이라 부담 없이 사용하기로 했다.

실제 깃허브 코드스페이스를 사용하면서 발생한 비용

 

 

프론트 스팩 재정의

프론트 개발환경을 마이그레이션 하며 스펙을 재정의했다.

React Native + Expo + TypeScript

Flutter에서 React Native + Expo + TypeScript로 최종 스팩을 정했다. 선택의 근거는 아래와 같다.

 

웹과 앱 동시 지원

싸지방 환경에서 가장 큰 문제는 개발한 결과물을 눈으로 확인하기 어렵다는 점이다. iOS 앱으로 출시할 예정이지만, 싸지방 컴퓨터에서는 포트 포워딩이 막혀 있어 아이패드나 다른 iOS 기기에서 로컬 서버에 접근해 테스트하는 것이 불가능하다. 그렇다고 에뮬레이터를 돌리기엔 싸지방 컴퓨터 성능이 받쳐줄지도 미지수다. 결국 개발하면서 UI를 실시간으로 확인할 수 없다는 건데, Expo를 사용하면 웹 빌드를 지원하기 때문에 브라우저에서 바로 결과물을 확인할 수 있다. 이 점이 선택에 있어 가장 결정적인 이유였다. 나중에 제대하고 정상적인 개발 환경이 갖춰지면 동일한 코드베이스로 iOS 앱 빌드까지 자연스럽게 이어갈 수 있다는 것도 큰 장점이다.

 

Flutter보다 React Native가 더 나은 이유

Flutter도 웹 빌드를 지원하긴 한다. 하지만 AI 바이브 코딩을 적극 활용하는 나의 개발 방식 특성상, 학습 데이터가 훨씬 풍부한 React 생태계가 압도적으로 유리하다. AI가 Flutter/Dart보다 React Native + TypeScript 코드를 훨씬 잘 생성해 주고, 레퍼런스도 많아 막혔을 때 해결책을 찾기도 쉽다. 프론트엔드 경험이 없는 내 입장에서는 이 부분이 생산성에 직결되는 문제였다.

 

TypeScript 도입

사실 JavaScript로 시작하는 게 더 빠를 수도 있었다. 하지만 TypeScript를 선택한 이유는 AI 코딩과의 궁합 때문이다. 타입이 명확하게 정의되어 있으면 AI가 코드를 생성할 때 훨씬 일관성 있는 결과를 뽑아주고, 내가 코드를 읽고 이해하는 데도 타입 정보가 있는 편이 훨씬 낫다. 런타임에서 터지는 타입 에러를 미리 잡아준다는 기본적인 장점은 덤이다.

 

Expo의 편의성

Expo는 React Native 개발 환경 세팅의 복잡함을 크게 줄여준다. GitHub Codespace 환경에서 별도의 네이티브 빌드 도구 없이도 개발을 시작할 수 있고, expo start --web 한 줄로 브라우저에서 바로 확인이 가능하다. EAS(Expo Application Services)를 활용하면 나중에 앱 빌드와 배포도 클라우드에서 처리할 수 있어 로컬 맥 환경이 없어도 앱 출시까지 이어갈 수 있다는 것도 염두에 뒀다.

 

마이그레이션 이후 화면

스펙을 재정의하고 나서 실제로 웹에서 서비스를 실행해 봤다. 아래 캡처가 현재까지 개발된 화면이다.

 

실사용에서 불편한 점은 딱히 없었다. 오히려 GitHub Codespace의 VSCode가 React Native 관련 확장 프로그램을 지원해줘서 아이패드에서 개발할 때보다 훨씬 쾌적하게 작업할 수 있었다. 자동완성도 잘 되고, AI 코딩 툴과의 연동도 자연스러워서 생산성이 눈에 띄게 올랐다.

 

환경 문제로 시간을 꽤 날렸지만 결과적으로는 더 나은 스펙으로 자리를 잡은 것 같아서 만족스럽다. 다음 포스팅에서는 군대에서 앱 하나를 완성하기까지의 전체 과정을 회고해보겠다.