React Native ios 빌드 실패 해결과정 [ TIL / React Native ]

배경

새로운 프로젝트를 웹이 아닌 앱으로 유저에게 제공할 기획을 세우게 되어서 앱을 개발할 방법을 찾고 있었다. 특히 본인이 React를 사용해서 여러 웹개발 프로젝트를 진행해 왔기 때문에 이 상황을 유리하게 사용하고 싶었다. 그래서 생각해낸 것이 바로 React Native이다. 이미 많은 사람들이 알고 있을지 모르지만 React Native는 ios와 Android의 앱 개발을 React 프레임워크를 기반으로 개발을 해낼 수 있게 만든다. 표면적으로는 React 기반의 JavaScript 코드가 돌아가면서, 브릿지를 두어 ios나 Android의 Native 컴포넌트들과 메시지를 통해 상호작용을 한다고 한다. Flutter를 사용할까 잠깐 고민했지만, 이제 막 커뮤니티가 성장하는 단계라 이후 새로운 개발자를 뽑을 때 충분히 큰 풀이 형성되어 있지 않을까 우려되어 차라리 React에서 넘어오기 편한 React Native로 정하기로 마음 먹었다.

일단 어떤 프레임워크를 사용할지 정해진 이후에는 빠르게 사용을 시도해봤다. 문제는 오히려 여기서 터져나왔다. 지금까지 웹개발 상으로는 문제가 없었던 개발-빌드 과정이 React Native를 사용하면서 생겨난 것이다. 특히 ios 빌드에서 엄청나게 많은 에러가 발생했다.

환경

우선 사용하고 있는 환경을 먼저 소개하려고 한다.

• mac Intel core i9
• Ventura 13.5
• ruby 3.2.2 (brew로 설치함)(system 2.6)
• xcode 14.3.1

23년 8월 15일 현시점으로는 가장 최신의 환경만 설치가 되어 있다. 그리고 React Native의 버젼은 0.72로 또한 현시점 최신 버젼이다.

문제

1. npx pod-install 중 permission denied @rb_sysopen 문제
   이 문제는 사실 간단하게 풀렸다. 권한 문제가 나타난 디렉터리로 가서 관련 디렉터리의 소유권을 현재 나의 mac 유저에게 넘겨주는 작업을 했다. 터미널 명령어는 다음과 같다.

chown -R [user 명] [디렉터리 명]

2. clang-12: error 및 CompileC 빌드 Failed
   
   이게 정말 나를 끝까지 괴롭혔다. 현재도 해결 중인 문제다.
   원래는 yarn ios 라는 명령어를 프로젝트 디렉터리에서 입력만 해줘도 빌드가 성공적으로 잘 되어야 한다. 하지만 나같은 경우는 위에 제시한 이미지처럼 문제가 발생했다. 구글링에서 제공해주는 해결방법은 다음이 있었다.되는 것 같다가도 이 방법으로는 해결이 안되었다. 만약 된다고 쳐도 새로운 종속성을 추가할 때마다 똑같은 작업을 하면 빌드 하나 하는데 시간이 너무 오래걸렸다.
   또다른 방법은 다음과 같다.하지만 이미 본인의 mac에서는 xcode에서 제공하는 command line tool 설정이 잘 되어 있는 상태였다. 문제 해결에 도움이 되지 않았다.
3. sudo xcode-select --switch /Applications/Xcode.app
4. rm -rf ~/Library/Caches/CocoaPods rm -rf Pods rm -rf ~/Library/Developer/Xcode/DerivedData/* pod deintegrate pod setup

해결 방법

프로젝트에서 ios 폴더의 [프로젝트].xcworkspace를 xcode에서 띄어서 build 하는 방식으로 우선 해결을 봤다.
어플리케이션 화면의 변경은 문제 없이 시뮬레이터로 확인할 수 있게 되었지만 react native에서 제공하는 강력한 디버깅 툴들을 사용하지 못한다는 단점이 있었다. 또한 이렇게 해서 간신히 빌드한 프로젝트도 가끔씩 문제가 생길 때가 있었다. 그렇기에 다른 방법을 찾아볼 필요가 있다.