🥸🔎 버그수정 일지 2025-02-18

...2차시도 [문제 구체화]에 이어서

👉🏻 expo에서 확인결과 Android build를 production으로 했다.

 

---

1️⃣ Production 빌드와 Expo Go의 충돌 이해하기

• eas build --profile production은 Standalone APK/ABB를 만들어서 배포용으로 최적화한다.
• 이 프로덕션 빌드는 개발 서버(Metro 번들러)에 연결하지 않는다.
• 대신, 번들 파일을 Android 프로젝트의 assets 폴더에 포함한다..
• 그러나 expo start a는 Expo Go를 사용해 로컬 개발 서버에서 JavaScript 번들을 다운로드하려 한다.
  👉 결과: Production 빌드가 설치된 상태에서는 Expo Go와의 충돌로 "Reloading..."에서 멈춘다.

 

✨ Production 빌드

• 우리가 앱을 만들 때, "개발 중인 앱"과 "완성된 앱(Production 빌드)"은 다르다.
• "개발 중인 앱"은 계속해서 고칠 수 있고, 컴퓨터에서 바로바로 바뀐 걸 확인할 수 있다.
• 하지만 "완성된 앱(Production 빌드)"은 더 이상 더 이상 Expo Go를 사용하지 않고, 수정이 불가능하다.

 

👉 Expo Go

• Expo Go는 우리가 만든 앱을 빠르게 확인할 수 있게 도와주는 특별한 앱이다.
• 컴퓨터에서 앱을 만들고, Expo Go가 그 앱을 바로 안드로이드폰(또는 에뮬레이터)에서 열어준다.
• npx expo start a 명령을 사용하면, 컴퓨터에서 번들(= 앱 코드 묶음)을 만들고, Expo Go에서 그걸 열어야 한다.
  • 하지만, 애뮬레이터에 "완성된 앱"이 설치되어 있다면, 애뮬레이터는 "개발중인 Expo Go"가 아니라 "완성된 앱'을 열려고 한다. (하지만 완성 된 앱은 컴퓨터에서 새로운 코드를 새로 받지 않는다.) 👉🏻 앱이 Reloading에서 멈춰버린다.

 

✨  결론

: 애뮬레이터는 "완성된 앱"에서 새로운 코드를 받으려고 하는데, "완성된 앱"은 새로운 걸 받지 않고 그냥 가만히 있어서, 번들링 100%완료 후에 앱이 Reloading에서 멈춰버리는 문제가 발생했다.

 

 

---

2️⃣ 에러 추적을 위한 adb logcat 사용하기

👉 안드로이드에서 무슨 일이 일어나는지 확인하려면 adb logcat으로 에러 로그를 확인할 수 있다.

✨ 명령:

adb logcat *:E

👉 이 명령은 오류 로그만 필터링한다.
👉 흔히 나올 수 있는 에러:

• Unable to load script from assets 'index.android.bundle' → 프로덕션 번들에서 JS 파일을 찾지 못함.
• Network request failed → 안드로이드 에뮬레이터가 개발 서버에 연결하지 못함.
• Expo Go is not installed → Expo Go 앱이 없어서 번들을 로드하지 못함.

---

3️⃣ 에뮬레이터에서 Production APK 제거

👉 안드로이드 에뮬레이터에서 "완성된 앱(프로덕션 빌드)"를 제거해야 한다. 이렇게 하면 애물레이터가 Expo Go를 다시 사용할 수 있게 된다.

✨ 앱 제거 명령:

adb uninstall <your.app.bundle.id>

👉 your.app.bundle.id는 app.json 또는 app.config.js에서 확인할 수 있다.
예시:

{
  "expo": {
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

👉 이렇게 하면 에뮬레이터에서 Production APK가 삭제된다.

---

4️⃣ Expo Go 재설치

✨ 에뮬레이터에서 Expo Go가 깨졌거나 오래된 경우, 최신을 새로 설치한다.

adb uninstall host.exp.exponent
npx expo install:android

 

---

5️⃣ adb reverse로 네트워크 연결 확인

👉 프로덕션 APK가 삭제된 이후, 에뮬레이터가 개발 서버에 연결할 수 있도록 adb reverse를 설정한다.

adb reverse tcp:8081 tcp:8081
adb reverse tcp:19000 tcp:19000
adb reverse tcp:19001 tcp:19001

👉 이 명령은 안드로이드 에뮬레이터가 localhost에서 Metro 번들을 불러올 수 있게 해준다.

---

✅ 6️⃣ Metro 번들러 캐시 삭제

👉 여전히 앱이 안 열리면 Metro 번들러의 캐시를 깨끗이 정리한다.

expo r -c
rm -rf .expo
rm -rf node_modules/.cache

👉 그런 다음 다시 실행!

npx expo start a

---

✅ 7️⃣ 마지막으로... 개발용 EAS 빌드로 전환하기!

👉 앞으로 다시 개발을 원활히 진행하려면 production build 대신 development build를 사용해야 한다.

✨ eas.json에서 개발 프로필을 수정합니다.

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "production": {
      "developmentClient": false,
      "distribution": "store"
    }
  }
}

👉 그런 다음 EAS 개발 빌드를 실행한다.

eas build --profile development --platform android

👉 이렇게 하면 다시 Expo Go와 함께 사용할 수 있는 개발용 APK를 생성할 수 있다.

 

 

 

 

참고 레퍼런스

https://medium.com/@yangga0070/react-native-expo-%EB%B2%84%EC%A0%84-%EC%97%85%EA%B7%B8%EB%A0%88%EC%9D%B4%EB%93%9C-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-d83d3d9414e7

React Native (Expo) 버전 업그레이드 지옥 탈출하기

 

 

 

 

 

다음편 예고,,,,