Front-end/React & React Native

[React Native] ios개발시 실제기기에서 로컬서버 접근 안되는 문제 해결방법

RN 개발시 로컬서버에 아래처럼 접근해서 쓰고있었다. 예시) 서버주소 : http://localhost:1337 안드로이드 : # 에뮬레이터용 adb -e reverse tcp:1337 tcp:1337 # 실제기기용 adb -d reverse tcp:1337 tcp:1337 iOS : 는 그냥 시뮬레이터에서 아무설정 없이도 잘된다. 문제는 iOS 실제기기에 연결하려니 Network Request Fail 에러가 계속 발생했다. 처음엔 보안설정 문제인줄 알고 설정을 만지작 거렸으나 별 효과가 없었다. 조금 찾아보니 iOS에선 안드로이드의 adb reverse 같은 리버스프록시를 허용하지 않는듯 하다. (iOS 시뮬레이터에서 localhost접근이 되는 이유는 에뮬레이터와 달리 분리된 환경이 아니어서 인듯 ..

[React Native] 파일 다운로드시 ios 파일탐색기에서 안보이는 문제 해결방법

rn-fetch-blob 라이브러리를 활용해 다운로드를 구현했는데, ios에선 다운로드 받은 파일이 보이지 않았다. (rn-fetch-blob을 활용한 파일다운로드 구현법은 이 글을 참고하자) React Native 파일 다운로드 구현 (rn-fetch-blob VS react-native-fs) React Native에서 간단한 파일 다운로드를 구현할 일이 있어 패키지를 검색하던중 가장 star가 많은 두 패키지를 비교하였다. npm trend 비교 www.npmtrends.com/react-native-fs-vs-rn-fetch-blob react-native-f.. codecraft.tistory.com 원인은 iOS의 파일브라우저는 탐색을 허용해놓은 앱의 파일만 긁어서 보여주기 때문이었고, inf..

[React Native] ios 앱 배포하기 - 빌드부터 스토어 업로드까지

애플 개발자 등록을 마친상태에서 앱 업로드하는 방법을 적어본다. 1. 인증서 발급 먼저 인증서 발급을 위해 아래 사이트로 이동한다. developer.apple.com/account/resources/certificates/list 상단의 + 버튼을 눌러 인증서를 추가한다. (Xcode11 이상의 경우) Apple Distribution을 선택하고 Continue를 누른다. 그런다음 Mac에서 '키체인 접근' 앱을 열고, '인증서 지원' - '인증 기관에서 인증서 요청'을 선택 사용자 이메일 주소, 일반 이름을 입력하고, '디스크에 저장됨'을 체크한 상태로 계속을 눌러 파일로 저장한다. 저장된 파일을 Choose File을 눌러 업로드후, Continue 버튼을 누르면 인증서 발급이 완료된다. 우측 상단..

[React Native] ios 빌드시 main.jsbundle does not exist. This must be a bug with 에러 해결방법

나의 경우 아래와 같은 에러로 인해 jsbundle 파일이 만들어지지 않고 있었다 const data = _interopRequireDefault(require("chalk")); ^^^^^ SyntaxError: Use of const in strict mode. Sentry관련 소스에서 비롯되는 문제로, Debug symbol upload를 수행할때 구버전의 node를 사용하여 발생하는 문제였다. `nvm ls`명령어로 살펴보니 0.10 버전대의 node가 기본값으로 설정되어있었고, `nvm use stable` 명령어를 통해 현재기준 stable인 12.18버전대로 수정하였다. 그런데도 문제가 해결이 안되어 살펴보니 nvm 환경변수가 .bash_profile에만 설정되어있었고, .zshrc에 환경변..

[React Native] react-native-naver-map ios 빌드시 Undefined symbols for architecture x86_64: 에러

RN 개발중 naver map을 추가하기 위해 아래 패키지를 깔았다 github.com/QuadFlask/react-native-naver-map QuadFlask/react-native-naver-map 🗺️naver map for react-native. Contribute to QuadFlask/react-native-naver-map development by creating an account on GitHub. github.com 안드로이드는 잘되는데, ios 빌드시 아래와 같은 에러가 발생한다. Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_NMFCameraPosition", referenced from: objc-class-ref i..

React Native 이미지/동영상 갤러리(스와이프) 구현 삽질기

RN에서 핀치 줌(pinch zoom)이 지원되는 이미지/동영상 갤러리(스와이프)를 구현할일이 생겨 라이브러리를 서칭해보았다. 1. ascoders/react-native-image-viewer (star 2.1k) ascoders/react-native-image-viewer 🚀 tiny & fast lib for react native image viewer pan and zoom - ascoders/react-native-image-viewer github.com 이 라이브러리가 가장 많은 star를 보유하고 있었고, zoom과 swipe이벤트간 간섭에 대해 훌륭하게 처리해주고 있었다. 보통 스와이프 기능에는 FlatList를 쓰는데, 이 라이브러리는 transform으로 처리하였다. renderH..

React Native 컴포넌트에서 children 스타일 덮어쓰는 방법

export const CustomButton: FC = ({ children, ...props }) => { const childStyle = {color: '#fff'}; const childrenWithProps = React.Children.map(children, (child) => { const childProps = { ...child.props, style: StyleSheet.flatten([childStyle, child.props.style]), }; if (React.isValidElement(child)) { return React.cloneElement(child, childProps); } return child; }); return ( {childrenWithProps} );..

[React] ApolloClient 캐시 비우는 간단한 방법

client.cache.evict({ id: "ROOT_QUERY", fieldName: "posts" })