좌충우돌 anecdote

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

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

상태 관리의 필요성 React에서 가장 중요한 상태값은 state가 많은 것은 문제가 되지 않지만, state가 많아지고 그것을 사용하는 컴포넌트의 갯수가 늘어날 수록 props drilling이 심해진다. state를 관리하지 않으면 여러 상태 값에 의해 컴포넌트가 재렌더링이 된다는 뜻이다. state가 어디서 어떻게 변하는 지 한 눈에 파악하기 힘들어지고, 어떤 컴포넌트에 의해 상태 값이 변화했는지 손쉽게 파악하기 힘들다. 그래서 우리는 전역 상태를 관리해야 하고, React 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 상태 관리 라이브러리를 사용한다. 상태 관리 라이브러리 상태 관리 라이브러리는 다양하다. Context API, Redux, MobX, Recoil 등의 많은 도구가 있고..

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

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

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

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

며칠 전 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..

앱을 launch 하자마자 error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`. 에러가 발생했음. 에뮬레이터가 없다는 에러인데, 안드로이드 스튜디오에 들어가보면 에뮬이 잘 동작되고 있음. 따라서 앱도 안켜짐. 확인해보자. $ react-native doctor sdk 경로 문제인 것을 확인 터미널에서 zshrc 파일을 편집해준다. $ vi ~/.zshrc 위와 같이 파일을 열고 아래의 안드로이드 관련 부분 코드를 적어준다. export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_SDK_ROOT/emul..

현재 상황 Screen에서 Modal로 이동할 때 해당 데이터 값을 넘겨줘야 하는 상황 이때 사용되는 state는 총 2개로 1. 모달을 열어주는 state 2. 데이터 값을 받는 state 이런 상황에서 값을 넘겨주는 방식은 2가지가 있다. 1. props로 전달 2. DeviceEventEmitter 사용 첫 번째 방식은 모달이 mount 됐을 때 상태 값을 2개를 관리해줘야해서 번거로운 반면, 두 번째 방식은 항상 모달이 listen중이니 2개의 state 관리가 필요 없고, 값을 전달 받을 수 있다. Screen import { DeviceEventEmitter } from 'react-native'; DeviceEventEmitter.emit('aaaa', data); // 넘기는 data Mo..