썬이의 IT세상

예전에 했던 프로젝트를 1달정도만에 XCode에서 빌드하려는데 Command PhaseScriptExecution failed with a nonzero exit code 에러로 IOS 빌드가 되지 않았다. 위와 같은 에러메시지는 하도 많이 봤지만 전에 했던 방법대로 해도 해결되지 않는 마법같은 에러.. 역시나 build clean & pod install 과 같은 명령어로는 해결되지 않았다. 열심히 찾아보던 도중 간단히 해결할 수 있는 방법을 찾았다! 프로젝트 루트/node_modules/react-native/scripts/find-node.sh 파일에 set -e 로 되어있는 부분을 set +e 로 변경해주고 빌드하면 바로 해결된다. - set -e + set +e

시작하기 회사에서 진행하는 프로젝트가 관광일이다보니, 외국인 관광객을 위한 다국어 번역 서비스가 필수적으로 들어가야 했다. API를 통해 받아오는 데이터에는 파라미터로 langId를 넣어 서버에서 번역 데이터가 날아오지만, 앱에 원고로 들어가있는 텍스트 등은 필수적으로 번역하여 언어별로 넣어주는 작업이 필요했다. 이를 언어별 JSON으로 관리하여 쉽게 이용할 수 있는 react-i18next 라이브러리를 사용하였고, recoil 전역변수로 저장된 langId와 i18n의 useTranslation() 훅으로 번역 서비스를 구현하였다. 이전 프로젝트에서 선임분께서 정리해주신 내용과 더불어 간단한 사용법을 파헤쳐보자. react-i18next 우선, 예전에 사용되던 react-native-i18n 라이브러리..

인라인 스타일(Inline-style)? 인라인 스타일은 자바스크립트 객체의 형태로 태그 안에 스타일 코드를 집어넣는 형식인데, 예를 들면 {children} 위와 같은 형식을 인라인 스타일이라 한다. 허나 인라인 스타일은 자바스크립트 엔진 쪽의 스레드에서 UI 스레드 쪽으로 브리지를 경유하므로, 동적 스타일이 아닌 정적 스타일을 사용할 때에는 앱의 디스플레이 속도가 느려지는 치명적인 단점이 있다. (이 때문에 React 공식문서에서도 인라인 스타일을 지양하도록 권고하고 있다.) 이러한 이유 등으로 인해 React Native에서는 StyleSheet.create로 스타일 코드를 정의하여 사용하게 되는데, StyleSheet.create 함수를 통해 만들어진 객체는 UI 스레드쪽으로 생성되기 때문에 컴포..

# 시작하기 앱을 개발하다 보면 리뷰 등의 기능에서 사용자 디바이스의 '카메라 앨범'을 불러와 사진 리스트를 출력해주어야 하는데, 해당 기능을 구현하는 데 사용해본 라이브러리 중 가장 대중적이고 편한 라이브러리인 react-native-camera-roll 라이브러리와 그 사용법, 그리고 flatlist를 통해 페이징 기능까지 구현해보자. # react-native-camera-roll 기본적으로 사용자의 카메라 앨범을 불러오려면 앱의 권한과 AOS/IOS 모두 설정을 해주어야 한다. npm 라이브러리 설치 명령어와 위 권한 관련 설정에 대해서는 도큐먼트를 잘 따라가면 순조롭게 진행된다. https://github.com/react-native-cameraroll/react-native-camerarol..

RN 으로 개발중인 앱에 html로 받아오는 데이터들 중 텍스트의 색상을 지정해주지 않은 태그들은 디바이스의 다크모드/라이트모드 설정에 따라 블랙/화이트로 유동적으로 변경되게 되는데, 우리 앱에서는 디바이스 테마를 따로 제어하지 않아서 흰 배경에서 나오는 html 소스들이 다크모드로 실행되면 텍스트 색상이 white이기에 어려움이 있었다. 그래서 생각해낸 해결방법 중 하나는 앱의 테마를 라이트모드로 고정하는 것인데, 그 방법은 아래와 같다. [Android] android > app > src > main > res > values > styles.xml 경로에서 style 부분을 다음과 같이 바꿔준다. [IOS] info.plist 파일의 태그 안에 UIUserInterfaceStyle Light 코드..

받아오는 데이터 중 백오피스에서 텍스트 편집기로 입력한 데이터는 html로 들어오게 되어 react-native-render-html 라이브러리로 앱에 디스플레이 해주고 있는데, 편집기에서 컬러를 지정하지 않으면 앱에 테마(Light Mode/Dark Mode)에 따라 텍스트 색상이 다르게 적용되어 이슈가 생겼다. 해결 방법은 다음과 같다. # solution. const spanElementModel = HTMLElementModel.fromCustomModel({ tagName: 'span', contentModel: HTMLContentModel.mixed, getUADerivedStyleFromAttributes({ face, color, size }) { let style = {}; if (fa..

프로젝트를 새로 pull 받은 후 안드로이드 빌드 시 spawn ./gradlew ENOENT 에러로 빌드가 되지 않는 경우, chmod 755 ./gradlew 등 권한 문제를 해결하라는 방안이 많은데, 애초에 나는 gradlew 파일 자체가 없어서 권한을 줄 수도 없었다. 이럴땐 안드로이드 스튜디오에서 싱크를 맞췄는지 점검해보자. 프로젝트를 새로 받았을 땐 싱크 맞춰주기 기억하자!!

rn 71 version 이상부터 무언가 기존 라이브러리들도 gradle들도 pods들도 다 꼬이는 느낌... 무튼 제목과 같은 could not find any matches for com.facebook.react:react-native:+ as no versions of com.facebook.react:react-native are available 에러는 android/app/build.gradle 경로에서(android/build.gradle 파일이 아님) apply plugin: "com.android.application" apply plugin: "com.facebook.react" // add this com.android.application 밑줄에 위 코드를 추가해주면 해결된다.

M1 Mac Xcode로 빌드 시 제목과 같은 에러때문에 열심히 구글링을 해봐도 nvm unalias default 명령어로만 해결되었다고 하는데 나에게는 전혀 효과가 없었다. 그럼 node쪽에 문제가 있다는건 확실하니 계속해서 리서치한 결과 좋은 솔루션이 있어 적어보려 한다. 터미널에서 which node 명령어를 쳐서 node의 경로가 출력되면 복사해서, 프로젝트 루트/ios 폴더에 .xcode.env.local 파일을 생성한 후 export NODE_BINARY="/Users/ktaeyang/.nvm/versions/node/v19.7.0/bin/node" 위 한줄 예시처럼 " " 사이에 방금 복사한 node 경로를 붙여넣고 빌드해주면 해결될 것이다.

RN 앱과 unity를 연동하기 위해 @azesmway/react-native-unity 라이브러리를 설치하고 세팅을 한 후 빌드할 때 Could not determine the dependencies of task ':notifee_react-native:compileDebugAidl'. 에러가 나면서 빌드가 되지 않는 경우가 있다. 이럴 때는 프로젝트의 gradle.properties 에 unityStreamingAssets=.unity3d 를 추가해주고, :azesmway_react-native-unity 의 build.gradle의 밑에서 dependencies { //noinspection GradleDynamicVersion implementation "com.facebook.react:rea..