개발 창고

[React Native] FlashList로 리스트의 렌더링 성능 최적화하기

들어가며시대생 서비스의 도서관 예약하기 서비스는 아래 이미지처럼 도서관 현재 좌석 상태를 표시합니다.해당 서비스의 좌석 item을 표시하기 위해 보통 18 x 30 크기의 이차원 배열을 이중 리스트로 렌더링합니다. 이를 구현하기 위해 리스트의 렌더링 성능을 최적화하기 위해 공식문서에서 제시하는 FlatList를 사용하고, getItemLayout prop을 이용하여 구현했습니다. ({ length: itemWidth + 2, offset: (itemWidth + 2) * index, index, })}>하지만 해당 방법을 이용하더라도, 아래와 같이 시뮬레이터 및 실 기기에서 여전히 느린 렌더링 성능을 보여주었습니다.또한 예약 페이지가 넘어가기 전에 버튼이 잠깐 멈춘듯하는 현상과, 렌더링..

[React Native] native module을 이용해 android notification 띄우기

들어가며Android 환경에서 커스텀 알림을 직접 구현하게 된 계기와 구현 과정, 개발을 진행하며 겪은 문제들과 해결 과정을 소개하려 합니다.도서관 이용시간 알림 기능은 유저가 앱에서 나간 상태에도 알림으로 현재 이용시간 또는 외출시간을 쉽게 확인할 수 있도록 하는 기능입니다. 토스의 따릉이를 이용할 때 알림으로 남은 시간이 표시되는 것을 보고, 이 기능을 도서관 이용시간 알림으로 도입해보면 유저에게 편리함을 제공할 수 있겠다 생각하여 iOS를 먼저 구현했고(이전 글), Android를 구현하는 과정에 대해 작성합니다.요구사항도서관 이용시간 알림은 아래와 같은 기능이 구현되어야 합니다.iOS는 ActivitKit으로 구현이 되어있음. Android 환경에서는 이와 비슷하게 동작하기 위해 Notificat..

[React Native] RN에서 Dynamic island 위젯 만들기

들어가며React Native에서 Dynamic Island 위젯을 만드는 방법에 대해 작성했습니다.Info.plist파일 수정프로젝트에서 Live Activity를 사용하기 위해, 프로젝트의 info.plist에 Supports Live Activities: YES 옵션을 추가합니다.새로운 Widget Extension 생성하기File > New > Target으로 들어가서, Widget Extension을 선택합니다.이후 'Include Live Activity' 옵션을 체크한 다음, 원하는 이름으로 위젯을 생성합니다. 저는 이름을 DynamicIslandWidget으로 생성했습니다. (App Intent 옵션은 끄는 것을 추천합니다.)App Group 생성하기앱에서 쓴 데이터인 UserDefault..

[React Native] deeplink를 이용해 알림을 여는 방법(with. notifee)

들어가기 전에 딥링크(deeplink)는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 딥링크를 이용하여 React Native 어플리케이션의 특정 페이지에 도달시킬 수 있습니다. 예를들어 'app://targetPage' 링크를 딥링크로 열게되면 targetPage가 표시됩니다. 구현 요구사항 우선 아래와 같이 notifee를 이용하여 서버에서 보내는 데이터인 notifee.data 영역에 deepLinkUrl을 담습니다. 이후 알림을 전송하고, 앱에서 알림을 받으면 해당 deeplink url을 이용하여 앱을 열어야 하도록 구현합니다. 하지만 이런 방식은 레퍼런스가 없어 기능을 직접 구현하였고,지금부터 구현한 방법을 살펴보겠습니다. "data": { "notifee": { "id": "1", "t..

[React Native] 앱 접근시 필요한 동작을 구현해보자

시대생 앱은 최초 앱 접근시 로그인 유무에 따라 AccountScreen을 보여주거나, MainScreen을 보여줘야 합니다. 또한 로그인이 되어있다면 device 정보를 서버에 업데이트 시키거나, 알림을 위한 firebasePushToken 정보를 얻어오는 과정이 필요하기 때문에 이와 관련된 로직이 앱 접근시 실행되어야합니다. 본 글은 앱 접근시 어떤 로직이 실행되도록 구현했는지, 그리고 어떻게 앱의 전체적인 회원 로그인 관련 처리를 구현했는지를 설명합니다. 시작하기 앞서 시대생 앱의 사용자 인증 인가 방식은 JWT 방식을 사용합니다. React Native의 Device Storage로는 mmkv를 이용합니다. 앱 화면을 보여주는 RootStackNavigator는 아래와 같습니다. const [is..