✅ 오늘 배운 것
그저께 발생한 부분에서 아직 막혀있다. package.json 파일의 scripts 변수 안의 값들 중 ios 에뮬레이터에서 앱을 실행시키는 명령어인 'npm run ios'를 입력했다. (정확히는 이렇게 입력하면 그대로 실행되는 게 아니라, 해당 스크립트 파일에 key-value로 명시된 실제 값인 'npx expo run:ios' 명령어가 실행된다.
여러 로그가 쭉 나오더니 에러 로그가 나오면서 또 실행에 실패했다.
단순히 해당 파일을 만들어야 하는 오류는 아니라는 생각이 들어서, 또 어쩌면 Xcode 등과 관련된 문제 같아서 GPT 찬스를 썼다. GPT 피셜 React Native 버전과 패키지 사이의 종속성 오류거나, CocoaPods(이 친구의 정체를 아직도 모르겠다) 설정과 관련이 있을 수 있다고 한다. 그래서 일단 알려준 명령어들을 잘 따라해 보았다.
우선 Podfile을 업데이트 하고 종속성을 설치해 보았다. (여기서 말하는 '종속성'의 구체적인 의미는 무엇일지 모르겠다..)
cd ios
pod deintegrate
pod install
다시 deintegrate한 pod를 install 해 주었다. 이 과정에서 설정 에러가 해결될 가능성이 있을 수도 있나보다. 다시 'pod install'을 실행하니 웬걸 오류가 난다.
GPT 피셜, hermes-engine(js 엔진이라고만 알고 있다)의 버전이 Podfile.lock(podfile 의존성 패키지들을 관리하는 파일인 것으로 보인다)에 기록된 버전과 달라서 나는 오류였다고 한다. 그리고 이 오류가 난 원인은 CocoaPods에서 종속성 관리를 할 때 충돌이 생겨서일 것이라고 한다. (아니 왜...?) 근본 원인이 무엇인진 아직도 모르겠지만, 우선 알려준 명령어로 실행해 보았다.
오류 메시지에 나온 것처럼 뒤에 특정 옵션을 붙여주면 pod install을 할 때 hermes-engine 관련 종속성만 업데이트하고 cocoapods의 전체 repo 업데이트는 생략한다고 한다.
pod update hermes-engine --no-repo-update
미묘하게 또 다른 에러가 났다. 아까와 비슷하게 CocoaPods에서 Sentry/HybridSDK와 관련된 버전을 찾을 수 없다는 말이었다. 그런데 여기서 추천해 준 명령어를 다시 입력해 보았다.
pod update Sentry/HybridSDK
그랬더니 이번에는 'pod install'을 처음 실행할 때 났던 오류가 나면서 이미 실패했던 명령어를 다시 추천해 주는 게 아닌가. 오류가 돌고 돈다.
다시 한 스텝 이전으로 돌아가서 GPT가 알려준 또 다른 방법으로 접근해 보자. 아까 전에 'pod update hermes-engine --no-repo-update' 명령어 말고도 다른 명령어를 알려줬었다. Podfile.lock에서 계속 충돌이 발생하는 것 같으니 이걸 지우고 다시 'pod install'을 시도해 보라는 의미였다.
rm Podfile.lock
pod install
다행히도 해당 방법은 성공하였다. 그렇다면 다시 한 스텝 더 돌아가서, Podfile을 업데이트하고 종속성을 설치해 주었으니 그 다음 스텝을 진행해 보자. 그 다음 스텝은 패키지 의존성과 관련된 문제였는데, node_module이나 pods에서 일부 파일 누락의 가능성(대체 왜인진 모르겠다)이 있으므로 지웠다가 다시 설치하라는 답을 주었다. 일단 해보자.
rm -rf node_modules
rm -rf ios/Pods
npm install
cd ios
pod install
그 다음 방법은 Xcode의 설정을 확인하는 것이었다. 여기서 RN 관련 설정이 잘 되어있는지도 혹시 모르니 확인해 보자. ios 디렉토리에서 해당 프로젝트의 .xcworkspace 파일을 열어주자.
cd ios/onestep.xcworkspace
여기서 확인하려는 설정은 마치 SDK 경로가 잘 설정되어 있는지를 확인하는 것과 비슷했다. 다음과 같은 화면에서 'Header Search Paths'가 올바르게 설정되었는지를 확인하려고 했다.
다음과 같은 경로가 있는지를 확인해보자.
$(SRCROOT)/../node_modules/react-native/React/**
$(SRCROOT)/../node_modules/react-native/ReactCommon/**
$(SRCROOT)/../node_modules/react-native/Libraries/**
확인해 보니 ${} 변수 값 중에서 SRCROOT로 시작하는 경로들이 없었다. 그래서 위의 값들을 추가해 주었다.
아래와 같이 설정해 주고, 설정도 'recursive'로 바꿔주었다.
그리고 XCode의 빌드 캐시를 정리해 주었다. XCode에서 Product > Clean Build Folder를 클릭해 주었다.
그리고 다시 ios 에뮬레이터에서 앱을 로드하는 명령어를 실행해 주었다.
npm run ios한참 로그가 쭉 나오더니 이번에도 fail이 났다. 아까와 오류 코드는 똑같고 세부 메시지는 달랐다.
GPT에게 도움을 요청했더니 또 세부적인 여러 방법을 알려주었다. 오류가 돌고 돌지는 않아서 다행인데, 언제까지 해야 되는지는 좀 의심스럽다. 암튼 진행해 보자.
GPT가 제시한 원인은 두 가지였다.
- reanimated 관련 라이브러리 설치에서 문제가 있었다. (오류 1과 관련)
- iOS 빌드 설정 및 환경설정 충돌 문제(또...?)의 가능성이 있다. (오류 2와 관련)
오류 1과 관련된 문제부터 해결해보자. 크게 다섯 가지의 단계가 있었다.
우선 npm install로 문제가 발생한 라이브러리를 설치해 주었다.
npm install react-native-reanimated
그 후 ios의 pod를 업데이트했다.
cd ios
pod install
루트 디렉토리의 babel.config.js 파일에 코드를 추가해서 방금 설치한 라이브러리와 관련된 플러그인을(무슨 역할을 하는 플러그인인지는 모르겠다) 프로젝트에서 사용할 수 있도록 명시해줬다.
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['react-native-reanimated/plugin'], // 해당 코드를 추가했다
[
'module-resolver',
{
root: ['./'],
alias: {
'@': './',
},
},
],
],
};
};
그리고 XCode 툴을 열어서 위에서 한 것처럼 Build Settings > Header Search Path 설정에 다음과 같은 루트를 추가해 주었다. 해당 애니메이션 관련 라이브러리를 사용하기 위해서 필요한 모양이다.
마지막으로 캐시를 정리해 주었다.
watchman watch-del-all
npm start --reset-cache
cd ios && xcodebuild clean
그 과정에서 또 두 가지의 에러가 났다. 아직 앱을 iOS 에뮬에서 띄우지도 않았는데 말이다. 이쯤되면 발생한 에러들을 트리로 그려서 dependency를 파악하는 것도 어려울 정도로 히스토리가 복잡해진다...!^^
첫 번째는 'npm start --reset-cache' 명령어를 실행하면서 난 뉴 에러들이었다.
두 번째 캡처의 경우는 코드에서 뭔가 잘못된 설정이 되어있는 것 같아서 내가 직접 수정해야 할 것 같으니, 우선 첫 번째 오류(5-1-1)만 해결해보자. GPT 피셜 해당 라이브러리의 react native 코드와 js 코드가 서로 다른 버전으로 설치되어있을 때 나는 오류라고 한다. 나는 그냥 npm install을 한 것밖에 없는데 왜 저러는지, 그리고 이 말이 구체적으로 무슨 말인지는 정확히 이해하진 못했다.
npm list react-native-reanimated해당 명령어를 입력하면 관련 라이브러리가 어떻게 설치되었는지를 보여주는 것 같다.
버전이 다른지를 확인하라는데, 내가 보기엔 버전이 모두 같다! 뭘 더 해야 하지 싶다. 일단은 GPT가 권장하는 대로 해당 라이브러리의 최신 버전으로 한번 바꿔보자.
npm install react-native-reanimated@latest
그리고 다시 문제의 명령어였던 'npm start --reset-cache'를 실행했다. 그런데 위에서와 똑같은 오류가 다시 나는 게 아닌가. 에러 메시지에서 관련 링크를 주길래 들어가봤다. 링크에서는 아래와 같은 솔루션을 주었다.
일단 저녁을 먹고와서 다시 해보자.
✅ 궁금한 점
1. cocoapods와 hermes-engine은 어떤 관계가 있을까? 위에서 pod install을 할 때 --no-repo-update를 붙이는 옵션이 왜 오류 해결에 영향을 주는지 의문이다.
2. pod deintegrate는 pod를 지우는 것과는 다른 명령어일까?
3. Xcode에서 header search path 설정할 때 recursive와 non-recursive 옵션의 차이는 무엇이고 왜 recursive로 설정해야 할까?
4. 'npm outdated'는 구체적으로 어떤 기능을 하는 명령어일까? 그냥 npm으로 설치된 라이브러리 중 outdated된 라이브러리들을 보여주는 용도인지 궁금하다.
5. 다른 팀원의 컴퓨터에서는 잘 동작하는데 이번에 내가 ios 에뮬레이터를 처음 설치하고 앱을 실행하려고 하면서 이런 많은 문제들이 발생한 상황이다. 이런 환경설정 dependency? 암튼 프론트에서 실행환경을 통일 혹은 통제할 수 있는 방법이 있을까? 이런 과정이 앞으로 틈틈이 있다고 생각하면 좀 많이 성가실 것 같다.
6. watchman을 직접 설치한 기억이 없는데, 물론 내 기억이 잘못되었을 수도 있다. 암튼 watchman은 RN과 직접적으로 연관된 것은 아닌 툴인지, 아님 연관된 어떤 툴인지 궁금했다.
'개발 일기장 > SWM Onestep' 카테고리의 다른 글
| 20241024 TIL: React Native로 ios 에뮬레이터에서 애플로그인 하기 [진행중] (0) | 2024.10.24 |
|---|---|
| 20241023 TIL: React Native로 ios 에뮬레이터에서 애플로그인 하기 [진행중] (1) | 2024.10.24 |
| 20241020 TIL: React Native에서 애플 로그인하기 [진행중] (0) | 2024.10.21 |
| 20241017 TIL: React Native에서 애플 로그인 기능 개발하기 [진행중] (3) | 2024.10.17 |
| 20241015 TIL: React Native에서 Django로 end-to-end test 작성하기 [진행중] (3) | 2024.10.15 |
