728x90 반응형 source-code/React Native6 Cannot find module 'expo/bin/cli.js' 에러 해결 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.. 2024. 1. 22. KeyboardAvoidingView 관련 troubleshooting 문제 상황 android와 IOS는 같은 속성이라도 다르게 적용되는 값들이 존재한다. 대표적 예시가 keyboard와 관련된 순간! position absolute의 bottom 0인 element의 경우 android에서는 키보드가 올라올 경우 자동적으로 키보드를 제외한 화면 높이를 100%로 계산하지만(adjustResize), IOS는 키보드가 올라오더라도 전체 높이가 조절되지 않는다. 이러한 상황을 해결하기 위해 React Native에서 제공하는 기본 컴포넌트가 → KeyboardAvoidingView 되시겠다. ... 현 앱에서도 KeyboardAvoidingView를 사용해 input이 있는 페이지의 UI를 구성해주고 있었다. 그런데 문제..! bottom 0에 위치하는 absolute한 버.. 2023. 8. 16. react-native-webview ↔ web 데이터 송수신 웹으로 구현한 채팅방 페이지를 앱 내부에 띄워주는 상황. import WebView from "react-native-webview"; RN에서 기본적으로 제공하는 WebView 컴포넌트를 통해 앱 내부에서도 WEB_URL에 해당하는 웹페이지를 띄울 수 있다. 여기서 문제. 서비스 대상자인 미용사와 보호자 모두 동일한 WEB_URL로 채팅방에 접속한다는 사실! 따라서 현 사용자가 미용사인지, 보호자인지 구분하는 flag가 필요했다. → 현 도매인 상황을 고려했을 때 앱에서 해당 URL에 접근했을 경우, 이를 미용사로 판단해야했다. 그렇다면... 어떻게 앱에서 WEB_URL에 해당하는 웹페이지에 특정 데이터를 전달할 수 있을까? https://github.com/react-native-webview/rea.. 2023. 8. 16. React Native TextInput 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.. 2023. 8. 16. RN _ App Development 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.. 2021. 8. 2. RN _ Core Components 친철한 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대장을 통해 자식 요.. 2021. 7. 30. 이전 1 다음 728x90 반응형
