썬이의 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 안에서 스크롤 동작을 끝냈을 때 발생되게 되는 이벤트인데, 이 동작이 끝나는 타이밍을 스크롤의..

매번 스크립트 파일을 새로 작성할 때, import React from 'react'; 부터 export default 파일이름까지 일일이 작성해줘야하는 번거로움을 덜어주는 VS Code의 기능을 다뤄보도록 하겠다. 🟨 Code Snippet ? - VS Code에서 새로 파일을 만들고 해당 파일에 들어가는 기본적인 코드들, 즉 거의 대부분의 파일에서 공통적으로 사용되는 코드들을 일일이 작성할 때 이를 간단한 명령어 하나로 작성해주는 기능이다. 예를 들어 앞서 적어놓은 부분을 좀 더 자세히 보면 import React from 'react'; import {View, Text} from 'react-native'; const filename = () => { return ( This is new file..

이번 포스팅에는 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 타입스크립트 프로젝트를 간단한 명령어로 생성할 수 있다. 프로젝트를 생성하..

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

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

# 시작하기 앱을 개발하다 보면 리뷰 등의 기능에서 사용자 디바이스의 '카메라 앨범'을 불러와 사진 리스트를 출력해주어야 하는데, 해당 기능을 구현하는 데 사용해본 라이브러리 중 가장 대중적이고 편한 라이브러리인 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 코드..