초기 스타트업에서는 모든 기능을 완벽히 구현한 상태로 서비스를 시작하기 어렵습니다. 구독과 같은 필수 기능도 사용자가 어느 정도 확보된 뒤에야 추가되는 경우가 많죠. 제가 운영했던 애견미용샵 관리 애플리케이션, 그루머노트 역시 비슷한 과정을 겪었습니다. 초기에는 예약 관리와 알림톡 전송 기능만으로 출시했지만, 점차 사용자가 늘어나면서 월 구독 정책을 추가하게 되었습니다. 구독 상태에 따라 주요 기능 사용을 제한해야했고, 이를 위해서는 모든 사용자가 최신 버전을 사용하도록 강제할 필요가 있었습니다.문제는 기존 사용자들이었습니다. 구독 정책을 반영한 최신 버전이 배포 되었음에도 불구하고, 일부 사용자는 이전 버전을 계속 사용하고 있어 구독 정책이 제대로 적용되지 않는 문제가 발생했습니다. 이번 글에서는 Re..

1. 문제 상황 현재 사내 서비스는 react-native로 작성되어 있다. expo로 프로젝트를 구성한 덕분에, EAS(Expo Application Services)를 통해 build 및 OTA(over-the-air) 업데이트를 진행하는데... 어느 날부터 eas update시 Cannot find module 'expo/bin/cli.js' 에러가 발생했다. node 환경에서 MODULE_NOT_FOUND 에러가 발생하면 → 열이면 열 패키지가 올바르게 설치되지 않았다는 것! 패키지를 다시 설치하거나, package.json 파일이 올바른 경로에 위치하는지를 확인하면 된다. https://stackoverflow.com/questions/64532188/react-native-expo-cli-ca..

문제 상황 android와 IOS는 같은 속성이라도 다르게 적용되는 값들이 존재한다. 대표적 예시가 keyboard와 관련된 순간! position absolute의 bottom 0인 element의 경우 android에서는 키보드가 올라올 경우 자동적으로 키보드를 제외한 화면 높이를 100%로 계산하지만(adjustResize), IOS는 키보드가 올라오더라도 전체 높이가 조절되지 않는다. 이러한 상황을 해결하기 위해 React Native에서 제공하는 기본 컴포넌트가 → KeyboardAvoidingView 되시겠다. ... 현 앱에서도 KeyboardAvoidingView를 사용해 input이 있는 페이지의 UI를 구성해주고 있었다. 그런데 문제..! bottom 0에 위치하는 absolute한 버..

웹으로 구현한 채팅방 페이지를 앱 내부에 띄워주는 상황. import WebView from "react-native-webview"; RN에서 기본적으로 제공하는 WebView 컴포넌트를 통해 앱 내부에서도 WEB_URL에 해당하는 웹페이지를 띄울 수 있다. 여기서 문제. 서비스 대상자인 미용사와 보호자 모두 동일한 WEB_URL로 채팅방에 접속한다는 사실! 따라서 현 사용자가 미용사인지, 보호자인지 구분하는 flag가 필요했다. → 현 도매인 상황을 고려했을 때 앱에서 해당 URL에 접근했을 경우, 이를 미용사로 판단해야했다. 그렇다면... 어떻게 앱에서 WEB_URL에 해당하는 웹페이지에 특정 데이터를 전달할 수 있을까? https://github.com/react-native-webview/rea..

input이 굉장히 굉장히 많은 페이지 작업을 진행 중인 관계로... 공식 문서의 TextInput를 보며 유용한 기능들을 정리해보자! Props onChange TextInput의 text가 변경될 때 호출되는 콜백 함수. ( { nativeEvent: { eventCount, target, text} }) => void onChangeText onChange와 마찬가지로, TextInput의 text가 변경될 때 호출되는 콜백 함수. onChange와의 차이점은? console.log(text)} /> // 입력한 text 콜백 함수의 argument로 → 입력한 단일 string이 넘어간다! autoFocus default는 false. true시 componentDidMount or useEffe..

Core Component들만 요리조리 잘 넣으면 근사한 앱이 만들....어지진 않을 테다. 특히 '앱'만이 가지는 특징과 개발 방법들을 이해하는 것이 중요! 오늘도 즐거운 튜토리얼 가이드. https://www.reactnative.express/app React Native Express The all-in-one guide to React Native www.reactnative.express 1. Project organiztion 완벽하게 정해진 규칙을 없지만... 대부분 프로젝트의 크기에 따라 파일 구조가 달라질 테다. 즉 규모가 작은 프로젝트는 이런 식일 테고 규모가 큰 프로젝트는 이런 식으로! 이때 유의해야 할 점은... Container Component와 Presentational Co..