React Native

프로덕션 배포 전 APK 크기가 50MB를 넘어서 문제가 되었다. ProGuard 설정과 불필요한 의존성 제거를 통해 30MB까지 줄인 과정을 정리했다.

아이폰 X 시리즈 노치 대응을 위해 SafeAreaView를 사용하면서 겪은 문제와 해결 과정을 정리했다. Android에서는 불필요한 여백이 생기는 이슈가 있었고, Platform별 분기 처리로 해결했다.

상품 목록 화면에서 스크롤 시 버벅거림이 심해 FlatList 최적화 작업을 진행했다. getItemLayout, removeClippedSubviews 등의 옵션을 적용해 프레임 드롭을 크게 줄일 수 있었다.

Android 앱의 초기 구동 속도 개선을 위해 Hermes 엔진을 적용했다. 번들 사이즈와 메모리 사용량이 크게 개선되었지만 몇 가지 주의할 점이 있었다.

Android에서 키보드가 TextInput을 가리는 문제를 겪었다. KeyboardAvoidingView와 android:windowSoftInputMode 설정으로 해결했다.

리스트 아이템이 100개를 넘어가면서 스크롤이 버벅이는 문제가 발생했다. getItemLayout과 memo를 활용해 렌더링 성능을 개선한 과정을 정리했다.

iOS 13 정식 출시 후 다크모드를 지원하지 않는 앱들이 이슈가 되고 있다. React Native 0.60 기반 프로젝트에 다크모드를 적용하면서 겪은 문제들을 정리했다.

React Native 0.60으로 업그레이드하면서 AndroidX 마이그레이션 과정에서 겪은 문제들을 정리했다. 특히 서드파티 라이브러리 호환성 문제와 해결 방법을 기록한다.

iOS에서 키보드가 올라올 때 입력창이 가려지는 문제를 해결했다. KeyboardAvoidingView의 동작 방식과 실제 적용 시 주의사항을 정리한다.

iPhone X 이후 노치 디바이스가 늘어나면서 Safe Area 처리가 필수가 되었다. react-native-safe-area-context를 도입하여 기존 하드코딩된 패딩 값들을 제거하고 일관된 레이아웃을 구현했다.