작은 지식주머니

Metro는 엔트리 파일과 다양한 옵션을 사용할 수 있으며, 모든 코드와 종속성을 포함하는 단일 자바스크립트 파일을 반환해주는 Javascript 번들러입니다. 메트로는 개발자가 코드 작업을 할 때 React-native 개발자의 경험을 개선하는 데 중점을 두었습니다. 앱 개발 시에 작은 변화에도 처음부터 끝까지 번들링하여 보여주는 방식을 탈피하기 위하여 태어났습니다. Metro 번들링 프로세스는 세 가지 단계로 나뉘어집니다. 1. 해결 Metro는 진입점에서 필요한 모든 모듈의 그래프를 작성합니다. 메트로는 다른 파일에서 어떤 파일이 필요한지 찾기 위해서 Resolver 를 사용합니다. 이 단계는 변환 단계와 병행하여 발생합니다. 2. 변환 모든 모듈은 하나의 transfomer를 거치게 됩니다. tr..

React-native 에서 디버깅을 했던 과정들을 공유드립니다. 저는 일단 이러한 환경에서 작업을 하였습니다. 1. WebStorm 2022.3 2 .Xcode 14.2 3. AndroidStudio 1. React-native 자체에서 제공하는 디버깅 툴 사용 https://reactnative.dev/docs/debugging Debugging Basics · React Native Accessing the Dev Menu reactnative.dev 리엑트 네이티브 개발환경에서 기본적으로 제공해주고 있습니다. 에뮬 1. 안드로이드 command + m 2. IOS command + d 핸드폰을 연결하여 사용하였을 때 1. 기기 위아래로 흔들기 1. Reload 앱 재시동 2. Change Bund..

CATE 앱에서 Infinite-scroll 기능을 제공하는 Feed 스크린이 있습니다. 앱 출시 초기에는 렌더링 아이템이 무겁지 않았고 데이터도 적어 아이템을 그대로 FlatList에 담아 노출하였습니다. 하지만 렌더링 아이템 기능 추가, 데이터 누적에 따라서 리스트에 데이터가 쌓이면서 UI FPS 60을 유지하던 리스트가 UI FPS 30 이하로 내려갔습니다. 그리고 초기 렌더링 속도도 점점 느려져 갔는데요. 각 아이템의 렌더링 아이템이 너무 무거워 초기 렌더링 속도가 5초 이상 대기하는 일이 많아졌습니다. 데이터 증가에 따른 UI FPS 문제, 렌더링 아이템 속도 개선을 하기 위해서 시도하였던 방법들을 공유하겠습니다. 개선 방법 1 React 내장 함수 사용하기 매번 새로운 함수를 새롭게 메모리에 ..