어떤 에러? 플랫리스트를 여러 개 사용하려다 보니 아래와 같은 에러가 발생했다. ERROR A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list. 플랫리스트가 중첩되지 않고 여러번 쓰일 때 모든 형제 리스트에게 키값이 필요한 것 같았다. 사실 에러에서 답을 주고있었지만 listKey가 keyExtractor와 연관이 있는줄 알고 많은 삽질을 했다 (...) key가 유니크한 값이 아니어서 그런가? 싶어서 이런 삽집들을 했었다. ..

Today, What I learned? 프로젝트 중!.. api에서 가져오는 xml 데이터를 JSON 데이터로 변환하기 위해 라이브러리를 사용하는 과정을 정리해 본다. 먼저 사용한 라이브러리는 이것이다. https://github.com/connected-io/react-native-xml2js GitHub - connected-io/react-native-xml2js: XML to JavaScript object converter. XML to JavaScript object converter. Contribute to connected-io/react-native-xml2js development by creating an account on GitHub. github.com 변환하기 const p..

에러 발생 멀쩡히 잘 되고있던 expo 서버가 갑자기 yarn start 하니 아래 오류를 내면서 종료되었다. node:events:505 throw er; // Unhandled 'error' event ^ Error: EMFILE: too many open files, watch at FSWatcher._handle.onchange (node:internal/fs/watchers:204:21) Emitted 'error' event on NodeWatcher instance at: at NodeWatcher.checkedEmitError (/Users/yjlee/project/intermission/node_modules/sane/src/node_watcher.js:143:12) at FSWatche..

Today, What I learned? 리액트 네이티브에서 중첩 라우터로 Stack을 만들어두고, 내비게이션을 지정했을 때 아래와 같은 에러를 만났다. 중첩 라우터에서는 네비게이션을 어떤 식으로 지정해주어야 하는지 정리해보려고 한다. 내비게이션 구조 우선 네비게이션 구조는 Root라는 스택에서 스택과 탭을 하나로 묶어주고 있는, 중첩된 구조다. 중첩된 네비게이션 위 에러 메시지에도 있는 navigation 관련 링크로 이동해서 보면 일반적인 내비게이션 지정은 아래와 같이 할 수 있다. navigation.navigate('페이지 컴포넌트명'); 중첩된 내비게이션에서는 먼저 상위 내비게이션을 지정해 주고 screen이라는 속성으로 페이지명을 지정한다. navigation.navigate('Root', {..

Today, What I learned? 리액트 쿼리를 이용해서 무한스크롤을 적용해 보았다. 무한스크롤로 데이터를 받아오는 것은 아직까지 시도해보지 못했던 기능이었는데 useInfiniteQuery 훅을 사용해서 생각보다 쉽게 적용할 수 있었다..! FlatList 먼저 FlatList에서 무한스크롤을 위해 필요한 두 가지 속성을 추가해야 한다. onEndReached 끝점에 도달했을 때 실행시킬 함수가 들어가는 속성 onEndReachedThreshold 스크린 높이에 도달하기 전에 얼마큼 먼저 fetch 함수를 빠르게 실행시킬 것인지에 대한 속성. 숫자로 들어간다. 1일 경우엔 끝에 도달했을 경우 실행된다. 로직의 구성 무한 스크롤이 어떤 방식으로 이루어지는지를 간략하게 정리하면 이렇다. 기존 배열 ..

Today, What I Learned? 리액트 네이티브 공식문서의 ScrollView를 보다가 와의 비교하는 부분이 있어 정리해 보고, 현재 만들고 있는 영화 앱의 ScrollView 부분을 FlatList로 바꿔보는 작업을 기록해두려 한다. vs 위 캡처는 리액트 네이티브 공식 문서에서 발췌해온 부분이다. 살펴보면 대략 이런 내용이다. ScrollView는 렌더 시에 모든 자식 컴포넌트들을 한 번에 가져와서 성능이 저하된다. FlatList는 렌더 시에 보이는 것들만 lazily하게 가져오고, 스크롤을 내려야 볼 수 있는 아이템들은 지워버리기 때문에 메모리와 처리 시간을 절약할 수 있다. FlatList는 여러 기능을 내장하고 있다. 헤더 / 푸터 지원 horizontal mode 지원 내려 당겼을 ..

Today, What I learned? 커스텀 훅에 익숙해져 보기 위해 투두리스트를 리팩터링 해보기로 했다. 기존의 코드 중에서 투두리스트를 추가하는 부분을 커스텀훅으로 만들어 보았다. state와 dispatch, submitHandler 까지 모두 가져왔다. useInput import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { nanoid } from '@reduxjs/toolkit'; import { __addTodos } from '../redux/modules/todoSlice'; const useInput = () => { const [title, setTitle] = useState('');..

Today, What I learned? 웹이나 앱이나 어떤 정보들을 로컬 데이터베이스에 저장해야 하는 경우가 있다. 투두리스트를 왕창 만들고 있으니 이걸 예시로 들자면, 새로고침하거나 종료 후 다시 실행했을 때 전에 작성했던 리스트가 남아있는 것이 필수! 브라우저에 로컬 스토리지가 있다면, React Native에서는 AsyncStorage를 이용해서 저장해볼 수 있다. Async Storage 공식 문서에 들어가 보면 아래와 같은 내용이 있다. Data storage system for React Native. 리액트 네이티브를 위한 데이터 스토리지! 저장하거나 불러오는 방식이 Local Storage를 사용하는 방식과 거의 흡사하다. https://react-native-async-storage.g..

React Native 리액트 네이티브는 리액트로 모바일 앱을 만들 수 있는 프레임워크다. 모바일 앱을 만들 수 있는 다양한 언어와 프레임워크들이 있지만, 리액트 네이티브를 사용하는 이유는 크게 두 가지다. 비용 절약 리액트 네이티브는 안드로이드, iOS 네이티브 앱을 One Source, 즉 하나의 코드로 동시에 만들 수 있기 때문에 여러 비용, 시간 측면에서 크게 절약된다. 낮은 러닝커브 네이티브 역시 리액트를 기반으로 하기 때문에 기존에 리액트를 사용할 줄 아는 사람이라면 빠르게 배울 수 있다. 리액트 네이티브의 최근 아키텍처는 아래와 같이 변경되었다. React Native 프로젝트 만들기 리액트 네이티브로 프로젝트 만드는 방법은 여러 가지가 있다. 공식 문서에서는 크게 두 가지를 소개하고 있다...