[CoffeeDiary] EXPO CLI 를 활용한 앱 초기화

 

 

Q : Expo CLI는 뭐야? 뭘 할수 있어?

 

---

Expo CLI 개요

Expo CLI는 React Native 앱을 빠르게 개발하고 테스트할 수 있도록 도와주는 커맨드라인 도구입니다.
Expo SDK와 통합되어 있어 네이티브 설정 없이 카메라, 위치, 알림 등 다양한 기능을 바로 사용할 수 있습니다.

---

주요 기능

• 프로젝트 생성
  • expo init 명령으로 템플릿 기반 새 프로젝트를 즉시 생성
• 개발 서버 실행
  • expo start로 iOS·Android 시뮬레이터 또는 실제 기기에서 앱 실시간 미리보기
• 핫 리로딩
  • 코드 변경 시 즉시 화면에 반영되어 빠른 개발 사이클 지원
• 네이티브 모듈 활용
  • Expo Camera, Location, Notifications 등 Expo SDK API 사용
• 게시 및 배포
  • expo publish로 OTA(Over-The-Air) 업데이트 배포
  • EAS Build를 통해 App Store·Google Play용 빌드 생성

---

설치 및 시작하기

npm install -g expo-cli
expo init MyCoffeeDiary
cd MyCoffeeDiary
expo start

• 위 과정을 통해 로컬 개발 서버를 띄우고, QR 코드를 스캔해 Expo Go 앱에서 테스트할 수 있습니다.
• Android Studio, Xcode 없이도 모바일 화면 확인이 가능해 세팅 부담을 줄여 줍니다.

---

장점

• 네이티브 코드를 직접 다루지 않아도 다양한 기능 즉시 사용
• 빠른 개발·디버깅 워크플로우
• Expo Go 앱으로 여러 디바이스에서 간편 테스트
• OTA 업데이트로 스토어 재승인 없이 코드 배포

---

단점 및 고려사항

• 커스텀 네이티브 모듈(Expo SDK에 없는 패키지) 추가 시 Expo Bare 워크플로우로 전환 필요
• 앱 크기가 다소 커질 수 있음
• EAS Build나 Bare 워크플로우 사용 시 추가 학습 곡선 발생

---

위 내용을 참고해 Expo CLI로 커피 다이어리 프로젝트를 빠르게 시작해 보세요. 필요하다면 Expo SDK의 특정 API 사용법이나 EAS 빌드 설정도 안내해 드릴 수 있습니다.

 

 

 

---

 

Expo를 활용한 앱 생성

 

테스트를 위한 앱 실행 옵션

---

 

Q : expo cli로 개발하는 앱을 테스트하는 방법을 종류별로 알려줘

 

---

 

 

 

Expo CLI 앱 테스트 방법

---

1. 수동 테스트 (Manual Testing)

• Expo Go 앱
  • expo start 후 표시된 QR 코드를 Expo Go 앱에서 스캔해 실제 기기에서 즉시 실행
  • 빠른 확인, 네이티브 기능 대부분 지원
• 시뮬레이터/에뮬레이터
  • expo start → 터미널 단축키 i (iOS Simulator), a (Android Emulator)
  • Mac에서 iOS, Windows/macOS에서 Android 환경 구축

---

2. 웹 브라우저 테스트

• expo start --web
• Chrome, Safari, Edge 등 브라우저에서 React Native Web 버전으로 실행
• 빠른 레이아웃·스타일 확인에 적합

---

3. 단위 및 컴포넌트 테스트 (Jest + Testing Library)

• 설치
  • npm install --save-dev jest @testing-library/react-native react-test-renderer
• 단위 테스트
  • 순수 함수 로직, 유틸 헬퍼 함수 검증
• 컴포넌트 테스트
  • 렌더링 결과, 사용자 이벤트 클릭/입력 시 UI 변화 검증

---

4. 스냅샷 테스트 (Snapshot Testing)

• Jest 내장 기능
  • 컴포넌트 마크업을 스냅샷으로 저장
  • UI 변경 시 의도치 않은 변화를 빠르게 감지

---

5. 통합 테스트 (Integration Testing)

• Expo 앱의 여러 컴포넌트를 조합해 시나리오 테스트
• Testing Library의 render + fireEvent 활용
• 데이터 페칭, 네비게이션 흐름 등 복합 동작 검증

---

6. End-to-End(E2E) 테스트

도구 주요 특징 장점 단점

Detox	React Native 전용 E2E 프레임워크	빠른 네이티브 실행, 안정적 동기화	초기 설정 복잡, macOS·Android 환경 필요
Appium	WebDriver 기반, 다양한 플랫폼 지원	iOS·Android 모두 커버, 웹 자동화와 통합 가능	느린 실행 속도, 별도 서버·드라이버 관리 필요
Cypress	웹 빌드된 앱 E2E 테스트(Expo Web)	직관적 API, 강력한 디버깅 도구	모바일 네이티브 기능 미지원

---

7. CI/CD 환경에서의 자동화

• GitHub Actions / GitLab CI
  • jest --ci 스크립트 실행
  • 에뮬레이터 실행 후 Detox E2E 파이프라인 구성
• Expo EAS Submit & Build
  • 빌드 후 OTA 배포 검증 스크립트 통합

---

8. 테스트 전략 제안

1. 로컬 개발 단계
   • 수동 테스트 + Jest 단위·컴포넌트 테스트 병행
2. PR 단계
   • CI에서 Jest, 스냅샷, Detox E2E 파이프라인 실행
3. 릴리즈 전
   • 실제 디바이스에서 Expo Go, 스토어 빌드로 종합 검증

이렇게 단계별로 테스트 자동화와 수동 검증을 조합하면 안정적이고 빠른 개발 사이클을 유지할 수 있습니다.

 

 

---

 

웹브라우저 테스트 화면

 

 

 

---

 

 

 

Q : expo 실행 시 npx로 실행하는 방법은?

 

---

 

Expo CLI를 npx로 실행하는 방법은 매우 간단합니다. 별도로 글로벌 설치 없이도 최신 Expo CLI를 사용할 수 있는 유용한 방식이죠. 아래에 방법과 자주 쓰이는 명령어들을 정리해 드릴게요.

---

✅ 기본 실행 방법

npx expo start

• 현재 디렉터리에 Expo 프로젝트가 있다면 바로 개발 서버가 시작됩니다.
• 브라우저에 개발 대시보드가 열리고, QR 코드·시뮬레이터 실행 옵션 등을 확인할 수 있어요.

---

📦 프로젝트 생성부터 하고 싶다면?

npx create-expo-app my-coffee-diary
cd my-coffee-diary
npx expo start

• create-expo-app은 Expo CLI 초기 프로젝트 생성 템플릿입니다.
• 템플릿 선택 (blank, with navigation 등) 옵션이 나와요.

---

🛠️ 자주 쓰는 명령어

용도 명령어

새 프로젝트 생성	npx create-expo-app myApp
개발 서버 실행	npx expo start
Android 에뮬레이터 실행	npx expo start --android
iOS 시뮬레이터 실행 (Mac 전용)	npx expo start --ios
웹 브라우저에서 실행	npx expo start --web
앱에 빌드된 코드 게시	npx expo export 또는 publish

---

💡 팁: 왜 npx로 쓰는 게 좋을까?

• 최신 버전 자동 사용: 매번 최신 Expo CLI 버전으로 실행됨
• 전역 설치 불필요: 로컬 프로젝트 폴더 없이도 실행 가능
• 권한 문제 회피: 일부 시스템에서 npm install -g expo-cli가 제한될 때 유용

---

필요하다면 Expo 명령어로 실행되는 각 옵션의 동작 원리나, 개발용으로 npx expo start --dev-client 같은 고급 옵션도 알려드릴게요. 프로젝트 초기화부터 EAS 빌드까지 함께 마스터해 볼까요? 🚀

 

---