[React Native] react-native 디바이스에서 실행하기

카테고리 : Development
태그: development · reactnative · android · ios · 디바이스에서 앱 실행하기 · usb 연결

안드로이드 디바이스에서 앱 실행하기

USB 디버깅 활성화

  • 안드로이드 디바이스에서 USB 디버깅을 활성화해야 합니다.
  • 설정에서 “개발자 옵션” 메뉴를 활성화하고, “USB 디버깅”을 활성화하세요.

USB 디버깅 활성화 작업

  1. 기기의 설정(Settings)으로 이동합니다.
  2. “휴대전화 정보” 또는 “장치 정보”를 찾습니다. 이 항목은 Android 기기마다 다를 수 있습니다.
  3. “소프트웨어 정보”로 이동합니다.
  4. 하단에 있는 “빌드 번호”를 찾습니다.
  5. “빌드 번호” 행을 일곱 번 탭합니다. 첫 번째 탭 이후에는 “빌드 번호에 대한 추가 정보” 또는 “빌드 번호에 대한 더 많은 설정”과 같은 메시지가 표시됩니다.
  6. 일곱 번째 탭 후에는 “개발자 모드가 활성화되었습니다” 또는 유사한 메시지가 표시됩니다.

USB를 통해 디바이스 연결

  • 안드로이드 디바이스를 개발 컴퓨터에 USB로 연결하세요.
  • adb devices 명령을 실행하여 디바이스가 올바르게 연결되었는지 확인하세요.
$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

앱 실행하기

  • 명령 프롬프트에서 다음 명령을 실행하여 앱을 설치하고 디바이스에서 실행하세요:
npx react-native run-android
  • “bridge configuration isn’t available” 오류가 발생하는 경우 adb reverse를 사용할 수 있습니다.
  • React Native CLI를 사용하여 릴리스 빌드를 생성하고 실행할 수도 있습니다.

개발 서버에 연결하기

방법 1: adb reverse 사용 (권장)

  • 안드로이드 5.0 (롤리팝) 이상의 디바이스에서 USB 디버깅이 활성화되어 있고 개발 컴퓨터에 USB로 연결된 경우 사용할 수 있습니다.
  • 명령 프롬프트에서 다음 명령을 실행하세요:
luaCopy code
adb -s <디바이스 이름> reverse tcp:8081 tcp:8081
  • 디바이스 이름을 확인하려면 adb devices 명령을 실행하세요.
  • 개발자 메뉴에서 라이브 리로딩을 활성화할 수 있습니다.

방법 2: Wi-Fi로 연결

  • Wi-Fi를 통해 개발 서버에 연결할 수도 있습니다.
  • USB 케이블을 사용하여 디바이스에 앱을 설치한 후, 다음 지침에 따라 무선으로 디버깅할 수 있습니다:
    1. 개발 컴퓨터의 IP 주소를 확인하세요.
    2. 랩톱과 휴대폰이 동일한 Wi-Fi 네트워크에 연결되어 있는지 확인하세요.
    3. 디바이스에서 앱을 열고, 개발자 메뉴로 이동하세요.
    4. “Dev Settings” → “Debug server host & port for device”로 이동하고, 개발 컴퓨터의 IP 주소와 포트를 입력하세요.
    5. 개발자 메뉴로 돌아가서 “Reload JS”를 선택하세요.
  • 이제 개발자 메뉴에서 라이브 리로딩을 활성화할 수 있습니다.

앱 빌드하기

  • React Native CLI를 사용하여 앱을 빌드할 수 있습니다.
  • 명령 프롬프트에서 다음 명령을 실행하세요:
arduinoCopy code
npx react-native run-android
  • 이 명령은 앱을 자동으로 빌드하고, 디바이스에 설치한 후 실행합니다.
  • 또한, -variant 옵션을 사용하여 특정 빌드 변형을 선택할 수 있습니다. 예를 들어, debug 또는 release 등의 빌드 타입을 지정할 수 있습니다.
arduinoCopy code
npx react-native run-android --variant=release

앱 배포를 위한 릴리스 빌드 생성하기

  • 앱을 Google Play 스토어에 배포하려면 릴리스 빌드를 생성해야 합니다.
  • 릴리스 빌드는 개발 빌드와는 달리 앱을 최적화하고, 서명하며, 프로덕션 환경에 맞게 설정합니다.
  • 다음은 릴리스 빌드를 생성하는 과정입니다:
    1. 안드로이드 프로젝트의 android/app 폴더로 이동합니다.
    2. gradlew 파일이 있는지 확인합니다. 없다면, 명령 프롬프트에서 ./gradlew를 실행하여 생성합니다.
    3. 명령 프롬프트에서 다음 명령을 실행하여 릴리스 빌드를 생성합니다:
bashCopy code
./gradlew assembleRelease
  1. 빌드가 성공적으로 완료되면, android/app/build/outputs/apk 폴더에 앱의 APK 파일이 생성됩니다.
  2. 생성된 APK 파일은 Google Play 스토어에 업로드할 수 있습니다.

위의 과정을 따라 안드로이드 디바이스에서 앱을 실행하고, 빌드하고, 배포할 수 있습니다. 이를 통해 개발 환경을 구성하고, 앱을 테스트하고, 최종 사용자에게 배포할 수 있습니다.

iOS 앱 실행 및 빌드하기

  1. USB를 통한 디바이스 연결
    • iOS 디바이스를 USB 케이블을 사용하여 Mac에 연결합니다.
    • 프로젝트의 ios 폴더로 이동한 다음 .xcodeproj 파일을 엽니다. CocoaPods를 사용하는 경우 .xcworkspace 파일을 엽니다.
  2. 코드 서명 구성
    • 개발자 계정에 등록되어 있는지 확인합니다.
    • Xcode의 Project Navigator에서 프로젝트를 선택한 다음, 메인 타겟(프로젝트와 같은 이름을 가짐)을 선택합니다.
    • “General” 탭으로 이동한 다음, “Signing” 섹션에서 Apple 개발자 계정이나 팀을 선택합니다.
    • 동일한 작업을 테스트 타겟(이름이 Tests로 끝나고 메인 타겟 아래에 있는)에 대해서도 수행합니다.
  3. 앱 빌드 및 실행
    • 모든 설정이 올바르게 되었다면, 디바이스가 Xcode의 툴바에서 빌드 대상으로 나타나고 Devices 창(⇧⌘2)에서도 확인될 것입니다.
    • Build and run 버튼(⌘R)을 누르거나 Product 메뉴에서 Run을 선택하여 앱을 실행합니다.
    • 앱은 잠시 후에 디바이스에서 실행됩니다.

개발 서버에 연결하기

  • 개발 서버에 연결하여 디바이스에서 빠르게 앱을 테스트할 수도 있습니다.
  • 디바이스와 컴퓨터가 동일한 Wi-Fi 네트워크에 연결되어 있는지 확인합니다.
  • 디바이스에서 개발자 메뉴를 열고 Live Reload를 활성화합니다. JavaScript 코드가 변경될 때마다 앱이 다시 로드됩니다.

문제 해결

  • 만약 연결할 수 없다는 오류 메시지가 나타난다면, Mac과 디바이스가 동일한 네트워크에 있고 서로 통신할 수 있는지 확인합니다.
  • captive portal로 구성된 열린 Wi-Fi 네트워크의 경우, 일부 네트워크에서는 디바이스가 네트워크의 다른 장치에 연결되지 못하도록 설정되어 있습니다. 이 경우 디바이스의 개인 핫스팟 기능을 사용하거나 USB를 통해 Mac에서 디바이스로 인터넷 연결을 공유하여 매우 빠른 전송 속도로 번들러에 연결할 수 있습니다.

data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2738%27%20height=%2738%27/%3e

iOS 앱 빌드하기

React Native로 개발한 앱을 App Store에 출시하기 위해 몇 가지 추가 고려 사항이 있습니다. 아래의 가이드를 따라 진행하세요.

  1. Apple 개발자 계정 등록
    • App Store에 앱을 게시하려면 Apple 개발자 계정이 필요합니다. 개발자 계정을 등록하고 Apple의 요구 사항을 충족시킵니다.
  2. Xcode 프로젝트 구성
    • Xcode에서 프로젝트를 엽니다.
    • 프로젝트 설정에서 “Signing & Capabilities”로 이동합니다.
    • “Signing” 섹션에서 앱에 사용할 배포용 프로비저닝 프로필과 인증서를 선택합니다. 개발자 계정이 이미 등록되어 있어야 합니다.
    • “Capabilities” 탭에서 필요한 기능(예: 앱 그룹, 푸시 알림, 인앱 구매 등)을 설정합니다.
  3. 앱 아이콘 및 스크린샷 준비
    • 앱 아이콘과 앱 스크린샷을 App Store에 제출할 준비를 합니다. Apple의 가이드라인을 따라 크기와 형식을 확인합니다.
  4. App Store Connect에서 앱 등록
    • App Store Connect(https://appstoreconnect.apple.com/)에%EC%97%90) 로그인하여 앱을 등록합니다.
    • 앱 정보, 버전 및 빌드 세부 정보, 프로모션, 가격 설정 등을 입력합니다.
    • 앱 스크린샷과 설명을 제공합니다.
  5. 앱 빌드 및 배포
    • Xcode에서 “Product” 메뉴에서 “Archive”를 선택하여 앱을 아카이브합니다.
    • 아카이브를 선택하고 “Distribute App”을 클릭합니다.
    • 배포 방법으로 “App Store Connect”를 선택하고, 앱 스토어 등록에서 생성한 프로덕트를 선택합니다.
    • Xcode가 앱을 아카이브하고 App Store Connect로 업로드합니다.
    • App Store Connect에서 앱 버전 및 세부 정보를 검토한 후 심사 요청을 제출합니다.

앱이 Apple의 심사를 통과하면 App Store에 게시됩니다. 사용자들은 앱을 다운로드하고 사용할 수 있게 됩니다.

이는 iOS 앱을 빌드하고 App Store에 출시하기 위한 기본적인 단계입니다. 앱 개발자를 위한 Apple의 가이드 및 문서를 참조하면 더 자세한 정보를 얻을 수 있습니다.