썬이의 IT세상

사용자의 앨범에 접근하거나 카메라 촬영을 하여 이미지를 등록하는 등의 기능은 거의 대부분의 앱에서 사용된다. React Native에서 사용자의 앨범과 카메라에 접근하여 이미지 파일을 불러오는 라이브러리는 다양하며, 라이브러리마다 해당 기능을 사용하는 방법이 다르지만 보통 함수 내에서 Promise를 호출하여 사용자 동작에 따른 callback으로 처리하는 방법이 대다수이다.컴포넌트 내에서 카메라 기능을 호출하는 함수, 사용자의 앨범에 접근하는 기능을 하는 함수, 이에 따른 처리 로직 등을 선언해야 하고 이러한 기능을 하는 컴포넌트가 다수개 있다면 일일이 컴포넌트 내에 선언하는 것보다 전역으로 사용 가능한 공통 모듈을 작성하는 편이 유지 보수와 확장성 측면에서 훨씬 더 유리할 것이다.만약 함수가 컴포넌트..

📌 ErrorXCode에서 평소와 같이 앱을 디버깅 하려고 할 때,Simulator에서 Unable to boot the Simulator 에러로 시뮬레이터가 작동되지 않는 현상이 있다.(주로 15버전대에서 발생한다고 한다.)When attempting to debug an app in XCode as usual, there is an issue where the simulator does not operate due to the "Unable to boot the Simulator" error.(This issue mainly occurs in versions 15.x.)  📌 Resolve시스템 설정 > 일반 > 저장 공간System Settings > General > Storage 저장 공간 ..

요즘의 UX/UI 설계는 보통 사용자 기반의 의사결정으로 이루어집니다.또 서비스의 비즈니스 모델을 명확히 하려면 앱이 얼마나 퍼널 구조로 되어 있는지가 중요하겠죠!그렇기 위해서는 앱에 사용자 동작을 트래킹 할 수 있는 솔루션을 연동해야 합니다. 수많은 트래킹 솔루션 중 Mixpanel에 대해 알아보고자 하는데요!믹스패널은 유료 플랜을 사용하지 않고도 웬만한 트래킹 함수들을 앱에 연동할 수 있다는 큰 장점이 있죠.이번 포스팅에서는 RN 앱에서 믹스패널을 연동하고 간단히 사용자를 트래킹해보는 예제를 다뤄봅시다. 📌 1. 시작하기SDK 설치 및 연동방법 공식문서에 더 잘 작성되어 있으니 참고해주세요!1-1. mixpanel.ts 파일 생성하기믹스패널 함수들을 사용하기 위해서는 믹스패널 토큰값으로 mixpa..

페이징 기능이 들어가는 View의 경우에는, FlatList의 onEndReached 속성을 사용해서 스크롤의 하단에 닿았을 때 pageSize를 늘려주거나 page를 변경해주어 api를 새로 호출해주게 되는 페이징 기능을 주로 사용하게 되는데, 필요에 따라 flatList가 아닌 ScrollView에서 이 기능을 사용해주어야 할 때가 있다. 다만 ScrollView에서는 onEndReached 속성이 없기에 따로 구현해주어야 하는 단점이 있는데, 이럴 때 ScrollView의 onScrollEndDrag 속성을 잘 활용하면 문제없이 구현이 가능하다! onScrollEndDrag 는 사용자가 ScrollView 안에서 스크롤 동작을 끝냈을 때 발생되게 되는 이벤트인데, 이 동작이 끝나는 타이밍을 스크롤의..

앱 개발을 하다보면 자주 맞닥뜨리게 되는 이슈 중 하나인, 디바이스마다 폰트 크기가 달라 특정 디바이스에서 UI가 깨져보이는 현상이 종종 발생하곤 한다. 이럴 땐 별도의 라이브러리를 사용해서 디바이스의 폰트 설정에 맞추어 size를 분기하는 방법도 있지만 리소스가 많은 프로젝트의 경우 이미 선언한 텍스트 크기를 하나하나 다시 바꾸기에는 시간도 많이 걸리고 하나의 컴포넌트라도 놓치는 순간 오히려 더 이상해보이는 결과를 초래할 것이다. 이에 나는 사용자의 디바이스 폰트크기 설정에 관계없이 지정한 FontSize를 랜더링해주는 방법을 선택했는데, 해결 방법은 아주 간단하다 Solution index.js ... import {Text} from 'react-native'; // add this Text.def..

이번 포스팅에는 React 혹은 RN에서 API 호출과 효율적인 캐싱을 주로 담당하는 react query 라이브러리. 그 중에서도 주요 기능인 staleTime과 cacheTime에 대해 전반적으로 알아가보는 시간을 가져보자. 이 포스팅은 다른 프론트 개발자분께서 알기 쉽게 올려주신 자료를 보고 참고하여 정리한 것으로, 좀 더 자세한 정보를 얻길 원한다면 https://ttaerrim.tistory.com/53 리액트 쿼리의 StaleTime과 CacheTime 리액트 쿼리를 처음 사용할 때 헷갈릴 수 있는 개념 중 하나인 staleTime과 cacheTime에 대해 알아보도록 하겠습니다. ✎ staleTime stale의 사전적 정의는 [신선하지 않은, (만든 지) 오래된]입니다. 말 그 ttaerr..

시작하기 크로스 플랫폼 앱의 단점중 하나인 버튼 위치 1px만 옮겨도 앱을 업데이트 해야하는 굉장히 불편한 부분을 보완하고자 Code push 라는 어마어마한 서비스가 나왔는데, 이를 적용하고 테스트해보려면 실제로 스토어에 업데이트 된 앱이 있어야 하므로 사이드 프로젝트 겸 code push 테스트를 위한 앱을 만들어보고자 한다. 새로 만들어보는 김에, 이전 Private Box는 윈도우 환경에서만 개발했기에 RN으로 만들었음에도 안드로이드만 배포했었는데, 이번엔 Android/IOS 둘다 배포해보고자 한다. 개발 프레임워크 : React Native v0.72.1 사용 언어 : Typescript v4.8.4 프로젝트 생성 RN 타입스크립트 프로젝트를 간단한 명령어로 생성할 수 있다. 프로젝트를 생성하..

시작하기 회사에서 진행하는 프로젝트가 관광일이다보니, 외국인 관광객을 위한 다국어 번역 서비스가 필수적으로 들어가야 했다. 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 스레드쪽으로 생성되기 때문에 컴포..

받아오는 데이터 중 백오피스에서 텍스트 편집기로 입력한 데이터는 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..