React Native (RN) 앱에서 로컬로 빌드하고 Android 및 iOS 시뮬레이터에서 테스트하는 방법

필수 환경 설정 확인

먼저, 빌드를 진행하기 위해 필요한 환경이 모두 설정되어 있는지 확인해야 합니다.

• Node.js 및 Watchman: 설치되어 있어야 합니다.
• React Native CLI: 프로젝트가 초기화된 상태여야 합니다.
• Android 개발 환경:
  • Android Studio 설치.
  • Android SDK 및 Platform Tools 설치.
  • ANDROID_HOME 환경 변수 설정.
  • Android 가상 장치(AVD) 생성.
• iOS 개발 환경 (macOS 필수):
  • Xcode 설치 (App Store에서 가능).
  • Xcode Command Line Tools 설치 (xcode-select --install).
  • CocoaPods 설치 (iOS 종속성 관리): sudo gem install cocoapods

팁: 환경 설정에 문제가 있다면, 프로젝트 폴더 내에서 npx react-native doctor 명령어를 실행하여 빠진 부분을 진단할 수 있습니다.

앱 종속성 설치

프로젝트의 모든 JavaScript 종속성을 설치합니다.

1. 프로젝트 디렉토리로 이동:
2. cd your-react-native-project
3. npm 또는 yarn을 사용해 설치:
4. npm install # 또는 yarn install
5. iOS 전용: iOS 네이티브 종속성(Pods) 설치를 위해 ios 디렉토리로 이동하여 Pods를 설치합니다.
6. cd ios pod install cd .. # 다시 프로젝트 루트로 돌아오기

Android 시뮬레이터/에뮬레이터에서 실행

1. 에뮬레이터 실행

빌드 전에 테스트할 Android 가상 장치(AVD)를 미리 실행합니다.

• Android Studio에서 Device Manager를 열고 생성해 둔 에뮬레이터를 선택하여 실행합니다.

2. 앱 빌드 및 실행

프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.

npx react-native run-android

• 이 명령어는 JavaScript 번들 서버(Metro)를 시작하고, Android 앱을 빌드한 다음, 실행 중인 에뮬레이터에 앱을 설치하고 실행합니다.
• 첫 빌드는 시간이 오래 걸릴 수 있습니다.

iOS 시뮬레이터에서 실행 (macOS 전용)

1. 시뮬레이터 실행

Xcode를 통해 시뮬레이터를 직접 실행하거나, run-ios 명령어를 통해 자동으로 실행할 수 있습니다.

2. 앱 빌드 및 실행

프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.

npx react-native run-ios

• 이 명령어는 JavaScript 번들 서버(Metro)를 시작하고, Xcode를 사용하여 iOS 앱을 빌드한 다음, 기본 설정된 iOS 시뮬레이터를 열고 앱을 설치 및 실행합니다.
• 특정 시뮬레이터를 지정하려면
• npx react-native run-ios --simulator="iPhone 15 Pro"

테스트 및 디버깅

앱이 시뮬레이터에서 실행되면, 개발자 메뉴를 사용하여 디버깅할 수 있습니다.

• Android 에뮬레이터: $\text{Ctrl} + \text{M}$ 또는 $\text{Cmd} + \text{M}$ (macOS), 또는 시뮬레이터에서 $\text{Menu}$ 버튼을 누릅니다.
• iOS 시뮬레이터: $\text{Cmd} + \text{D}$를 누릅니다.

일반적으로 사용하는 디버깅 옵션은 다음과 같습니다.

• Reload (R): JavaScript 코드를 새로고침합니다.
• Debug Remote JS: Chrome 개발자 도구를 사용해 디버깅을 시작합니다.
• Enable Hot Reloading: 코드 변경 시 화면을 자동으로 업데이트합니다.

1. Safari 개발자 메뉴 활성화

Mac에 설치된 Safari 브라우저에서 웹 개발자 기능을 먼저 켜줘야 합니다.

Safari 열기: Mac에서 Safari 브라우저를 실행합니다.
환경설정 열기: 상단 메뉴 바에서 Safari > 설정(Preferences)을 선택합니다.
고급 탭 이동: 설정 창에서 고급(Advanced) 탭을 클릭합니다.
개발자 기능 켜기: 하단의 웹 개발자용 기능 보기(Show features for web developers) 옵션에 체크합니다.

이 옵션을 활성화하면 상단 메뉴 바에 개발자용(Develop) 메뉴가 새로 나타납니다.

2. 시뮬레이터 웹뷰 연결

이제 시뮬레이터에서 실행 중인 웹뷰 인스턴스에 Safari를 연결합니다.

앱 실행: Xcode Simulator에 앱이 실행되어 있고, 웹뷰 (localhost:3000) 화면이 표시되는 상태여야 합니다.
개발자용(Develop) 메뉴 클릭: Safari 상단 메뉴 바의 개발자용을 클릭합니다.
시뮬레이터 선택: 드롭다운 메뉴에서 현재 실행 중인 시뮬레이터 이름을 찾습니다 (예: iPhone 17).
웹뷰 인스턴스 선택: 시뮬레이터 이름 하위 메뉴에 나타나는 웹뷰 인스턴스를 클릭합니다.

보통 웹뷰의 소스 주소인 localhost:3000 또는 웹뷰가 포함된 앱 이름으로 표시됩니다.

3. Console 탭에서 로그 확인

웹뷰 인스턴스를 클릭하면 Safari의 Web Inspector (웹 검사기) 창이 새로 열립니다.

Console 탭 이동: Web Inspector 창 상단 탭에서 콘솔(Console) 탭을 선택합니다.
로그 확인: 웹뷰 내부의 Commerce Web (localhost:3000) 코드에서 찍는 모든 console.log 메시지들이 이 콘솔 창에 실시간으로 출력됩니다.

iOS와 마찬가지로, Android 시뮬레이터(에뮬레이터) 환경에서 console.log 값을 확인하는 방법도 로그의 출처에 따라 달라집니다. 특히 웹뷰 환경이 섞여 있으므로, 웹뷰 로그 확인을 위해 Chrome 개발자 도구를 사용해야 합니다.

1. React Native (네이티브) 코드의 console.log 확인

웹뷰 바깥의 React Native JavaScript 코드에서 찍는 로그는 iOS와 동일하게 두 곳에서 확인합니다.

A. Metro Bundler 터미널 (주요 위치)

$ npx react-native run-android 명령어를 실행했던 터미널 창에서 로그를 확인합니다.

• 용도: RN 앱 자체의 JavaScript 로그를 가장 빠르게 확인하는 방법입니다.
• 확인 방법: 터미널에 LOG 태그와 함께 로그가 실시간으로 출력됩니다.

B. Chrome 개발자 도구 (Debug Remote JS)

RN의 디버깅 메뉴를 통해 Chrome 개발자 도구에 연결하여 콘솔에서 로그를 확인합니다.

1. 개발자 메뉴 열기: Android 에뮬레이터에서 $\text{Ctrl} + \text{M}$ 또는 $\text{Cmd} + \text{M}$ (macOS)을 눌러 개발자 메뉴를 엽니다.
2. 디버깅 활성화: 메뉴에서 **Debug Remote JS**를 선택합니다.
3. 로그 확인: 자동으로 열린 Chrome 탭에서 F12 또는 $\text{Cmd} + \text{Option} + \text{J}$를 눌러 개발자 도구를 열고 Console 탭을 확인합니다.

2. 웹뷰 (Commerce Web, localhost:3000) 코드의 console.log 확인

Android 웹뷰 (WebView) 내부, 즉 localhost:3000에서 실행되는 웹 애플리케이션의 JavaScript 로그는 Chrome 개발자 도구를 통해 확인합니다. iOS에서 Safari를 사용했다면, Android에서는 Chrome을 사용합니다.

A. Chrome 설정 및 연결

1. Chrome 열기: Mac 또는 Windows에서 Chrome 브라우저를 실행합니다.
2. 원격 디버깅 페이지 접속: 주소창에 다음 URL을 입력하여 Chrome DevTools Remote Debugging 페이지에 접속합니다.
3. chrome://inspect
4. 장치 확인: chrome://inspect 페이지에서 Devices 섹션을 확인합니다.
   • 실행 중인 Android 에뮬레이터가 목록에 나타나야 합니다.
5. 웹뷰 인스턴스 찾기: 해당 에뮬레이터 아래에 현재 실행 중인 앱의 웹뷰 인스턴스 (주소: localhost:3000 또는 앱 패키지 이름)가 나타납니다.

B. 로그 확인

1. Inspect 클릭: 웹뷰 인스턴스 옆에 있는 inspect 버튼을 클릭합니다.
   • 새로운 Chrome 개발자 도구 창이 열립니다.
2. Console 탭 이동: 새로 열린 개발자 도구 창 상단에서 Console 탭을 선택합니다.
3. 로그 확인: 웹뷰 내부의 Commerce Web 코드에서 찍는 모든 console.log 메시지들이 이 콘솔 창에 실시간으로 출력됩니다.

3. 네이티브 (Java/Kotlin) 로그 확인

혹시 네이티브 모듈이나 Android 환경에서 발생하는 오류 로그, 또는 Java/Kotlin 코드의 로그를 봐야 한다면 Android Studio의 Logcat을 사용합니다.

1. Android Studio 열기: 프로젝트를 Android Studio로 엽니다.
2. Logcat 탭 선택: 하단 툴바에서 Logcat 탭을 선택합니다.
3. 로그 확인: 필터 옵션을 사용하여 앱 패키지 이름이나 로그 레벨(Debug, Info, Error 등)을 설정하면, Android 시스템 및 네이티브 코드의 상세 로그를 확인할 수 있습니다.

Android 웹뷰 로그 확인에는 **chrome://inspect**가 핵심입니다. 이 방법이 가장 정확하고 강력한 웹뷰 디버깅 수단입니다.