Expo Bare 프로젝트 버전 업그레이드 방법


개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview 

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich


Expo Bare 프로젝트 버전 업그레이드 방법

영리치 0 62 01.21 12:37

기존 엑스포

{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"expo": "^45.0.0",
"expo-application": "~4.1.0",
"expo-dev-client": "~1.0.1",
"expo-device": "~4.2.0",
"expo-linking": "~3.1.0",
"expo-notifications": "~0.15.4",
"expo-secure-store": "~11.2.0",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-updates": "~0.13.4",
"pod-install": "^0.1.37",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-get-random-values": "~1.8.0",
"react-native-purchases": "^4.6.1",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-web": "0.17.7",
"react-native-webview": "11.18.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "~0.67.6",
"typescript": "~4.3.5"
},
"private": true,
"name": "ㅎㅎㅎㅎ-expo",
"version": "1.0.0"
}



안드로이드 노트북에 잭 연결하고

expo run:android --device

에러 발생

java.lang.SecurityException: Shell does not have permission to access user 150

Couldn't start project on Android: Error running adb: Exception occurred while executing 'list':


해당 이슈 해결하기 위해 android 폴더 삭제 후

expo run:android --device

그래도 똑같은 에러가 뜸

Couldn't start project on Android: Error running adb: Exception occurred while executing 'list': java.lang.SecurityException: Shell does not have permission to access user 150 com.android.server.am.ActivityManagerService.handleIncomingUser:14872 android.app.ActivityManager.handleIncomingUser:4802 com.android.server.pm.PackageManagerShellCommand.translateUserId:3499 at com.android.server.am.UserController.handleIncomingUser(UserController.java:2672) at com.android.server.am.ActivityManagerService.handleIncomingUser(ActivityManagerService.java:14872) at android.app.ActivityManager.handleIncomingUser(ActivityManager.java:4802) at com.android.server.pm.PackageManagerShellCommand.translateUserId(PackageManagerShellCommand.java:3499) at com.android.server.pm.PackageManagerShellCommand.runListPackages(PackageManagerShellCommand.java:965) at com.android.server.pm.PackageManagerShellCommand.runListPackages(PackageManagerShellCommand.java:861) at com.android.server.pm.PackageManagerShellCommand.runList(PackageManagerShellCommand.java:720) at com.android.server.pm.PackageManagerShellCommand.onCommand(PackageManagerShellCommand.java:222) at com.android.modules.utils.BasicShellCommandHandler.exec(BasicShellCommandHandler.java:97) at android.os.ShellCommand.exec(ShellCommand.java:38) at com.android.server.pm.PackageManagerService$IPackageManagerImpl.onShellCommand(PackageManagerService.java:6978) at android.os.Binder.shellCommand(Binder.java:1085) at android.os.Binder.onTransact(Binder.java:903) at android.content.pm.IPackageManager$Stub.onTransact(IPackageManager.java:4962) at com.android.server.pm.PackageManagerService$IPackageManagerImpl.onTransact(PackageManagerService.java:6962) at android.os.Binder.execTransactInternal(Binder.java:1321) at android.os.Binder.execTransact(Binder.java:1280)


걍 npx expo start 로 서버 킨 뒤에

expo cli에서 주는 QR코드로 들어가서

Development Build로 열기

Expo Go로 열면 Bare 프로젝트의 RevenueCat등이 꼬임


yarn upgrade --latest

{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.8",
"expo": "^47.0.13",
"expo-application": "~5.0.1",
"expo-dev-client": "~2.0.1",
"expo-device": "~5.0.0",
"expo-linking": "~3.3.0",
"expo-notifications": "~0.17.0",
"expo-secure-store": "~12.0.0",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "~1.4.2",
"expo-updates": "~0.15.6",
"pod-install": "^0.1.37",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.1",
"react-native-gesture-handler": "~2.9.0",
"react-native-get-random-values": "~1.8.0",
"react-native-purchases": "^5.6.0",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.19.0",
"react-native-web": "0.18.10",
"react-native-webview": "11.26.0"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@types/react": "~18.0.27",
"@types/react-native": "~0.71.0",
"typescript": "~4.9.4"
},
"private": true,
"name": "ㅗㄹㅇ-expo",
"version": "1.0.0"
}


잭 연결 후

npx expo run:android


Error: /android/gradlew exited with non-zero code: 1

또 에러 발생 원인이 무엇인지 모르겠다

expo upgrade 46
47 버전에서 알 수 없는 에러 발생하니 46 버전으로 다운그레이드

그리고 react 18 버전도 뒤가 구리니 

yarn add react@^17

로 다운그레이드 하자


그리고 이 상태로 

npx expo run:android

Exception occurred while executing 'list':

에러가 발생한다


npx expo start 로 그냥 서버를 키자

위에 명령어 실행해보니 다시 React 버전을 올리란다

npx expo install react@18.0.0 react-dom@18.0.0

로 리액트 버전을 올린다


npx expo start로 다시 서버를 키고 QR 코드를 인식하자

Development Build로 실행하기


reanimated 에러가 발생한다.

yarn add react-native-reanimated

https://www.inflearn.com/questions/676573/%EC%97%90%EB%9F%AC-%EB%8F%84%EC%9B%80-%EC%9A%94%EC%B2%AD

위 링크에서 해결


Purchases.setDebugLogsEnabled(true);
if (Platform.OS == "android") {
Purchases.setup(APIKeys.google);
} else {
Purchases.setup(APIKeys.apple);
}


import Purchases, { PurchasesOffering } from "react-native-purchases";


에서 에러 발생


와 RevenueCat 이 븅신새끼들 그새 코드 바꾼 거 봐봐

진짜 개그지 같은 놈들


import { Platform } from 'react-native'; //... export default class App extends React.Component { componentDidMount() { Purchases.setDebugLogsEnabled(true); if (Platform.OS === 'ios') { await Purchases.configure({apiKey: "public_ios_sdk_key"}); } else if (Platform.OS === 'android') { await Purchases.configure({apiKey: "public_google_sdk_key"}); // OR: if building for Amazon, be sure to follow the installation instructions then: await Purchases.configure({ apiKey: "public_amazon_sdk_key", useAmazon: true }); } } }


https://www.revenuecat.com/docs/getting-started-1#section-configure-purchases

위에서 보다시피 코드가 바뀜


const configurePurchase = async () => {
if (Platform.OS === "ios") {
await Purchases.configure({ apiKey: APIKeys.apple });
} else if (Platform.OS === "android") {
await Purchases.configure({ apiKey: APIKeys.google });
}
};

// Purchases.setDebugLogsEnabled(true);
// if (Platform.OS == "android") {
// Purchases.setup(APIKeys.google);
// } else {
// Purchases.setup(APIKeys.apple);
// }

const fetchData = async () => {
const offerings = await Purchases.getOfferings();
setCInAppPurchaseCurrentOffering(offerings.current);
};

configurePurchase().catch(console.log);
fetchData().catch(console.log);


위와 같이 Configure 먼저 해주고 offerings 받아오자


이렇게 하니까 잘된다

해결이 되었다.


걍 너무 잘되니까 걍 하는 김에 expo 버전 한 단계 더 올려보자

expo 걍 짜증나긴 한데 어차피 46 버전도 0번대 여서 쓰레기 같다

걍 47로 올려버리자


{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.8",
"expo": "~46.0.19",
"expo-application": "~4.2.2",
"expo-dev-client": "~1.3.1",
"expo-device": "~4.3.0",
"expo-linking": "~3.2.4",
"expo-notifications": "~0.16.1",
"expo-secure-store": "~11.3.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-updates": "~0.14.7",
"pod-install": "^0.1.37",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-gesture-handler": "~2.5.0",
"react-native-get-random-values": "~1.8.0",
"react-native-purchases": "^5.6.0",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-web": "~0.18.7",
"react-native-webview": "11.23.0"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@types/react": "~18.0.0",
"@types/react-native": "~0.69.1",
"typescript": "^4.6.3"
},
"private": true,
"name": "ㅎㅇㅎㅇㄴ-expo",
"version": "1.0.0"
}


expo update 47


npx expo run:android

로 다시 빌드해서 실행해보자


Error: Exception occurred while executing 'list':

또 다음과 같은 에러 발생

npx expo start --clear
로 서버 켜기

Development Build로 켠다


아주 잘 실행이 된다.

테스트 할 것들

1. 결제

2. 앱푸쉬


앱푸쉬 토큰은 잘됨

결국에 또 결제가 문제인데 찾아보니까 이 레비뉴캣 진짜 나쁜놈들이

또 코드 바꿨음

아니 코드를 이렇게 자주 바꾸면 어쩌라는거임

진짜 개판임 무튼


const selectedPackage = inAppPurchaseCurrentOffering.availablePackages.find(
(pkg) => pkg.product.identifier == item
);
if (selectedPackage) {
setInAppPurchaseisPurchasing(true);
console.log(selectedPackage);
try {
const { purchaserInfo, productIdentifier } =
await Purchases.purchasePackage(selectedPackage);

if (purchaserInfo) {
console.log("인앱 결제 성공");
console.log(purchaserInfo);
const revenueCatId =
purchaserInfo.nonSubscriptionTransactions.pop().revenueCatId;

const store = purchaserInfo.entitlements.active["pro"].store;

webRef.current.postMessage(
JSON.stringify({
type: "endInAppPurchase",
message: "success",
pkg: item,
revenueCatId: revenueCatId,
platform: store,
})
);
} else {
console.log("인앱 결제 실패");
console.log(purchaserInfo);
webRef.current.postMessage(
JSON.stringify({
type: "endInAppPurchase",
message: "fail",
pkg: item,
})
);
}



위에 부분을 변경해주어야 한다.

purchaserInfo를 customerInfo로 변경하자.

아 진짜 그만좀 코드좀 바꿔라 이 쓰레기 같은 애플 구글들아 거기에 딸려있는 레비뉴캣까지 코드 바꿔대네 진짜 ㅋㅋㅋ


if (selectedPackage) {
setInAppPurchaseisPurchasing(true);
console.log("selectedPackage", selectedPackage);
console.log("product ID", selectedPackage?.product?.identifier);
try {
const { customerInfo, productIdentifier } =
await Purchases.purchasePackage(selectedPackage);

console.log("customerInfo", customerInfo);
console.log("productIdentifier", productIdentifier);

if (customerInfo) {
console.log("인앱 결제 성공");
console.log(customerInfo);
const revenueCatId =
customerInfo.nonSubscriptionTransactions.pop().revenueCatId;

const store = customerInfo.entitlements.active["pro"].store;

webRef.current.postMessage(
JSON.stringify({
type: "endInAppPurchase",
message: "success",
pkg: item,
revenueCatId: revenueCatId,
platform: store,
})
);
} else {
console.log("인앱 결제 실패");
console.log(customerInfo);
webRef.current.postMessage(
JSON.stringify({
type: "endInAppPurchase",
message: "fail",
pkg: item,
})
);
}


안드로이드는 이걸 고치니까 잘 된다

아이폰을 한 번 수정해보자


expo run:ios --device

를 실행한다


Failed to build iOS project. "xcodebuild" exited with error code 65.

가 뜨면서 또 안된다

https://positiveko-til.vercel.app/til/react-native/error65.html#_1-xcode%E1%84%8B%E1%85%A6%E1%84%89%E1%85%A5-derived-data-%E1%84%89%E1%85%A1%E1%86%A8%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5

아이폰 코코아팟 관련된 에러인가 보다 ios 폴더 삭제 후 다시 들어가서 podinstall을 해준다


다시

expo run:ios --device

를 해본다


flipper관련 된 게 오래되었다고 하니 아래로 변경해준다

구글 검색에 뜨는 블로그들 다 오래되었다

:flipper_configuration => !ENV['CI'] ? FlipperConfiguration.enabled : FlipperConfiguration.disabled,


그 사이에 또 코드 바뀐 거 봐라 ㅋㅋ


이렇게 해도 또 같은 오류가 뜬다

https://docs.expo.dev/development/create-development-builds/

로 다시 제대로 빌드를 해보자

eas device:create


아이폰에

위에를 하니 프로비저닝 프로필을 설치한다

와 진짜 애플놈들 별 짓을 다 해놨다


eas build --profile development --platform ios

를 실행한다


Failed to patch capabilities: [ { capabilityType: 'APPLE_ID_AUTH', option: 'OFF' } ]

✖ Failed to sync capabilities com.dyedye.dyedye

    Error: Unexpected error occurred while attempting to update capabilities for app "com.dyedye.dyedye".

    Capabilities can be modified manually in the Apple developer console at https://developer.apple.com/account/resources/identifiers/bundleId/edit/27P237ABD6.

    Auto capability syncing can be disabled with the environment variable `EXPO_NO_CAPABILITY_SYNC=1`.

    There is a problem with the request entity - The bundle '27P237ABD6' cannot be deleted. Delete all the Apps related to this bundle to proceed.


뜨면서 안된다

EXPO_NO_CAPABILITY_SYNC=1 eas build --profile development --platform ios

로 실행한다


빌드 중인데, 아마도 빌드를 한 뒤 엑스포가 해당 빌드를 가지고 있고,

인터넷으로 해당 빌드를 다운 받아서 실행할 수 있도록 하는 것 같다

빌드 뒤 npx expo start --dev-client

를 통해서 해당 빌드를 내 핸드폰에서 실행할 수 있는 듯 보인다.

현재 빌드중이다.


대한민국 현재 오후 5시는 미국 오전 2시 47분으로

미국과 완벽히 반대되는 시간대에 있다

깨어있는 미국 형님들은 전부 Expo를 쓰므로,

빌드에 큐가 심각할 정도로 잡혀있다

우선순위 큐에 들어가려면 돈 내야하는 데 아깝다

근데 한국인이라면 지금처럼 오후 5시 혹은 오후 6시에 빌드하면 아주 잘된다


근데 빌드 하는 중에 첨언하자면 어플 개발은 진짜 쓰레기 같다

이건 뭐 버그를 처리하는 과정에서 경력도 안된다

어차피 애플 구글이 지 ㅈ대로 변경하는 거라서

그거 이슈 해결해봤자 남는 거 없다

그냥 시간 날리는거다

어플 개발자들의 숙명이다 왜 그렇게 사는 지 모르겠다

그나마 플러터가 낫다고는 하는데

나는 플러터도 잘 모르겠다

어플 개발이 짜치는 게 존나 많다


특히나 뭔 시발 아이폰은 프로비저닝 프로필, 뭐 크레덴셜즈 해가지고

존나게 설정할 게 많은데

이거 설정이 좆같은데 플러터는 구글에서 안해주는 것으로 알고 있다

반면에 엑스포는 이 좆같은 설정 다 알아서 해준다

애플의 좆같음을 덜어주는 것 만으로도 엑스포가 가치가 있다

그래서 미국 성님들이 엑스포를 쓰고

국내 로컬 변방 오랑캐들은 플러터를 쓴다

물론 리액트 네이티브 개발을 나처럼 엑스포 배어 프로젝트로 전환해서 하면 진짜 존나 짜치는 거 이렇게 보면서 해야한다

오늘도 한나절이 가고 있다 진짜 ㄹㅇ 명절에 이게 뭐냐


Development Build가 완료되었다

QR코드로 접속해서 설치해준다

그리고

expo start --dev-client

로 서버를 킨다

들어간다

잘 된다


안드로이드와 ios 둘 다 잘되는 것을 확인했으니

빌드를 생성하자


빌드 생성 전에 버전 정보를 올려준다

EXPO_NO_CAPABILITY_SYNC=1 eas build


빌드 생성중







Comments


개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview 

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich


Category
Magazine
훈남/훈녀
 
 
 
상점
Facebook Twitter GooglePlus KakaoStory NaverBand