Tech/React Native 19

React Native Optimization (2025) - 리액트 리렌더링 모델

콜스택에서 발행한 RN 최적화 문서인 React Native Optimization를 2023년에 공부했던 것 같은데,2025년 버전도 새로 나와서 이 참에 정리해 봤다. 예전에 웹 개발 팀원분이 React Native도 DOM 기반이에요? 라고 질문했을 때 아닌 건 알았지만, 제대로 설명 못했던 경험이 있는데, 리액트 리렌더링 모델 내용을 정리하면서 그때 생각이 났다. 아직도 React와 React Native의 차이를 모르는 분이라면 해당 내용을 읽어보면 좋을 것 같다.react-dom은 별도의 렌더러라는 것을 ... 앱이 ‘빠르다’는 것은 무엇을 의미할까? ex.1940년대에 뉴욕의 한 오피스 빌딩에서 느린 엘리베이터에 대해 한 직원이 불만을 호소했는데, 건물 관리자는 엘리베이터 속도를 실제로 높이..

Tech/React Native 2025.05.26

[react-native] Android 앱 소스 난독화

Android 앱 개발을 하다보면 보안을 위해서 출시 전에는 꼭 난독화를 해야한다.  Android 소스 난독화란? 앱의 소스 코드를 난독화하는 기술로,안드로이드 앱의 소스 코드를 분석하기 어렵게 만들기 위한 기술입니다.이를 통해 소스 코드를 더욱 안전하게 보호할 수 있습니다. 해커가 앱의 코드를 이해하고 악성 기능을 추가하는 것을 어렵게 만들 수 있습니다.그렇기 때문에 앱을 배포하기 전 앱 소스 난독화는 꼭 필요합니다.   Proguard 적용하기  Proguard는 소스코드를 난독화 및 최적화 해주는 무료 오픈소스 툴입니다. minifyEnabled축소, 난독화 및 코드 최적화를 활성화 / 비활성화 한다. getDefaultProguardFile("proguard-android.txt")Android..

Tech/React Native 2024.08.10

[react-native] iOS HTTP 통신 ATS policy

xcode 에서 iOS 개발 시 http 통신할 때 다음과 같은 에러가 나올 경우가 있다.since it does not conform to ATS policy ... 해당 에러가 났을 때 처음 시도해볼 수 있는 방법은모든 도메인을 허용해주는 방법이다.Info.plist > ATS > Allow Arbirarty Loads를 YES로 바꾼다.  하지만, Allow Arbirarty Loads 설정은 모든 웹사이트에 대한 보안성을 자체적으로 떨어뜨리기 때문에 앱 심사에서도 거절당할 수 있다.  ✔️ HTTP인 도메인 일부만 허용안전하게 특정 도메인만 추가시켜보자. 1. nscurl 명령어를 사용하여 ATS 관련정보를 가져온다.터미널에 아래 명령어를 입력하자.nscurl https://example.com ..

Tech/React Native 2024.07.21

[react-native] react-native와 webview 통신

최근에 웹뷰인 React Native 앱 서비스를 다뤄보는 경험을 했다. 앱 내에서 웹뷰를 띄워보는 희귀한 경험을 해서 꼭 블로그에 작성해야겠다고 다짐했다! 앱 내에서 webview를 띄우면서 가장 중요하고자 어려웠던 부분을 기록하고자 한다. 보통 앱 내에서 사용자들의 히스토리를 기록하고 로깅하고자 로그 이벤트를 기록한다. 그러기 위해서는 웹뷰에서 일어난 이벤트들을 RN에서 감지해야 한다. 목차 1. React-native와 Webview 통신 2. 내가 처했던 문제 상황 React-native와 Webview 통신 1. Web -> RN 위의 예시에서 test data를 받도록 해놨는데, 만약 data를 넘겨줘야 한다면 위의 방식과 같이 넘겨주면 된다. 2. RN -> Web 내가 처했던 문제 상황 W..

Tech/React Native 2023.09.05

[react-native] fastlane을 사용한 앱 배포 자동화 (Android, iOS)

Fastlane 배포 자동화 적용 과정 항상 효율적으로 반복되는 시스템을 자동화하려고 하는데,그 중 하나가 앱 배포 시간을 줄이기 위한 CI/CD 구축하는 것이다. 안드로이드는 배포할 때 생각보다 간단하지만, iOS는 아카이브 한 후 앱스토어 커넥트에 업로드 한 뒤 심사 요청까지 거쳐야하는 귀찮고 번거로운 작업들이 발생한다. 좋은 코드를 만드는 것도 좋지만, 이러한 반복적인 코드들을 자동화하여 업무의 효율을 높이는 것이 중요하다. 예전에 적용했던 fastlane 자동화 일련의 과정을 공유해보려고 한다.  iOS 배포Fastlane 설치# ruby가 이미 설치되어 있다면 생략$ brew install ruby# Fastlane 설치$ gem install fastlaneiOS 설정# /ios$ fastla..

Tech/React Native 2023.08.29

[react-native] 앱 웹뷰 구글 애드센스 광고 추가하기

구글 애드센스 (google adsense) 웹사이트를 위한 것 애드몹 (admob) 모바일 앱을 위한 것 구글 애드센스 정책 하나하나 살펴보며 시간 버린 나같이,, 그런 사람이 없었으면 하는 바람에서 글을 쓰게 됐다. 질문: react-native 앱에서 웹뷰를 띄워 모바일 애드센스 광고를 추가할 수 있나? 답변: 간단하게 말하면 '없다' 하지만, 본인이 크로스 플랫폼이 아닌 네이티브 플랫폼 개발자라면 가능하다! webview API를 사용하면 구글 애드센스 광고를 추가할 수 있다. 단 android, iOS만 가능하다. https://support.google.com/adsense/answer/11893859?hl=ko&ref_topic=28893&sjid=5870858233913781273-AP 정..

Tech/React Native 2023.08.11

[RN 최적화] react-native-bundle-visualizer 사용기

?: 앱 크기가 최적화랑 상관이 있나요? 🧚‍♀️: Yessss! 앱 크기가 작아야 하는 이유 용량 때문에 18.7% 사람들이 앱을 제거한다. 개발자는 항상 번들 크기와 앱 용량을 줄이는 데 주의를 기울여야 한다. WHAT? 코드의 전체 크기에 영향을 미치는 가장 큰 요소 중 하나는 라이브러리이다. 여러 라이브러리를 비효율적으로 사용하고, 원하는 디자인을 위한 커스텀 폰트를 넣다보면 앱의 크기가 커져 앱 속도가 저하됨. native 앱과 달리 react-native 에서는 1. 메모리에 로드해야 하는 javascript bundle이 포함되어 있음. 2. 로드 후 javascript vm에 의해 구문이 분석되고 실행됨. 번들에 사용되지 않는 코드를 제거해주는 tree shaking 조차 native와 달..

Tech/React Native 2023.07.28

react-native 렌더링 최적화 1

요즘 rn 앱 내에서의 ui re-rendering을 막으면서 최적화를 위해 힘쓰고 있다. 여러 방법들을 공부하면서 기록하고자 한다. 📚 프로파일링 하며 시도했던 방법들은 추후에 더 기록할 예정이다 🔥 1. 과도한 커스텀 hook 사용 방지 첫 번째로 우리 앱에는 hook이 정말 많았다. 종속성이 변경되면서 필요하지 않는 화면까지 re-rendering 되는 상황이었다. 최적화를 해보자 - 과도한 hook 사용을 방지하고 필요한 화면. 즉, 해당 컴포넌트 안에서만 hook을 사용하는 방식이다. 예를 들어 하나의 화면 안에 2가지 컴포넌트로 분리되어 있다고 치자. 기존에는 presentational and container 패턴을 사용하면서 1과 2 화면에서 필요한 정보들을 모두 1+2 화면에서 갖고 있었..

Tech/React Native 2023.07.17

[react-native] react-native-draggable-flatlist 모든 아이템이 렌더링되지 않는 이슈

문제 상황 react-native-draggable-flatlist 라이브러리를 사용하는데 해당 데이터가 모두 잘 넘어옴에도 불구하고, renderItem에서 item을 사용하려고 하면 모든 아이템이 렌더되지 않는 상황이 발생했다. ex) the FlatList does not render all 100 items on initial load. 해결 과정 하나하나 디버깅을 해보자. item을 찍어봤을 때 처음에는 반 정도 렌더링이 되고, 드래그를 하니 나머지 아이템이 렌더링 되는 상황을 목격했다. 음, 이건 해당 라이브러리 문제라고 생각해서 해당 라이브러리 이슈를 살펴보았다. 역시 나랑 똑같은 문제를 겪고 있는 사람이 있었다. 해당 이슈: https://github.com/computerjazz/reac..

Tech/React Native 2023.05.28

[Xcode] error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues.Error: Command failed: xcrun simctl list --json devicesxcrun: error: unable to find utility "simctl",

며칠 전 xCode를 14.1로 업데이트했는데, error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Error: Command failed: xcrun simctl list --json devices xcrun: error: unable to find utility "simctl", not a developer tool or in PATH 에러가 났다. 원인 xCode 신규버전을 설치하고 나서 command line tool이 초기화되지 않아서 생기는 문제 2가지 해결법 1. Xcode - Pref..

Tech/React Native 2023.05.20