Develop/React & React Native 88

[React Native] Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

분명 ApolloProvider에 client를 잘 넣었는데 이러한 오류가 발생할 때가 있다. 그럴 땐 useMutation(또는 useQuery or useLazyQuery)를 import 하는 패키지를 확인하자. import { gql, ApolloError, useMutation } from '@apollo/client'; // no!!!! import { useLazyQuery } from '@apollo/react-hooks'; import { gql, ApolloError } from '@apollo/client'; import { useLazyQuery, useMutation } from '@apollo/react-hooks'; // right!!!! useMutation은 @apollo/c..

[React Native] Upgrade 0.61.5 to 0.63.4

업데이트를 하자! 제가 운영중인 루빗이라는 어플을 처음 init한지 벌써 1년이 되었어요! react-native 버전이 그새 많이 올라서 업그레이드를 해보려고 합니다. Upgrade Helper Step 1 - Edit Code https://react-native-community.github.io/upgrade-helper 이 사이트를 이용하면 원하는 버전으로의 업데이트를 위해 무엇을 해야하는지 알 수 있어요. 저는 0.61.5에서 0.63.4로 업그레이드를 할겁니다! https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.63.4 여기에 나와있는대로 코드를 수정해주세요. 참고) storyboard 추가하기 기존 ios/R..

[React Native / Android] unexpected element <queries> found in <manifest>

에러 unexpected element found in 해결법 android/build.gradleAndroid Gradle plugin 버전을 3.4.2에서 3.4.3으로 바꿔준다. classpath("com.android.tools.build:gradle:3.4.3") 참고 링크 https://github.com/ivpusic/react-native-image-crop-picker/issues/1406 https://stackoverflow.com/questions/62969917/how-do-i-fix-unexpected-element-queries-found-in-manifest https://android-developers.googleblog.com/2020/07/preparing-your-b..

[React Native] ScrollView과 position: absolute를 같이 쓰고 싶을 때 (flex를 이용하는 방법)

목표 각각의 탭을 클릭했을 때 나오는 content가 scrollview이면서 그 scrollview의 position이 absolute이고, zIndex로 해당 scrollview를 보여주고 숨기고를 구현하고 싶었다. 실패 여느 view를 구현하듯이 scrollview에도 position: 'absolute'를 적용했더니, 끝까지 스크롤되지 않았다. 구글링을 많이 해봤지만 통하지 않았다. 해결법 position: 'relative'. 즉 position은 건들지 않고, flex만 건들면 되는 문제였다. height도 설정해줘야 한다. 그렇지 않으면 완전히 겹쳐지지 않는다. 나같은 경우는 1000으로 설정했지만, 실제로 1000까지 스크롤되지는 않는다. 코드 {/* S1 *} {...content} {/..

[React Native / iOS] Admob 에러 - [admob/unknown] the provided view controller is already presenting another view controller

에러 [admob/unknown] the provided view controller is already presenting another view controller 원인 다른 화면에서 광고를 사용하고 있는데, 광고 id가 다름에도 불구하고. 알고보니, 나는 react-native-modal을 이용해 모달을 띄운 후 그 안에서 광고를 불러오려고 시도하고 있었다. 즉 현재 스크린 위에 모달이라는 뷰가 하나 더 덮여쓰여진 것이다. 그래서 위 에러가 났던 것이다. 그래서 모달에서는 광고를 띄우지 않으면, 광고는 정상적으로 불러와진다!

[React Native / iOS] This app could not be installed at this time 빌드할 때마다 뜨는 오류

iphonedev.co.kr/iOSDevQnA/126342 iOS개발질문 - This app could not be installed at this time. 오류;; - 아이폰데브 This app could not be installed at this time. 이 오류가 계속 뜹니다;; clean build folder 하고 시뮬레이터를 erase all contents and settings 를 하면 딱 한 번 오류가 뜨지 않고 다음 번에 빌드시에 다시 뜨네요 ㅠㅠ iphonedev.co.kr 이곳에 나와있듯이, 1. Products 폴더 삭제 2. Build Settings - product name 검색 - 한글로 되어 있는 이름 영어로 바꾸기 3. General - Display Name 한글..

[React] 다양한 개념 정리

1. Babel이란? - 자바스크립트의 문법을 확장해주는 도구 - 자바스크립트 컴파일러 - 코드 변환기 - 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드입니다만, 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다고 생각 하면 될 것 같습니다. 바벨은 왼쪽 코드를 오른쪽처럼 자바스크립트 문법으로 변경시켜준다. 2. Webpack이란? - 여러개 파..

[React Native / iOS] 앱스토어 배포 참고 링크 모음

chaewonkong.github.io/posts/react-native-appstore.html React Native - iOS 앱 빌드 및 앱스토어(App Store) 배포 React Native - iOS 앱 빌드 및 앱스토어(App Store) 배포 chaewonkong.github.io cyberx.tistory.com/45 내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비 내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비 신나게 알차게 아름답게 앱을 만드셨나요? 이제 앱스토어에 등록해서 배포하셔야죠! 그럴려면 크나큰 산이 두둥하고 나타납니 cyberx.tistory.com junhobaik.github.io/app-store-connect-form/ App..

[React Native] push notification custom sound 설정하기 / 커스텀 사운드 / 푸시알람

라이브러리: github.com/zo0r/react-native-push-notification 버전: 5.1.0 1. iOS 1) project/ios 폴더에 .caf 파일을 추가한다. (xcode에서 말고 finder에서!) 2) xcode에서 다음과 같이 프로젝트 이름에서 우클릭 - Add Files to "project" 클릭 후 ios 폴더에 추가해놓은 파일을 선택한다. 3) 코드 작성 import PushNotification, { PushNotificationScheduleObject } from 'react-native-push-notification'; const scheduleObj: PushNotificationScheduleObject = { id: "1", date: new Dat..