[Mac] React Native 개발 환경 셋팅 이슈 해결노트

🇰🇷👩🏻‍💻 otterji (수달하는 코딩)·2022년 5월 2일
0

아래 링크에서 엄청나게 잘 정리해주셨다..
그대로 보고 따라했는데.. 아오스랑 안드 에뮬레이터 돌리는거에서 아주 애먹고 헤맸다ㅠ

개발 환경 셋팅하기

하던 도중에 cocoadpods가 설치가 안되어서, 다음과 같이 해결했다.
참조 링크

$ xcode-select --install

근데 다시 설치하라 떴다

✔ CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you want to install it?
› Yes, with Homebrew
를 선택했는데,

/Users/rohyoungji/TestApp/node_modules/metro-hermes-compiler/src/emhermesc.js:77
throw ex;
^

RuntimeError: abort(Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd .//Users/rohyoungji/TestApp/ios && pod install".
CocoaPods documentation: https://cocoapods.org/). Build with -s ASSERTIONS=1 for more info.
    at process.abort (/Users/rohyoungji/TestApp/node_modules/metro-hermes-compiler/src/emhermesc.js:402:15)
    at process.emit (events.js:400:28)

이런 에러가 떴다ㅠ

그래서 봤더니 뭔가 주소가 잘못 적혀있었던 것 같더라

cd .//Users/rohyoungji/TestApp/ios && pod install

이걸 입력하라는데.. 저 주소가 딱봐도 매우 잘못됨
(어디에 저렇게 입력되어 있는걸까? 찾아서 고치고 싶은데 출처가 어디인질 모르겠다!)

그래서 그냥 직접 저 디렉토리 들어가서 

pod install

을 했다. 근데 이번엔 대빵 이런 에러가 떴다

[!] /bin/bash -c
set -e
#!/bin/bash
# Copyright (c) Meta Platforms, Inc. and affiliates.
#
# This source code is licensed under the MIT license found in the
# LICENSE file in the root directory of this source tree.

set -e

PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}"
CURRENT_ARCH="${CURRENT_ARCH}"

if [ -z "$CURRENT_ARCH" ] || [ "$CURRENT_ARCH" == "undefined_arch" ]; then
    # Xcode 10 beta sets CURRENT_ARCH to "undefined_arch", this leads to incorrect linker arg.
    # it's better to rely on platform name as fallback because architecture differs between simulator and device

    if [[ "$PLATFORM_NAME" == *"simulator"* ]]; then
        CURRENT_ARCH="x86_64"
    else
        CURRENT_ARCH="arm64"
    fi
fi

if [ "$CURRENT_ARCH" == "arm64" ]; then
    cat <<\EOF >>fix_glog_0.3.5_apple_silicon.patch
diff --git a/config.sub b/config.sub
index 1761d8b..43fa2e8 100755
--- a/config.sub
+++ b/config.sub
@@ -1096,6 +1096,9 @@ case $basic_machine in
 		basic_machine=z8k-unknown
 		os=-sim
 		;;
+	arm64-*)
+		basic_machine=$(echo $basic_machine | sed 's/arm64/aarch64/')
+		;;
 	none)
 		basic_machine=none-none
 		os=-none
EOF

    patch -p1 config.sub fix_glog_0.3.5_apple_silicon.patch
fi

export CC="$(xcrun -find -sdk $PLATFORM_NAME cc) -arch $CURRENT_ARCH -isysroot $(xcrun -sdk $PLATFORM_NAME --show-sdk-path)"
export CXX="$CC"

# Remove automake symlink if it exists
if [ -h "test-driver" ]; then
    rm test-driver
fi

# Manually disable gflags include to fix issue https://github.com/facebook/react-native/issues/28446
sed -i '' 's/\@ac_cv_have_libgflags\@/0/' src/glog/logging.h.in
sed -i '' 's/HAVE_LIB_GFLAGS/HAVE_LIB_GFLAGS_DISABLED/' src/config.h.in

./configure --host arm-apple-darwin

cat << EOF >> src/config.h
/* Add in so we have Apple Target Conditionals */
#ifdef __APPLE__
#include <TargetConditionals.h>
#include <Availability.h>
#endif

/* Special configuration for ucontext */
#undef HAVE_UCONTEXT_H
#undef PC_FROM_UCONTEXT
#if defined(__x86_64__)
#define PC_FROM_UCONTEXT uc_mcontext->__ss.__rip
#elif defined(__i386__)
#define PC_FROM_UCONTEXT uc_mcontext->__ss.__eip
#endif
EOF

# Prepare exported header include
EXPORTED_INCLUDE_DIR="exported/glog"
mkdir -p exported/glog
cp -f src/glog/log_severity.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/raw_logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/stl_logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/vlog_is_on.h "$EXPORTED_INCLUDE_DIR/"

patching file config.sub
checking for a BSD-compatible install... /usr/bin/install -c
checking whether build environment is sane... yes
checking for arm-apple-darwin-strip... no
checking for strip... strip
checking for a thread-safe mkdir -p... ./install-sh -c -d
checking for gawk... no
checking for mawk... no
checking for nawk... no
checking for awk... awk
checking whether make sets $(MAKE)... yes
checking whether make supports nested variables... yes
checking for arm-apple-darwin-gcc... /Library/Developer/CommandLineTools/usr/bin/cc -arch arm64 -isysroot
checking whether the C compiler works... no
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'
/Users/rohyoungji/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-476ee/missing: Unknown `--is-lightweight' option
Try `/Users/rohyoungji/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-476ee/missing --help' for more information
configure: WARNING: 'missing' script is too old or missing
configure: error: in `/Users/rohyoungji/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-476ee':
configure: error: C compiler cannot create executables
See `config.log' for more details

참내.. 그래서 스택 오버플로우에서 다음과 같은 해답을 얻었다 ㅎ
https://stackoverflow.com/questions/68565356/xcrun-error-sdk-iphoneos-cannot-be-located

xcode 설정을 바꿔주면서 해결! 우왕ㅋ굿 설치 모두 완료₩!!

그래서 테스트를 돌려보려고 하니.. 다음과 같은 에러가 떴다^^

Unable to boot device in current state: Booted

답변은 여기서 찾았당
https://www.inflearn.com/questions/470009

도저히 실행하는 법을 몰라서 여기서 이걸 찾아보며 했다...
https://cereme.dev/appdev/react-native-iphone-device-run/

에러가 계속난다 ㅠㅠ
https://github.com/facebook/react-native/issues/28503
이ㅅ도 해보고

https://developer.apple.com/forums/thread/82595
이거ㄱ보 결제
결제ㄴ 여기서
https://help.apple.com/developer-account/#/dev7a05c5ce1
https://developer.apple.com/enroll/identity/edit
https://help.apple.com/developer-account/#/dev7a05c5ce1

아무래도 내가 안드로이드 스튜디오나 xCode를 다뤄본적이 없어서..ㅠㅠ 엄청 헤맸다
결국 아래의 단비같은 글로 안드로이드는 문제를 해결했다...

Andriod Err

BUILD FAILED in 6s

error Failed to install the app. Make sure you have an Android emulator running or a device connected.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6s

    at makeError (/Users/rohyoungji/TestApp/node_modules/execa/index.js:174:9)
    at /Users/rohyoungji/TestApp/node_modules/execa/index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async runOnAllDevices (/Users/rohyoungji/TestApp/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
    at async Command.handleAction (/Users/rohyoungji/TestApp/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:192:9)
info Run CLI with --verbose flag for more details.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! TestApp@0.0.1 android: `react-native run-android`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the TestApp@0.0.1 android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rohyoungji/.npm/_logs/2022-05-02T02_24_10_220Z-debug.log

첫째로, 난 path를 잘못 적어줬었던 것 같다
https://stackoverflow.com/questions/37900737/make-sure-you-have-an-android-emulator-running-or-a-device-connected-and-have
여기서 $USERNAME 에 내 컴퓨터 이름을 적어야되는데,, 그대로 넣어서 경로를 못찾았던 듯 하다!ㅠ

https://suyou.tistory.com/154
여기 글을 보고 수정했다!
위 글에서, AVD Manager 가 없어서 한참 헤맸다 ㅠㅠ 업데이트 되면서 명칭이 바뀐듯!

여기 이렇게 Tools > Device Manager 에 들어가서 위 블로그 글대로 하면 된다!
안드로이드 에뮬레이터가 위에 뜨지 않고 안드로이드 스튜디오 안에서 열리더라!
에뮬레이터를 켜놓고 npm run andriod 를 했어야했구나ㅜ

안드 하나 해결,, 이제 아오스 가보자고ㅜ

---추가---
안드로이드 스튜디오를 꼭 안켜놔도 열림..^^

IOS Err

아오스 에러코드는 다음과 같다

2022-05-02 11:40:22.958 xcodebuild[38876:150273] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
2022-05-02 11:40:22.959 xcodebuild[38876:150273] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionPointIdentifierToBundleIdentifier for extension Xcode.DebuggerFoundation.AppExtensionToBundleIdentifierMap.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
** BUILD FAILED **


The following build commands failed:
        PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/rohyoungji/Library/Developer/Xcode/DerivedData/TestApp-ankrgugxxypmftftpdrygzahbkea/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-46EB2E00014D80.sh (in target 'FBReactNativeSpec' from project 'Pods')
(1 failure)

info Run CLI with --verbose flag for more details.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! TestApp@0.0.1 ios: `react-native run-ios`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the TestApp@0.0.1 ios script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rohyoungji/.npm/_logs/2022-05-02T02_40_29_941Z-debug.log

아래 링크를 통해 해결했습니다 ^__^
https://stackoverflow.com/questions/66742033/phasescriptexecution-cp-user-error-in-react-native

https://blog.smilecat.dev/posts/react-native-command-phase-script-execution-failed

아직 해결중,, ㅠ
새로 시도해본 것들
https://developer.apple.com/forums/thread/123790
https://fomaios.tistory.com/entry/%ED%95%B4%EA%B2%B0%EB%B2%95-%ED%8F%AC%ED%95%A8-PahseSriptExecution-failed-with-a-nonzero-exit-code
https://stackoverflow.com/questions/53289524/xcode-10-2-1-command-phasescriptexecution-failed-with-a-nonzero-exit-code
https://stackoverflow.com/questions/20755044/how-do-i-install-cocoapods
https://velog.io/@dody_/RN-%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8-The-following-build-commands-failedCompileC-UsersdodyLibraryDeveloperXcodeDerivedDataoheadlineclient-bntjzlxfwpoksjdlhzqejhufjwdnBuil
https://m.blog.naver.com/rlaalsdn456456/221592928131
https://developer.android.com/studio/run/managing-avds?hl=ko
https://velog.io/@maliethy/RN-PhaseScriptExecution-failed-with-a-nonzero-exit-code
https://d-dual.tistory.com/30
https://stackoverflow.com/questions/62566649/could-not-read-serialized-diagnostics-file-invalid-file-invalid-diagnostics-si

안되겠다.. 초심으로 돌아가 공식문서에서 하라는대로 다시 해보자

https://microsoft.github.io/react-native-windows/docs/0.64/rnm-getting-started

근데 여기서 하라는 templates 선택을 하니 또 에러가ㅠㅠ 흑흑 나한테 왜이래

https://velog.io/@pcsnms/React-Native-Typescript-%EC%84%A4%EC%B9%98

위 포스팅을 보고 해결하려 했으나 보기좋게 실패하고! 템플릿 버전 지정 없이 명령어를 실행했다!

아니,, npx npm node 다 새로 깔아보고 derivenData?도 지워보고 하는데 왜 안되는거냐구 ㅠ 새로 프로젝트 만들고 ~하면 아래와같은 결과창이 뜬다!

일단 첫번째 명령어인 react-native run-ios 를 실행하면
똑같은 에러가 빰..^^

자.. 이제 두번째 방법을 실행해보면,,

csworkspace 를 xcode로 열고, run을 눌렀지만
보기좋게 또 실패,,^^

또 이놈이구나.. 그래 뭔가 단단히 잘못되었다

1- Delete your Podfile.lock (I like to use the command '-rm -rf Podfile.lock' on the terminal for this)

2- Delete your Pods folder (I like to use the command '-rm -rf Pods' in the terminal for this)

3- Delete your .xcworkspace

4- Pod install

5- Clear your project into XCode> Product> Clean Build Folder

이걸 해보았는데.. (어제 해봤지만 혹시나해서 또 해봄) 소용없었고

npx react-native-macos-init

요걸 해봤다! ios 상단 폴더 위치에서 해야함

패키지가 성공적으로 설치됐다고는 하는데,, 또 돌려보면 모름 ㅠ
일단 아래 명령어로 실행시켜봤다!

npx react-native run-macos

기도메타중...

헉 드디어 성공했다ㅠㅠㅠㅠㅠㅠ흐어엉엉

집요한 자에게 복이 오나니,,,

해결방법

정리해야 다른 분들께 도움이 되니,,
요약하자면 Pods 관련해서 에러가 계속 났다!

답은 결국 공식문서에서 찾은것이다 ㅠㅠ

  1. 프로젝트 생성
npx react-native init <projectName>
  1. 해당 프로젝트 폴더에서 다음 명령어 수행하기
npx react-native-macos-init
  1. 해당 프로젝트 폴더에서 그 자리 고대로 실행시키기
npx react-native run-macos

이때, 해당 프로젝트 폴더는 ios 폴더 아님! 그 위임!!

다들... 화이팅...

----추가----

IOS 기기에 연결해서 확인하기

첫번째 에러

Xcode 를 열어 Run 을 하면 된다는데 Build Failed 가 떴고 (이제 익숙) 이런 에러메세지가 떴당

Signing for "target" requires a development team. Select a development team in the Signing & Capabilities editor

해결

왼쪽에 프로젝트를 선책하고, TARGETS 에서 해당 프로젝트를 선택하면 상단 탭에 Signing & Capabilites가 있다! 여기 Team을 결제가 된 애플 계정으로 해주고, device도 연결해주면 끝이다!

(위 사진에서 TAEYOON KIM이 결제된 애플 계정이당)

두번째 에러

허걱.. 자주보던 이놈이 또 떴다ㅠ

Command PhaseScriptExecution failed with a nonzero exit code

nvm으로 해결을 하라는데 그게 안깔려있음!
노드 버전 문제인것인가 결국,,
여튼 공식문서를 보고 nvm 설치를 하려는데..
당연하게 또 에러가 뜸 ㅎ nvm 이 자꾸 없다고 나왔다

zsh: command not found: nvm

nvm 설치 에러 해결

iterm(터미널) 에서

vim ~/.zshrc

를 하고, i (insert 모드)해서 아래 코드를 넣어준다.
예전에 살짝 헤맸던 이슈인데 ㅎ :wq 를 해야만 저장후 꺼진다,,
:q 만 해놓고 왜 적용 안되지 했었음ㅎ

그리고 

source ~/.zshrc

를 해줘야 적용이 된다,, 이것또한 몰라서 왜 적용안되지 했음 ^^
예전에 배웠던거 다 까먹었다 이거야~~~ 주기적으로 이렇게 리마인드 해야됨

여튼! nvm 이슈 해결에 큰 도움이 된 글,, 친절한 설명 감사합니다ㅠㅠ
https://velog.io/@palette/zsh-command-not-found-nvm-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B2%95

nvm 관련 에러

아니,, nvm 깔아서 

nvm unalias default

를 했는데 다음과 같은 응답이 왔다

Alias default doesn't exist!

넌 또 뭐야ㅜ

nvm 관련 에러 해결

노드 버전을 명시해주면 된단다,,
https://stackoverflow.com/questions/47190861/how-can-the-default-node-version-be-set-using-nvm

그래도 근본적인 에러 (두번째 에러)가 해결이 안됨 ㅜ

세번째 시도

다시 이걸 해봤따

sudo gem install cocoapods --pre
pod update

이걸 하고 derived data 도 지우고 다시 빌드해봤음

근데 역시나 안됨 ㅜㅜ 또 떴다 흑흑
근데 좀 새로운 에러가 뜸!


N/A: version "default -> N/A" is not yet installed.

You need to run "nvm install default" to install it before using it.
Command PhaseScriptExecution failed with a nonzero exit code

오잉? 세상에..

해결

nvm alias default

하면 default -> node (-> v13.11.0) 라고 나오고,,

nvm use node

하면 노드가 v.13.11.0이 되는걸 확인할 수 있다,,
근데ㅠㅠ 이렇게 하고 빌드파일 삭제 후 다시 빌드를 돌리니 해결되었다...

결국 노드 버전의 문제였구나..
이래서 리액트 네이티브 유지보수 비용이 더 많이 든다는 것인가,,^^

3일만에 처음 보는 Success 알림..,,흑흑 ㅠㅜㅜㅠㅜㅠㅜㅠ

내 아이폰에서 이렇게 아름답게 보이는걸 확인할 수 있다 흑흑 ㅠㅠ

profile
🇰🇷👩🏻‍💻 otterji (수달하는 코딩)
𝙸 𝚊𝚖 𝚊 𝗙𝗘 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚕𝚘𝚟𝚎𝚜 𝗼𝘁𝘁𝗲𝗿. 🦦💛
이전 포스트

[Mac] xcrun: error: invalid active developer path 해결하기

다음 포스트

[React Native 삽질기] #1 - 초기 프로젝트 기본 컴포넌트 훑어보기

1개의 댓글

comment-user-thumbnail
lovely
2023년 7월 24일

ㅋㅋㅋㅋ리액트 네이티브 진챠.. 이깍깨물고 하고 있습니다ㅋㅋㅋㅋ ㅠㅠㅠ

답글 달기