썬이의 IT세상

포스팅 부제에도 나와있듯이, RN으로 개발을 하다보면 map() 함수로 특정 배열을 랜더링 시킬 때, 함수를 감싸는 부모 컴포넌트를 View가 아닌 빈 태그() 로 지정할 때가 있다. 테스트 코드 const tmpArr = [0,1,2,3,...] return ( ... tmpArr.map((res, idx)=>{ return ( {res} ) }) ... ) ... 위와 같은 테스트 코드를 랜더링 시키면, React Native는 Warning: Each child in a list should have a unique "key" prop. 우리가 자주 보는 Warning을 뱉어낸다. 사실 우리가 원하는데로 랜더링은 시킬 수 있지만, 해당 컴포넌트를 랜더링 시켜주는 페이지를 들어갈 때 마다 디버깅 경고..

react-native에서 chart UI를 구현할 때 주로 react-native-chart-kit 라이브러리를 사용하는데, GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap) - GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Lin... ..

페이징 기능이 들어가는 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..

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

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