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..

친철한 RN 튜토리얼 가이드! https://www.reactnative.express React Native Express The all-in-one guide to React Native www.reactnative.express RN의 특징(vs react) - 모든 레이아웃 배치는 flex를 기본으로! - 이 때 flex 속성은 기본값이 row. - 쌓임 맥락 → 코드 작성 위치가 레이아웃에도 영향 미침. (태그 내부 = Z 축 쌓임, 태그 하단 = Y축 쌓임 으로 생각하면 될 듯) Core Components 1. View 웹의 div에 해당하는 컴포넌트. RN의 가장 기본적인 컨테이너 역할. 스타일과 자식 요소들의 레이아웃 배치에 사용됨. 2. Layout flex 속성 3대장을 통해 자식 요..