Skip to content

App Build

Jump to bottom
Hyunseok Ryu edited this page May 18, 2025 · 1 revision

🧪 Timepay 프로그램 로컬 실행 및 Android Studio 빌드 가이드

📦 로컬에서 Timepay 프로그램 실행하기

1. 프로젝트 디렉토리 이동

cd capstone-2025-44-master/frontEnd

2. 로컬 실행 또는 빌드 시 CRACO 오류 발생

npm start
# 또는
npm run build

실행 시 아래와 같은 CRACO 관련 오류가 발생할 수 있습니다.
CRACO 오류 스크린샷

✅ 해결 방법

CRACO를 아래 명령어로 설치합니다.

npm install @craco/craco --save-dev
# 또는
yarn add @craco/craco -D

craco설치

설치가 완료되면 다음 명령어로 개발 서버를 실행할 수 있습니다.

npm start

정상적으로 실행되면 http://localhost:3000 에서 다음과 같은 화면을 볼 수 있습니다.

host3000

📱 Timepay 앱 Android Studio에서 빌드하기

1. 웹 애플리케이션 빌드

npm run build

2. Capacitor 설치

npm install @capacitor/core @capacitor/cli
npm install @capacitor/android

3. Capacitor 초기 설정

npx cap init

실행 시 다음과 같은 질문이 주어집니다:

  • App name? → 예: TimePay
  • App ID? → 예: com.timepay.app

capacitor init

4. Android 플랫폼 추가

npx cap add android

이 명령어를 실행하면 android/ 디렉토리가 생성됩니다.

5. 빌드 결과 복사

npx cap copy

build/ 디렉토리의 웹 결과물이 네이티브 Android 프로젝트로 복사됩니다.

6. Android Studio에서 열기

npx cap open android

Android Studio가 실행되며, 프로젝트가 자동으로 열립니다.

📲 휴대폰에서 앱 실행 테스트

  • USB로 휴대폰을 연결
  • 휴대폰에서 개발자 모드 활성화 및 USB 디버깅 허용
  • Android Studio에서 에뮬레이터 또는 실제 기기 선택 후 실행

Android Studio

Clone this wiki locally