React Native

시작말칭찬스티커 앱 Podo에서 구현하기 가장 까다로웠던 기능은 스티커 드래그앤드롭이었다.현실에서의 스티커를 떼고 붙이는 아날로그 경험을 앱에서도 비슷하게 구현하고 싶었고, 요구사항은 다음과 같았다.스티커를 뗄 때는 Long Press로 떼고, 이 때 햅틱 피드백으로 스티커가 떨어졌음을 알려준다.스티커는 스티커판의 아무 칸에 붙이는 게 아니라 비어있는 가장 앞쪽 칸에만 붙일 수 있다.유효한 영역(± N px)에 놓았을 시 scale 애니메이션과 함께 자석처럼 붙어야 한다. 전체 구조드래그앤드롭 시스템은 크게 3가지 요소로 구성된다.영역 측정 (좌표 추적) -> 드래그/드롭 가능한 영역들의 위치를 파악드래그 상태 관리 -> 사용자의 터치 이벤트를 추적하고 드래그 상태를 관리드롭 검증 로직 -> 스티커가 ..

시작말React DevTools를 사용해서 성능 최적화를 해보고 싶었고, 모동숲 마켓 프로젝트의 게시글 목록과 아이템 목록을 프로파일링하고 최적화해봤다.FlatList의 최적화 기법은 알고 있었으나 프로파일러로 실제로 얼만큼 개선되는지를 확인하면서 해보는 건 처음이었다.결과가 생각보다 유의미해 기록하고자 글을 작성한다. 최종 결과: 렌더링 횟수 66% 감소, 총 렌더링 시간 81% 단축측정 환경아이템 목록에서 토용 카테고리에는 189개의 아이템이 있는데, 이 목록을 처음부터 끝까지 스크롤하는 과정을 프로파일링해서 렌더링의 평균 시간을 측정했다. 최적화 전 프로파일링 결과VirtualizedList가 42번 렌더링평균 렌더링 시간: 52.84ms최대 렌더링 시간: 80.3ms60fps 기준(16.67ms)..

시작말React Native는 JavaScript로 네이티브 앱을 개발할 수 있게 해주는 강력한 프레임워크입니다.하지만 오랫동안 브릿지(Bridge) 시스템이라는 근본적인 성능 병목이 존재했습니다.2024년 10월 React Native 0.76 버전부터 이러한 한계를 극복한 새로운 아키텍처가 기본값으로 적용되기 시작했습니다.이 글에서는 기존 브릿지 시스템이 어떻게 동작했고 어떤 문제가 있었는지, 그리고 새로운 아키텍처가 이를 어떻게 해결했는지 살펴보겠습니다.React Native 앱의 기본 구조: 두 개의 세계React Native로 개발한 앱은 크게 두 개의 스레드으로 구성되어 있습니다.메인 스레드 (UI 스레드)iOS에서는 Objective-C/Swift, Android에서는 Java/Kotlin ..

아이템을 검색하는 목록을 구현하던 중 아래와 같은 경고 메세지가 떴다.VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 3869, "dt": 873, "prevDt": 1836}이 메시지를 해석하면 다음과 같다."리스트 항목이 너무 많고, 업데이트 속도가 느립니다. renderItem 함수가 불필요하게 자주 실행되고 있을 수 있으니, React.mem..

시작말react-native-seoul/naver-login 라이브러리를 사용하여 네이버 로그인을 구현하려고 했으나 Firebase Authentication에서 제공하는 OpenID Connect Provider를 활용하는 방식과는 맞지 않아 어려움을 겪었습니다.하루 정도 이 문제를 해결하느라 소요했는데, react-native-seoul/naver-login과 Firebase Authentication을 함께 사용하는 방법에 대해 정리된 자료가 부족한 것 같아서 정리해봅니다!기존에 구현한 카카오 로그인(OpenID Connect)아래 코드는 기존에 구현한 카카오 로그인 방식입니다.Firebase의 OpenID Connect Provider를 활용한 방식인데요. idToken을 이용해 credentia..

시작말개인 프로젝트로 Todo 앱을 만들면서, 각 목록 간에 리스트 아이템을 드래그 앤 드롭(Drag & Drop)하는 기능을 구현하게 되었습니다.이때 아이템이 드롭된 위치가 어떤 목록에 속하는지를 판별해야 했고, 이를 위해 각 드롭 가능한 영역의 위치와 크기(아래의 점선 표시된 영역)를 계산하고 드래그 중인 아이템이 드롭됐을 때 그 위치가 해당 영역에 비교하는 작업이 필요했습니다.이 과정에서 드롭가능한 영역의 크기와 위치를 계산하기 위해 onLayout, ref.measure, ref.measureWindow를 사용해봤고, 결과적으로 저는 ref.measureWindow를 활용해 문제를 해결할 수 있었습니다.이 글에서는 문제 상황, 각 방식의 특징, 그리고 사용 사례를 정리하고자 합니다.문제 상황: D..

react-native-dotenv: React Native와 Expo 프로젝트에서 .env 파일에 저장된 환경 변수를 쉽게 불러올 수 있도록 도와주는 라이브러리이 라이브러리는 Babel 플러그인을 활용하여 환경 변수를 빌드 타임에 코드에 주입합니다.1. react-native-dotenv 설치npm install react-native-dotenv 2. babel.config.js 설정 파일 생성 및 수정React Native/Expo는 Babel을 사용해 코드를 변환하기 때문에 react-native-dotenv를 사용하려면 Babel 플러그인으로 등록해야 합니다.Babel 설정 파일(babel.config.js)이란?Babel의 변환 작업을 구성하는 설정 파일.프로젝트 루트 디렉토리에 위치하며, 필..