Expo로 8시간 만에 앱 출시하기

Cursor 사용

Jan 24, 2025

Contents

expo로 개발하게 된 계기 아이디어 AI 기상 캐스터 (feat: 목소리)Expo React Conf App 참고 개발 과정 그리고 Cursor Cursor에 대한 찬양은 다음글에서 더 깊이 있게 다뤄 보겠습니다.EAS 사용 경험 React Native와 Expo의 장단점 장점 단점 마치며 참고 자료 및 코드 링크

Cursor 사용

expo로 개발하게 된 계기

DARO React Native SDK 개발기

React Native DARO SDK를 개발한 경험을 작성했었습니다. SDK는 완료가 되었고 샘플 프로젝트에서는 테스트가 되었지만 라이브된 프로젝트에서의 테스트가 필요했습니다. expo를 이용해 새로운 앱을 만들어 보기로 했습니다. React Native 에 대한 경험도 쌓였고 expo를 사용해보고 싶은 마음도 있었어요. 무엇보다 흥미로운 아이디어가 떠올랐습니다.

아이디어

AI 기상 캐스터가 날씨를 자연어로 쉽게 풀어서 읽어주면 어떨까? 라는 생각에서 출발 했어요. 게다가 귀여운 동물이면 더 재밌지 않을까 싶었고 ChatGPT API나 Eleven Labs API를 사용하면 될것 같았어요.

AI 기상 캐스터 (feat: 목소리)

저의 영어 닉네임이 Lion 입니다 😜

탭 베이스 화면구조의 간단한 앱으로 설계했습니다.

Expo React Conf App 참고

ReactConf 2024 에 expo 개발자의 expo 과 EAS 관련 설명이 있는데 도움이 되었습니다. 특히 ReactConf app을 expo로 개발했고 오픈소스로 공개 했더군요. 처음 expo 를 작성했을 때 File system-based routing 이 아주 편했습니다. 탭이나 네이게이션바에 대한 커스텀도 다양하게 가능하더군요.

개발 과정 그리고 Cursor

Cursor에 대한 언급을 안할 수가 없었습니다. 간단히 말해서, Cursor는 VSCode를 포크하여 많은 AI 지원 코드 편집 기능이 내장된 에디터입니다. VSCode에서 Copilot을 사용해보셨다면 어떤 것인지 아실 거에요. Copilot보다 10배 더 뛰어나고 생산성을 높이기 위한 다양한 유용한 기능들이 포함되어 있다고 생각하시면 됩니다.

PRD 를 작성 하고 .cursorrules 를 추가하면 더 스마트한 Cursor가 됩니다. Cursor 는 크게 Chat 과 Composer 라는 기능이 있는데요. Chat은 개발자에게 더 많은 컨트롤이 주어 집니다. Cursor 가 코드 생성 후에 자동 적용하지 않고 원하는 부분만 추가할 수 있습니다. 코드를 이해해야 할 때 Chat을 이용해 보세요. 마치 히스토리를 알고 있는 개발자를 옆에 둔 느낌이랄까요.

Composer 가 메인 기능입니다. normal / agent 모드가 있는데 agent 모드를 사용하세요. 터미널이 통합되어 커밋 & 푸시 까지 가능합니다. 코드를 이해하고 개발하고 버그를 찾는 이터레이션이 가능합니다.

Cursor에 대한 찬양은 다음글에서 더 깊이 있게 다뤄 보겠습니다.

EAS 사용 경험

EAS(Expo Application Services)는 Expo에서 제공하는 클라우드 기반 서비스로, React Native 앱의 빌드, 배포, 업데이트를 간편하게 관리할 수 있는 툴입니다.

Playstore와 AppStore 로 배포까지 자동화 됩니다. 특히 Visual Studio App Center 가 은퇴하면서 EAS update 를 사용하는게 선택이 될것 같아요. 개인으로 개발한다면 EAS 비용은 크게 문제가 될것 같지는 않아 보입니다.

React Native와 Expo의 장단점

장점

빠른 개발 특히 Hot reloading
크로스플랫폼
간소화된 워크플로우

단점

네이티브 기능 제약
비용 문제

마치며

Expo 를 사용하면 아주 빠른 시간내에 작동하는 프로토타입 혹은 프로덕션 레디 앱을 Android 와 iOS 둘다 개발할 수 있습니다. Cursor를 사용하면 개발 속도가 몇배는 더 빨라 집니다. SwiftUI 의 Preview 는 아지기 한계가 많고 느린데 반해 React Native 의 Hot Reloading 은 정말 빠릅니다.