React Native Firebase Dev 환경 분리하기 이번 프로젝트에서 개발환경을 설정 중 dev 환경과 prod 환경을 분리하기로 결정을 하여 Front, Back 모두 분리를 시작했습니다. API Endpoint와 그 외 다른 설정들은 env를 통해 관리가 가능 했지만 firebase 설정 파일의 경우 어떻게 분리를 해야 하지? 하여 이번 포스트를 작성하게 되었습니다. Firebase dev 모드 추가하기 가장 먼저 Firebase 설정에서 앱 추가를 통해 dev 환경에서 사용될 iOS, Android 프로젝트 추가가 필요 합니다. 기존의 환경 분리 이전의 Firebase setting이 완료 되어있음을 가정하고 프로젝트를 추가하는 방식에 대해서는 따로 설명을 하지 않도록 하겠습니다. iOS ..
Node Package Manager 지난주 수요일에 AWS FE 세미나를 다녀왔습니다. Next.js와 StoryBook과 관련된 1시간 30분 간의 난상토론이었는데 토론이 막바지에 다다를 때쯤 Package Manager에 관련된 이야기가 나왔습니다. yarn berry에 관련된 이야기를 하다가 다른 분께서 Phantom Dependency를 해결해주긴 하지만 Git에 yarn berry 모듈을 모두 올리면 다운로드하는데 모두 리소스다. 최대로 Git에서 지원해 주는 용량도 한계가 존재한다. 그래서 pnpm을 더 많이 쓴다. 현재 제가 가장 많이 쓰고 있는 것은 yarn v1입니다. 다른 패키지 매니저도 다 사용을 해보았지만 yarn berry : git에 용량 제한이 걸림 pnpm : react n..
eas local build error 해결하기 어느 날 갑자기 잘 사용하고 있던 eas-cli에서 문제가 발생했습니다. 어제는 잘되던 게 오늘은 안된다? 정말 사람 힘들게 하는 거 같습니다. 해결하고 나서 약 3일동안 이것 때문에 고생을 했던걸 생각하면 정말 어이가 없네요… 일단 해결 방법부터 설명하겠습니다 해결 방법 일단 저의 문제는 Developer Relations Intermediate Certificate가 제 Mac에서 날라간 점이었습니다. 이 인증서는 다음의 링크를 통해서 받을 수 있습니다. https://www.apple.com/certificateauthority/AppleWWDRCAG3.cer 만약 다른 인증서가 필요하시다면 여기에서 받아볼 수 있습니다. WWDR Intermediat..
IOS FCM Background Notification 이번 포스트에서는 ReactNative IOS 환경에서의 FCM Background Notification을 다뤄보려고 합니다. 아마 이 포스트까지 찾아오신 분들은 공식문서 기반으로 Setting을 진행하였는데 Background Message에 대해서 사용을 할 수 없으셔서 들어오셨을 것이라 예상됩니다. 😂 기본적인 FCM Message 아래 공식문서를 기반으로 Firebase Setting을 해준다면 기본적으로 ForeGround Message를 받는 것 자체는 어렵지 않습니다. Cloud Messaging | React Native Firebase Cloud Messaging | React Native Firebase Copyright © 2..
useState에 대하여 저번 포스트에서 reRendering에 대해서 다뤘었다. https://ww8007-learn.tistory.com/21 왜 내 컴포넌트는 reRendering이 될까? 이번 포스트에서는 React Component의 reRendering에 대해서 다뤄보려고 합니다. 리렌더링은 안 좋은 거다. useCallback이나 useMemo를 사용해서 최적화를 해야 한다 등 여러 가지 말들이 정말 많은 주제이죠. ww8007-learn.tistory.com reRendering에 대한 내용을 작성하면서 디버깅을 진행하던 도중 문득 나는 React에 대해서 제대로 알고 있는 것이 맞을까? 라는 의문이 들어서 공식 문서를 기반으로 hook 들과 동작 원리에 대해서 이해하고 이를 직접 구현해보..
이번 포스트에서는 React Component의 reRendering에 대해서 다뤄보려고 합니다. 리렌더링은 안 좋은 거다. useCallback이나 useMemo를 사용해서 최적화를 해야 한다 등 여러 가지 말들이 정말 많은 주제이죠. 하지만 내 컴포넌트가 정말 합당하게 reRendering이 되고 있는지는 고민해봐야 할 문제입니다. (요번에 호되게 당했기 때문…) 그럼 한 번 알아볼까요? 왜 reRendering이 되는 걸까? 예시는 주차신청 에플리케이션이며 신청 로직의 경우 step 별로 이루어지기 때문에 Toss의 컨퍼런스 내용의 Funnel 패턴을 이용하여 구현하였습니다. (Funnel 패턴이 무엇인지 궁금하신 분들은 아래 링크를 참고해 주세요) 또한 유저에 대한 상태관리는 전역적으로 사용됨을 ..
WebView 요즘 정말 핫한 주제 중에 하나이죠. 많은 시중의 앱들이 WebView와 + Native 앱을 합쳐서 개발을 빠르게 진행하는 걸로 알려져 있는데요 이번 포스트에서는 웹 개발자의 관점에서 WebView란 무엇이고, 왜 쓰고, 어떤 장단점들을 가지고 있는지에 대해 서 좀 더 자세히 알아볼까 합니다. 그럼 시작해 볼까요? WebView란? WebView는 모바일 애플리케이션에서 웹 콘텐츠를 표시하는 데 사용되는 UI 컴포넌트입니다. 이를 사용하면 애플리케이션 내에서 별도의 웹 브라우저를 열지 않고도 웹 페이지나 웹 앱을 로드할 수 있습니다. iOS와 Android에서 WebView의 동작 방식은 약간 다르지만, 기본 개념은 비슷합니다. iOS (WebKit) iOS에서는 WKWebView 클래스..
이번에는 Webview 환경에서 Background Timer를 구현하는 방법에 대해서 적어볼까 합니다. 바로 인증 코드 기능에 사용될 타이머인데요 이 글을 보시는 분들께서 setTimeout을 이용해 시간초를 줄이기만 하면 되는 거 아닌가요? 하시고 의문이 드실 수 있는데 요번에 구현해 볼 타이머는 조금 특이한? 조건을 가졌습니다. 앱의 Background Mode에서도 동작할 것 아주 간단한 조건이긴 하지만 하면서 좀 까다로운 점들이 있어서 정리를 해두려고 합니다. 그럼 시작해 볼까요? 타이머를 만드는 여러 가지 방법들 타이머를 JS를 이용해서 만든다면 어떤 방법들이 있을까요? 가장 간단하게는 앞서 말했듯이 setTimeout을 이용한 방법이 있을 겁니다. 만약 그러면 창을 벗어나도 계속 타이머가 흐..
이번 포스트에서는 webview 환경에서 카메라를 다루는 법에 대해서 적어볼까 합니다. 요즘 진행 중인 프로젝트에서 원래는 React Native 기반으로만 프로젝트를 진행하려고 하였는데 React Native 환경에서 영상을 촬영 시 화면이 검은색으로 변한 뒤에 영상 촬영이 시작되는데 이 부분에 대해서는 서비스를 출시할 때 매우 크리티컬 한 부분이라고 생각하여서 차라리 카메라/사진 촬영 쪽을 영상으로 옮기고 문제를 해결하자 하고 webview를 사용하게 되었습니다. 23년 9월 15일 기준으로 현재 문제를 확인하고 해결하였다고는 하는데 완전한 해결은 또 아닌가 봅니다 😂 https://github.com/expo/expo/issues/23130 [iOS] Preview flickering and dar..
이번 포스트에서는 React Native에서 Native 모듈을 만드는 법에 대해서 다뤄보려고 합니다. 사이드 프로젝트를 하는데 공유하기 기능인 Share Intent의 경우 지원하는 라이브러리들이 모두 2년 전 라이브러리들이고 제대로 업데이트가 되지 않아서 작동을 제대로 안 하더라고요 😂 Android와 IOS 중에서 Android는 그나마 쉬운 편이라 일단 IOS부터 다뤄보도록 하겠습니다. 일단 들어가기 앞서서 Native 모듈을 사용할 수 있는 환경은 다음과 같습니다. 1. Expo prebuild 환경(android, ios 폴더 존재) 2. Pure React Native 환경 그리고 공유하기에 이용한 데이터는 웹 페이지에서 URL을 공유하는 기능을 만들어볼 것입니다. 다른 사진 공유나 영상 공..