썬이의 IT세상

터미널에서 앱을 빌드 했을 때, 위 사진과 같이 앱 빌드 시 launchPackager.command이(가) 터미널에서 문서를 열도록 허용되지 않았기 때문에 '(null)'을 열 수 없습니다. 라는 문구와 함께 메트로가 연결된 터미널창이 열리지 않는다면, 다음 방법으로 간단하게 해결해 보자. 보통 위 에러 문구가 나는 개발 환경이라면 사용자의 pc에 iterm2 라는 터미널 응용 프로그램이 설치되어 있을 것인데, react-native 에서 디버깅 앱을 빌드했을 때 iterm2를 열도록 설정해주면 된다. 해결 방법 (project root)/node_modules/react-native/scripts/launchPackager.command 파일 우클릭 > 다음으로 열기 > iterm 으로 설정해두면 앞..

회원가입 기능을 작업하다 보면 거의 필수적으로 들어가는 생년월일 부분을 라이브러리를 사용하지 않고 Input으로 관리할 때, YYYYMMDD 혹은 YYYY-MM-DD 형식이 맞는지를 프론트에서 확인해주는 로직이 필요하다. 예를 들어 생년월일 파라미터에 1996-02-313 와 같이 들어갔는데 API를 호출하게 되면, 해당 회원정보에서 생년월일을 불러오는 부분에서 에러가 날 가능성이 아주 높다. 또 1111-22-33 과 같이 YYYY-MM-DD 형식은 지켰으나 실제 존재하지 않는 날짜의 경우도 있다. 실제적인 예로 어떤 외국인 회원분께서 22051996 과 같이 DD/MM/YYYY 의 형식으로 입력하셔서 해당 회원정보에 관련된 에러가 났던 경우가 있었다. 이에 정규식을 통해 자리수를 먼저 검증하고, 올바..

RN 으로 개발 중인 앱을 디버깅 할 때 나는 주로 XCode에서 실행하여 iOS 앱을 먼저 킨 후에 같이 켜진 터미널 창에서 안드로이드 앱을 열곤 하는데, 아무 이상 없이 잘 실행되던 디버깅 앱이 iPhone is busy fetching debug symbols for iPhone 창이 뜨면서 실행이 안되는 것이었다..! 이것저것 알아보던 중 역시 근본은 재부팅이었다. 내가 해결했던 방법은 아래와 같다. 1. XCode - Product - Clean BUild Folder 2. XCode 종료 후 다시 실행 3. 디버깅 할 iPhone 종료 후 다시 실행 - 이후 다시 실행시키니 정상 동작한다!

예전에 했던 프로젝트를 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 파일 자체가 없어서 권한을 줄 수도 없었다. 이럴땐 안드로이드 스튜디오에서 싱크를 맞췄는지 점검해보자. 프로젝트를 새로 받았을 땐 싱크 맞춰주기 기억하자!!