본문 바로가기

전체

(154)
esbuild로 리액트 네이티브에서 HMR을 구현해 보자. GitHub - JoonDong2/react-native-esbuildContribute to JoonDong2/react-native-esbuild development by creating an account on GitHub.github.com1. 필요성HMR(Hot Module Reload)의 핵심은 앱의 전체 상태를 유지하면서 변경된 부분만 빠르게 빌드하고 교체하는 것입니다. 개발자 경험에 있어서 아주 중요한 부분이라고 생각합니다. esbuild가 아무리 빠르다고 하더라도, 번들링 이외의 기능을 거의 제공하지 않는다는 것에 많은 아쉬움을 느꼈습니다. esbuild로 리액트 네이티브 앱을 번들링하는 라이브러리는 이미 몇 개 있지만, HMR은 지원하지 않거나 아직 개발중인 것으로 보입니다.https..
리액트 스트리밍 SSR 직접 구현 쿼리 파라미터로 받은 값을 3초 후 그대로 화면에 출력하는 매우 간단한 앱을 스트리밍 SSR로 구현해 보겠습니다.로딩은 Suspense로 처리하고, Promise 정보를 서버와 클라이언트가 공유하는 과정까지 포함됩니다.참고로 서버와 클라이언트가 데이터를 공유하는 과정은 그냥 이런 방법이 있다는 정도로 넘어가면 될 것 같습니다.이 과정을 포함한 이유는 대부분의 앱에서 서버와 클라이언트간 데이터 공유가 필요할 텐데, 이러한 과정이 그냥 되는 것은 아니라는 것을 보여드리고 싶어서 입니다. 예제 코드 GitHub - JoonDong2/react-streaming-ssrContribute to JoonDong2/react-streaming-ssr development by creating an account on..
wix/react-native-navigation 코드 분석 react-native cli로 앱을 생성하면 아래와 같은 index.js 파일이 생성됩니다.import {AppRegistry} from 'react-native';import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => App); AppRegistry.registerComponent는 입력받은 컴포넌트를 모듈 내부의 Runnables 객체에 등록합니다.https://github.com/facebook/react-native/blob/v0.75.3/packages/react-native/Libraries/ReactNative/AppRegistry.js#L66-L127 Runnables 객체에는 여러 개의..
리액트 네이티브 Fabric 랜더러는 항상 빠를까? 리액트 네이티브의 New Architecture에서 새로 도입된 랜더러인 Fabric가 기존 랜더러와 어떻게 다른지, 어떤 흐름으로 리액트 트리를 네이티브 뷰 트리로 변경시키는지, 정말로 빠른지 알아보고자 코드를 분석해 봤습니다.목차1. 리액트 랜더링2. Old Arhitecture 랜더러 (이하 구 랜더러)3. New Architecture 랜더러 (이하 Fabric)  3-1. 커밋  3-2. 마운트 예약  3-3. 마운트 실행 타이밍4. Fabric은 구 랜더러에 비해 항상 빠를까?5. 그래도 Fabric으로 넘어가야 하는 이유  5-1. 동시성 모드  5-2. 브라우저와의 유사성1. 리액트 랜더링react 랜더링 과정은 랜더 단계, 커밋 단계로 나뉩니다. 랜더 단계에서 beginWork로 leaf..
flash-list로 복잡한 레이아웃 구현하기 FlashList로 복잡한 레이아웃을 쉽게 그리기 위해 "직접" 제작한 flash-section-list에 대한 내용입니다.목차1. 필요성2. demo3. workflow  3-1. 최소 공배수  3-2. 섹션 데이터 직렬화  3-3. overrideItemLayout  3-4. getItemType4. 한계1. 필요성네이버 웹툰과 같은 레이아웃을 요청받았다고 가정해 보겠습니다. 섹션간 경계 영역이 있지만, 섹션끼리 아이템 형태가 같은 경우입니다. FlatList의 중첩 기능을 사용하면 간단하게 구현할 수 있겠지만, 리액트 네이티브가 느린 이유 포스트에서 살펴봤듯이, FlatList는 성능 문제가 있었습니다. FlashList를 사용하여 섹션간 아이템을 재사용하고 싶은데, 단일 FlashList만 사용하..
리액트 네이티브에서 IntersectionObserver를 대체하는 방법 브라우저의 IntersectionObserver를 대체하기 위해 "직접" 제작한 react-native-observable-list에 대한 내용입니다.목차1. 필요성2. 대체재  2-1. react-native-intersection-observer  2-2. setInterval 방식3. react-native-observable-list4. demo5. workflow  5-1. viewableKeys  5-2. isInViewPortRecursively  5-3. store1. 필요성광고 노출 여부(+ 얼마나 오래, 일정 비율 이상 노출되었는지), 애니메이션, 최적화(예: 동영상이 뷰포트 밖으로 나가면 정지) 등 요청사항이 있을 때, 브라우저 환경에선 IntersectionObserver API를..
리액트 네이티브 WebView 중첩 react-native-webview는 안드로이드에서 NestingScroll API를 준수하지 않기 때문에, ScrollView 중첩과 마찬가지로 ScrollView 안에 WebView를 랜더링하면 스크롤이 잘 작동하지 않습니다. 이 경우 WebView의 높이를 컨텐츠 높이까지 늘려서 사용했는데, WebView의 높이가 너무 길어지면 앱이 꺼지거나 스크롤이 튀기는 현상이 발생했었습니다. 그리고 웹뷰도 브라우저이기 때문에, 컴포지터 스래드에서 뷰 너비에 맞는 부분만 가져와 표시하는 최적화가 적용되어 있을텐데, 모든 컨텐츠를 표시하면 리소스도 많이 잡아먹을 것 같습니다. 이 경우 NestedScrollWebView를 사용할 수 있습니다. react-native-troika/packages/nested-sc..
리액트 네이티브 스크롤뷰 중첩 안드로이드의 경우 네이티브 NestedScrollView를 사용하고, iOS는 네이티브 스크롤뷰를 조작하여 내부 스크롤 뷰와 함께 작동할 수 있게 만든 스크롤뷰입니다. react-native-troika/packages/nested-scroll at master · sdcxtech/react-native-troikaNative UI Component for React Native, including nested-scroll, pull-to-refresh, bottom-sheet, etc. - sdcxtech/react-native-troikagithub.com 안드로이드리액트 네이티브의 ScrollView 컴포넌트는 네이티브 ScrollView 뷰를 제어하는 컴포넌트입니다. 기본 ScrollView는 중..