본문 바로가기

React-Native12

React Native, Web 크로스 플랫폼 디자인 시스템 Storybook 구축하기 📒 React Native, Web 크로스 플랫폼 디자인 시스템 Storybook 구축하기React Native로 앱을 만들고, 같은 디자인을 웹앱에도 적용해야 하는 상황이 반복 되어, 팀과 함께 react-native-web 기반의 크로스 플랫폼 디자인 시스템을 만들었습니다. 컴포넌트는 잘 나왔는데, 문제가 하나 있었습니다. 22개 컴포넌트가 전부 Compound Component(합성 컴포넌트) 패턴이라 "어떻게 조합해서 쓰는 건데?"라는 질문에 코드만 보여주기엔 한계가 있었습니다. 결국 Storybook을 직접 셋업했고, 그 과정에서 webpack 설정과 꽤 오래 싸웠습니다. 그 경험을 공유해보려 합니다. 환경 정보React Native, ExpoStorybook 8.6.4 (@storybook.. 2026. 4. 11.

React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자 GitHub - devlasbe/react-native-otel-example: React Native 애플리케이션 OpenTelemetry 적용 템플릿React Native 애플리케이션 OpenTelemetry 적용 템플릿. Contribute to devlasbe/react-native-otel-example development by creating an account on GitHub.github.com📒 React Native에서 OpenTelemetry 사용하기, OTEL Web SDK로 구현해보자React Native 앱의 옵저빌리티(Observability)를 높이고 싶어서 OpenTelemetry(OTEL)를 찾아봤습니다. 문서도 읽고, SDK 목록도 살펴봤는데, 없습니다. RN 전용 .. 2026. 3. 4.

React Native Lazy Loading으로 앱 시작 속도 개선하기 📒 React Native Lazy Loading으로 앱 시작 속도 개선하기이번에 회사에서 앱 성능 개선 작업 업무를 하며 시작 속도 개선을 위해 Lazy Loading을 도입했습니다.그 과정에서 앱 시작 속도를 2~3배 개선하는 성과도 있었고, 이걸 측정하고 분석하느라 RN 구동 방식에 대해서도 깊게 파악하며 이리저리 공부가 많이 된 것 같습니다.그럼 react native에서의 Lazy Loading과 적용을 통한 속도 개선, 측정 방식까지 소개드립니다.📌 React Native 앱이 실행될 때React Native로 빌드한 앱은 기본적으로 내부에 단일 번들 파일이 존재합니다.이 번들 파일은 앱을 실행할 때 entry point인 index.js에서부터 모든 import를 타고 들어가 전체 JS .. 2025. 5. 19.

react-native-performance로 앱 시작 시간 측정하기 📒 react-native-performance로 앱 시작 시간 측정하기이번에 회사에서 앱 성능 개선 업무를 맡아 정말 열심히 했습니다.그 과정에서 앱 시작 속도도 정말 크게 개선되었는데, 수치로 보여주지 않으면 그저 감일뿐이겠죠? 수치화를 하려고 프로파일링 도구들을 많이 찾아보다 react-native-performance라는 패키지를 선택하게 되었습니다.가장 주요한 이유는 Cold Start 시 앱 번들 로드 시간을 측정할 수 있기 때문입니다.그럼 세팅부터 초기 번들 로드 시간 + 초기 화면 렌더링 시간 프로파일링까지 소개드립니다.📌 설치https://shopify.github.io/react-native-performance/$ yarn add @shopify/react-native-perfor.. 2025. 5. 17.

react-native 버전 업그레이드 가이드, v0.69 to v0.78 📒 react-native 버전 업그레이드 가이드, v0.69 to v0.78최근에 현재 개발하는 리액트 네이티브 앱의 버전을 업그레이드하는 업무를 맡게 되었습니다.리액트 네이티브 버전 업은 평소에도 악명이 자자해서 지래 겁부터 먹었지만, 생각보다 일정을 넉넉하게 받게 되어 차근차근 버전을 올리다 보니 0.69 버전에서 0.78 버전까지 올리게 되었습니다. 이왕 하는 거 기존에 호환성 문제 때문에 런타임 에러를 유발하던 Hermes 엔진도 enable 한 뒤 어느 정도 런타임 에러도 잡았겠다, 마냥 두려워했던 RN 버전 업그레이드에 대한 가이드를 작성해보려 합니다. 📌 전략 세우기RN 버전을 올린다는 것은 바뀐 네이티브 코드들을 반영하고 패키지 버전을 맞춰주는 게 알파이자 오메가인 작업입니다.제가 지.. 2025. 4. 19.

2025년 React Native 현황과 CLI vs Expo 비교분석 📒 2025년 React Native 현황과 CLI vs Expo Go 비교분석2023.07.13 - [React-Native] - React Native 장단점과 CLI, Expo 비교와 후기이 글을 쓴 지도 어언 1년 하고도 6개월이 지났습니다. 그동안 플러터가 치고 올라오며 RN은 이제 죽었나 생각이 들 때마다 무언가 하나씩 등장하며 엎치락뒤치락하는 상황이 반복되었습니다.정말 짧은 시간이었지만 그동안 RN이 0.76 버전까지 올라오며 어떤 변경점들이 있었는지 알아보고, 이제는 Expo를 마음 놓고 사용해도 될지 알아보겠습니다. 📌 Hermes Enginehttps://reactnative.dev/architecture/bundled-hermesHermes는 Meta에서 개발한 React Nati.. 2025. 1. 15.

[React Native] Android Native-Module Event Listener 만들기 📒 [React Native] Android Native-Module Event Listener 만들기Native 모듈을 만드는 것은 간단하지만 여기에 Event Listener가 더해진다면?찾아보아도 딱히 참고할 만한 예제도 없고, 업무 준비와 공부도 할 겸 제가 A부터 Z까지 만들어보고 기록합니다. 📌 폴더 및 파일 생성안드로이드 네이티브 모듈을 만들기 위해서는 자바 혹은 코틀린 파일을 다음과 같은 경로로 생성해주어야 합니다./android/app/src/main/java/패키지명/ 저는 모듈의 이름을 Event로 지었습니다.📌 모듈 파일 생성// EventModule.javapackage com.패키지명.event;import android.os.Handler;import android.os... 2025. 1. 10.

[React-Native] ScrollView 스크롤 버벅임 최적화하기 ⚡ ScrollView 버벅임 현상 외주 업체에서 상품소개 페이지를 만들었다고 해서 확인을 해봤습니다. 아이폰에서는 잘 작동하지만 안드로이드에서는 스크롤이 불가능할 정도로 버벅거리는 현상이 발생했습니다. react-native의 스스로 화면 밖 요소를 최적화해주는 FlatList 를 사용해 볼까 싶었지만 일정한 포맷이 반복되는 요소들이 아니어서 결국엔 ScrollView를 사용할 수 밖에 없었습니다. 처음에는 상태 관련된 최적화가 되어 있지 않아서 발생하는 문제인 줄 알았지만, 이리저리 헤매다 결국엔 ScrollView 내부에 너무 많은 요소가 존재해 발생하는 문제라는 것을 알아냈습니다. ScrollView 내부엔 40장 이상, 총합 7mb 정도 되는 이미지들과 가벼운 컴포넌트들이 있었는데 최신 기기에서.. 2023. 10. 14.

[React-Native] BackHandler, 뒤로 가기 시 앱 종료 묻기 ⚡ React-Native BackHandler 앱 제작 중 로그인 화면이나 메인 화면에서 뒤로 가면 즉시 앱이 종료되어 불편함을 느꼈습니다. 곰곰히 생각해보니 기존에 사용하던 어플들은 앱을 종료할 때 모달창으로 한번 더 ‘종료 하시겠습니까?’ 하고 물어보던 것이 생각이 나서 적용해봤습니다. 그럼 기능부터 사용법, 문제 해결, hooks으로 분리한 과정을 설명하겠습니다. 📌 BackHandler 주요 기능 import { BackHandler } from 'react-native'; ... useEffect(()=>{ const backAction = () => { // 여기에 뒤로 가기 버튼을 눌렀을 때 수행할 작업을 정의합니다. // 작업을 수행한 후에는 true 또는 false를 반환합니다. // .. 2023. 7. 21.

이전 1 2 다음

티스토리툴바