개발하는 리트리버

평화로운 시기에 역시나 간간히 찾아오는 react-native 빌드 오류다.

yarn android —deviceId=기기 ID의 형식으로 안드로이드 기기에서 rn을 실행하는데,

위 오류가 발생했다. 에러 메세지 만으로는 쉽게 와닿지 않는 오류였다. 

이런건 보통 gradle 오류겠거니해서 clean 후 다시 설치해 보았지만 실패.

간단한 원인은 jdk 버전 문제였다.

rn은 정말 같이 확인해야하는게 너무 많아....

최근에 다른 프로젝트 실행을 위해서 java 버전을 잠시 변경해 두었는데

이 때문에 문제가된것..

고로 원래 사용중이던 버전으로 돌아만 간다면, 혹은 문제없는 jdk로 설정한다면 해당 오류를 수정하고 넘어갈 수 있겠다.

순서는 아래와 같다.

1. Java 버전 확인

$ java -version

2. 깔려있는 java 버전 확인

$ /usr/libexec/java_home -V

위 명려어를 치면 설치되어있던 버전들을 확인할 수 있다.

사용했던 버전이 뭔지 모른다면 위 방식으로 사용했던 자바 버전을 추측해볼 수 있겠다.

3. 버전 설정

$ export JAVA_HOME=$(/usr/libexec/java_home -v 11)

변경하고자 하는 버전을 선택해서

위 11의 자리에 원하는 버전을 설정해주면 버전을 변경 할 수 있다.

그리고나서 빌드를 돌리면..!? 

예전과 같이 빌드가 잘 됨을 확인해볼 수 있겠다.

여러분의 rn을 응원합니다ㅎ

RN으로 개발해서 iOS 는 safari로 바로 디버깅이 가능하다

혹시나 문제가 있다면 아래와 같은 문제인지 체크해보길 바란다.

https://choq.tistory.com/47 : 검색할 수 있는 응용프로그램 없음....

자 그럼 안드로이드는 어떻게 할까?

크게 2파트로 나눌 수 있겠다.

1. 코드 설정

2. 기기 설정

1. 코드설정

안드로이드는 약간 코드 부분에서 추가가 필요하다.

android/app/src/main/java/co/{projectName} 아래에

MainApplication.java 파일을 찾아서 아래와같이 추가해준다.

1. import 새로 추가

2. onCreate 클래스 내부에 Webview 추가해

// MainApplication.java

import android.webkit.WebView;

...

public void onCreate(){
...
	 WebView.setWebContentsDebuggingEnabled(true);
...
}

2. 기기 설정 (개발자 옵션)

이제 코드 설정은 끝났다.

디버깅을 위해서 안드로이드 폰을 "개발자모드"를 활성화 할 필요가 있다.

안드로이드 기기에서 [설정] 페이지에서 가장 하단에 [개발자 옵션]이 없다면

아직 활성화 되지 않은것이다.

그렇다면 설정 하단부에

[휴대전화정보] -> [소프트웨어 정보]로 들어가서

"빌드번호" 를 여러번 눌러준다.

그러면 개발자 모드 활성화에 대한 알림이 등장한다!

그러고 나면 이제 설정 최하단부에 개발자 옵션이 켜진다.

개발자 옵션에 들어가서 USB디버깅 모드 설정을 ON해주면~ 

모든 준비 끝이다.

3. 디버깅

이제 앱을 안드로이드 기기에서 실행해준다.

$ adb devices

통해서 기기 ID를 체크하고

$ yarn android -deviceId=기기ID

실행해주면 프로젝트가 실행된다. 

후에 크롬을 실행하고 
chrome://inspect/#devices
로 접속하면 

Remote Target 파트에 해당 웹뷰가 표시되어있는걸 확인할 수 있다.

해당 웹뷰를 inspect 클릭하면 

웹개발시 크롬에서 F12눌러서 개발자모드킨것과 같이

콘솔, 요소 등을 확인할 수 있다!

이제? 열코딩만 하면된다.

ld: symbol(s) not found for architecture arm64

clang: error: linker command failed with exit code 1 

이전에 Mach - O type을 통해서 잠시 넘어가나 싶었던 에러다.

https://choq.tistory.com/76

하지만 해당 방법은 이 에러는 넘어가도 다음에 또 다른 에러를 발생시켰다.

나의 경우 빌드는 성공했지만 testflight에 업로드 중에

bundle identifier 의 이름을 이상하게 파악하는? 새로운 에러가 나타났다.

No suitable application record were found. Verify your bundle identifier "B" is correct anc that you are signed in with... 

심지어 bundle identifier 는 A 였는데 말이다..

앱 빌드가 아주 야무지게 꼬였다고 밖에는 안보인다..

다른 분들은 이렇게 해결하고 넘어가지 않도록 ..부디..⭐️

그리고 결국.. 해결책을 찾았다..

할렐루랴ㅜㅠ

Xcode →  Build Settings → Search Paths → Library Search Paths 에서

$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)

를 지우고

$(SDKROOT)/usr/lib/swift

를 새롭게 추가해주는 것이다.

그러면 해당 에러가 더 발생하지 않는다..

확인하자마자 사무실에서

SIU

를 외쳐버릴 뻔 했지만 겨우 참았다. 

(마음 속으로만 했다)

해답을 통해 보자면..

특정 스위프트 버전에 대한 라이브러리를 찾지 못하는 상황이 계속되었고,

SDKROOT을 통해서 sdk에 있는  스위프트 라이브러리를 받아오게끔 수정하니 잘 해결된 것이라고 한다.

m1 관련된 문제인가 그리도 찾아보았지만

뜬금없이 swift 버전 혹은 경로 문제 였다는게 뭔가 살짝 허탈하기도 하고..

이게 진짜 문제 원인 맞는지 아직도 조금 아리송 하다..

하지만 해결했자나

한잔해~

빌드는 성공했지만 testflight 업로드 과정에서 또...

하지만 이번엔 계정관련 문제 인것 같아서 편하면서도..

다시 해결하러..총총.. ios 너무 사랑스러워요 ^오^..

구글 플래이 콘솔에서 알림이왔다.

"앱이 Android 14(API 수준 34) 이상을 타케팅해야 함"

해당 업데이트를 하지 않으면 앱 업데이트를 출시할 수 없게 된다고 한다. 홀리몰리 곽카묠리..

세상에서 모바일 관련 버전 업그레이드가 제일 무서운데 말이다.

빠르게 react-native에 있는 build.gradle 파일을 열어 아래 코드를 수정했다.

{
	compileSdkVersion = 34
	targetSdkVersion = 34
}

그리고 기도메타로 빌드 실행을 돌렸다.

(촤라라라라라라...)

하지만 한 곳에서 빌드가 멈췄다.

processDebugResources..

그리고는 타임아웃이 나면서 아래와 같은 에러가 나왔다.

AAPT2 aapt2-4.1.0-6503028-windows Daemon #0: Unexpected error during link, attempting to stop daemon. This should not happen under normal circumstances, please file an issue if it does...

일반적인 상황에서는 발생하면 안된다는 말까지 붙여 놓으니 이것참.. 그렇게 타겟 sdk 버전 텍스트만 바꾸면 될 줄 알았던 문제에 제동이 걸렸다.

dependecydp gradle의 버전을 수정해보기도 하고 했지만 나의 케이스에는 해당되지 않았나 보다.

그러다가 아래에 참조한 멋쟁이들이 모여있는 stackoverflow를 발견했다. 타겟버전만 바꾸고 compileSdkVersion은 33으로 유지하고 나니까 해당 에러가 없어지고 정상적으로 빌드가 되었다.

{
	compileSdkVersion = 33
	targetSdkVersion = 34
}

다른 해결책인 build:gradle의 버전을 바꾸는 해결책도 진행했지만, 다른 버전과의 호환성때문에 실패했다.

물론 두 값은... 일치하는게 이상적으로 좋다고 한다. 잠재적인 문제의 원인이 될 수 있기 때문이다.

하지만 일단 너무 낮은 react-native 버전때문에 다른 버전들을 다 건드리기 애매해서 해당 방법으로 임시방편을 했다.

다행히 빌드된 앱을 테스트 해도 문제는 발견되지 않았다. (아직까진..)

진짜 모바일 관련 관련해서 버전 문제는

언제나 머리를 어지럽게 한다.SOS

참고 : https://stackoverflow.com/questions/67233807/android-gradle-build-error-aapt2-aapt2-4-1-0-6503028-windows-daemon-0-unexpec

ld: symbol(s) not found for architecture arm64

clang: error: linker command failed with exit code 1 

행복한 일상을 괴롭혔던 iOS빌드 이야기...

해당 에러가 발생하면서 Archieve Failed가 발생했다.

검색해보니 상당히 많은 경우의 수와

또 그에 따른 많은 해결책들이 난무했다.

진짜 한 10개 넘는 방식의 해결책들을 시도했는데.. (이하생략)

여러 원인과 해결책들이 있는걸로 보아,

여러 상황에서 저 에러가 나오는 것같다..

(고로 에러 전에 무슨 단계였는지를 체크해서 해결 방법을 찾아나서는게..!)

나의 경우 Linking 관련된 명령어 실행 중에

해당 에러가 발생해서 Linking 관련된 해결책들을 찾다가,

Xcode - Build Settings - Linking에서 

'Mach-O Type'을 Static Library로 수정하고 나니

빌드 성공..?!

근데 Mach-O가 뭐지?

Mach-O (Mach Object file format)

Mach-O는 파일 포맷으로

macOS, iOS 운영체제에서 실행 파일, 오브젝트 코드, 공유 라이브러리, 코어 덤프 등을 위한 형식이라고 한다.

줄이면 apple관련 OS에서 동작하는 프로그램을 위한 파일 포맷이라 할 수 있겠다!

오브젝트 파일(.o), 동적파일(.dylib), 정적파일(.a), 번들(.bundle)등이 다 Mach-O인것!!

여기서 Mach-O Type 설정은 타겟에 대해 생성할 바이너리의 유형을 지정한다고 한다.

설정 내용은 아래와 같다. 

• Executable: 운영 체제가 실행할 수 있는 독립 실행형 바이너리.
• Dynamic Library: 런타임에 로드될 수 있는 공유 라이브러리.
• Static Library: 컴파일 시점에 최종 실행 파일에 직접 포함되는 라이브러리.
• Bundle: 다른 실행 파일이나 라이브러리에 의해 런타임에 로드되는 특수한 유형의 동적 라이브러리

나의 경우 Static Library 설정하고 나서

경로 문제로 받아오지 못하는 CoreAudioTypes을 패스하고

빌드시점에 포함된 라이브러리만 가져왔 때문에

빌드 에러가 없어졌던것이다..!

고로.. 근원적인 해결책은 못한거라고 봐야겠나ㅠ

하지만 검색해보니 해당 라이브러리(플랫폼이라고 표현하는)는 이제 기본이라 따로

import 할 필요 없다고도 하는데.. 좀 더 확인해 봐야겠다.

 The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0.

라는 WARN 이 콘솔에서 계속 보여 처리하기로 맘 먹었다.

 이제는 사용되지 않을것이다.. 라고 하니 다르게 수정해줘야 겠다.

아래 코드는 원래 createSlice 안에 있는 extraReducers의 코드이다.

이를 builder와 addCase가 들어간 함수로 수정해주면 된다.

 // 수정 전 코드
 extraReducers: {
     [A.success]: (state, action) => {
       state.A = action.payload;
     },
     [A.failed]: (state, action) => {
       state.A = null;
     },
   },

// 수정 후 코드
extraReducers: (builder) => {
    builder
      .addCase(A.success, (state, action) => {
        state.A = action.payload;
      })
      .addCase(A.failed, (state) => {
        state.A = null;
      });
  },

builder와 addCase를 통해서 기존 함수를 재구성해주면

해당 워닝을 제거할 수 있다! 간단간단

자..이제 재 역할을 잘 하는 지 확인하러.. 총총..

시뮬레이터나 실재 기기를 이용해서 iOS 기기를 디버깅 할때가 있다.

이때 사파리를 통해 할 수 있는데

개발자용을 클릭후 나오는 기기중에 원하는 기기를 클릭해서

웹뷰를 디버깅 할 수 있다.

하지만 특정 버전이후(iOS16.3) 이후에

검색할 수 있는 응용프로그램 없음,

no inspectable applications

이런 표시가 생기고 웹뷰를 디버깅 할 수가 없다.

왜와이......

빠르게 해결책을 찾아가보자..

[첫 번째 해결책] Safari Technology Preview를 다운받으면 된다고 하는데

난 먹히지 않았다ㅜㅠ

[두 번째 해결책] 공홈에서는 

https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/

해당 링크에서 swift 나, object-c 인경우 특정 코드를 추가하라고 써있지만,

버전이 다른건지 react-native-webview 사용이라 그런지 해당 부분을 찾을 수 없었다.

그렇게 검색을 계속하다가.. 빛 그 자체를 만났다.

[REAL 해결책]

https://github.com/react-native-webview/react-native-webview/issues/2914

이렇게 하면 다시 웹뷰 디버깅이 가능하다고 한다..!

따봉과 하트 등이 많은 것으로 보아, 해결책이 될 확률이 높아보인다. 홀리몰리

말 그대로 react-native 루트에서

node_modules/react-native-webview/apple/RNCWebView.m 에서 수정해주면된다.

나의 경우 RNCWebView.m 였다. 

"

webView.inspectable = YES;

"

해당 부분을 추가해주고,

xcode로 돌아와 빌드를 지워주고 새롭게 빌드했다.

그러고 나니... 해당 웹뷰를 디버깅이 가능해졌다..!!

감자합니다..ㅜㅠㅠ

근데 정말 어떻게 안걸까 신기하다...

XCode를 빌드한 상태로 오래두다가,

한번씩 업데이트나 이런걸로 껐다 키면

새로운 에러를 만나게 된다. 일상이다

이번에는 Flipper 관련 에러가 나왔다...

 'facebook::flipper::SocketCertificateProvider' (aka 'int') is not a function or function pointer

역시 에러문구는 언제봐도 어지럽다

찾아보니 따끈따끈한 문제였다

SOS 현장 : https://github.com/facebook/react-native/issues/43335

해결책은 아래와 같다.

https://github.com/facebook/flipper/commit/b3dcdb87f930dbbc9dbacb53ad60996e0111e7d8

새로운 버전에서 돌리려면

해당 라인을 추가해야 한다고 말해주고 있다.

해당 파일에 

#include <funtional> 

을 추가해주면 된다!!

해당 파일 주소는 아래와 같다.

ios / Pods / Flipper / FlipperTransportTypes.h

오늘도 Xcode와의행복한 쎄쎄쎄

xocde 에서

ios 시뮬레이터 빌드 시 위와 같은 에러가 나왔다.

해결책을 제시해 준 블로그는 많았지만 좀 처럼 

나의 케이스는 없었나 보다.. 효과는 없었다.

하지만 결국...

 멋쟁이 형님들이 있는 stack overflow 를 통해 문제를 해결할 수 있었다.

https://stackoverflow.com/questions/63607158/xcode-building-for-ios-simulator-but-linking-in-an-object-file-built-for-ios-f

Targets > Build Settings 에 들어가서

Architectures > Excluded Architectures 부분에

any iOS Simulator SDK  arm64를

아래 처럼 추가하면 된다.

그리고 빌드를 돌리면 잘 돌아간다...!!

진짜 말도 안되는 해결책..

혼자서는 백만년 머리 박아도 도저히 못찾아낼 해결책이다.

그저 갓오버플로우.. 

그럼 왜 이 해결책이 내게 해당되었는지 정도라도 알아보쟈!

문제의 원인은 호환성 문제였다.

사용하는 라이브러리 중에

m1과는 호환이 아직 되지 않는 것이 있었던 것 같다.

그래서 intel 만...되었던것

그래서 arm64를 Excluded 시켜버리고 나서부터는

정상적으로 앱이 실행되었다. 

문제가되는 라이브러리를 업데이트하는게 이상적이지만,

그럴 수 없을때는 이런 방법을 사용하라고 공식적으로도 이야기하는 것 같다.

https://developer.apple.com/documentation/technotes/tn3117-resolving-build-errors-for-apple-silicon#Update-pre-compiled-libraries-from-vendors

진짜 Xcode 는 정이 가지 않는다....

계속 보면 볼매..일지도.. :(

조용하다 싶으면 다시 터지는 

너 M1 이자나 ㅋㅋ

에러 또한.. 상당히 마음을

옹졸하게 만든다

[미리결론] navigator.userAgent.match(/ipad|ipod|iphone/i) 써보기!

앱이 돌고있는 플랫폼을 파악할때 매우 좋은 값이다.

iPhone 인지 Mac 인지 등을 표시해준다.

특히나 앱 프로그래밍에서 iOS 와 Android를 나눌때 매우 유용하다.

하지만 vscode 기준으로 해당 값을 작성하면

위 같이 밑줄이 그어진다

흠.. 근데 아직 값이 잘 나오기는 하던데?

알빠노?

값은 아직까지 잘 나오지만.. 빠르게 바뀌어가는

트렌드에서 언제 무슨일이 벌어질지 모르는법.

deprecated 인 것들을 쓰지 않아야

안정적인 어플리케이션을 개발하는

개발자가 될 수 있지 않을까?

그럼 해당 값은 어찌 대체할 것인가.

navigator.userAgent.match(/ipad|ipod|Mac|iphone/i)

위의 값으로 플랫폼 체크를 할 수 있다. 

userAgent

보통 해당 값은 [Mozilla 버전 + OS + 렌더링 엔진 + 브라우저 이름]  의 형태이다

구글 기본 페이지에서 해당 값을 찾아보면 

이런 값이 나온다. 여기서 돌아오는 값을 가지고 플랫폼을 파악하는 것이다.

해당 값에서 플랫폼값에서 정규식 match() 를 이용하여 원하는 플랫폼인지 체크한다.

딱 값이 나오는 방법은 아니지만.. deprecated 되는 값을 이용하는것 보다는 안정적인 방법이라 생각된다.

개인적으로 아주 만족스러운 platform 값이

왜 deprecated 된 것인지는 좀 아쉽다.