profile
React-Native 개발블로그

React Native) 'SomeRNComponent' cannot be used as a JSX component. 에러 해결

https://github.com/eslint/eslint/issues/15802 "@types/react": "^16.9.56", -> 17.0.2 "@types/react-native": "^0.63.52", -> 0.66.5

2023년 1월 24일
·
0개의 댓글
·

React Native) ios에 fcm 연동하기

사전 준비 firebase에 프로젝트를 생성하고 작업중인 react native 프로젝트와 연동을 완료해야합니다. react-native-firebase/app (https://rnfirebase.io/) react-native-firebase/messaging (

2023년 1월 24일
·
0개의 댓글
·

React Native) push notification on/off 기능 추가하기

만약 스토어에 notification 기능을 제공하는 앱을 업로드하려고 한다면, 반드시 notification on/off 기능을 추가해야한다. 그렇지 않으면 스토어 정책에 의해 앱 업로드가 거부될 수 있기 때문이다.notification on/off를 수행하는 방법에

2023년 1월 24일
·
0개의 댓글
·

React Natvie) android에서 fcm notification icon 설정하기

firebase messaging 문서를 따라 fcm 연동을 성공적으로 마쳤다면 android에서는 별도의 추가 설정 없이 push notification을 수신할 수 있게 되었을 것이다. 다만 이상태로 push message를 수신하면 notification에 ico

2023년 1월 24일
·
0개의 댓글
·

React Native) local push notification 셋팅하기 (feat: notifee)

firebase messaging 문서를 따라서 fcm 연동을 마쳤다면 (ios는 추가 작업이 필요하겠지만) push message를 수신하는 것 자체는 문제가 없을 것이다. 하지만 그것을 사용자에게 노출하는 것은 별개의 문제다.백그라운드 환경에서는 push messa

2023년 1월 24일
·
0개의 댓글
·

React Native) firebase messaging server key 발급받기

firebase 콘솔에 프로젝트를 성공적으로 만들고 나면 프로젝트 설정> 클라우 메시징 탭에서 server key를 볼 수 있다.다만 새로운 버전이 나오면서 기존 버전이 레거시가 되었는데, 이 부분을 활성화 시켜주어야 서버키를 받아올 수 있다.Cloud Messagin

2023년 1월 23일
·
0개의 댓글
·

React Native) react native로 webview앱 만들기(1)

react-native project 만들기 react native 프로젝트를 만드는 두 가지 방법 react native webview app을 만들기 위해서는 가장 먼저 react native project를 생성해야한다. react native 앱을 만드는 방법에

2023년 1월 23일
·
0개의 댓글
·

React Native) firebase "Property with 'retain (or strong)' attribute must be of object type" 에러 해결

기존에 firebase 모듈이 설치된 상태에서 추가로 firebase remote config를 적용하려고 했다. 따라서 가이드를 따라 yarn add @react-native-firebase/remote-config 명령어를 치고 패키지를 설치했으나, 에러가 발생했다

2023년 1월 1일
·
0개의 댓글
·

React Native) IOS 빌드시 "Command PhaseScriptExecution failed with a nonzero exit code" 에러 해결하기

회사에서 프로젝트를 진행하는 중에 내 컴퓨터에서만 ios 빌드가 실패하는 문제가 발생했다. 이때 에러코드는 "Command PhaseScriptExecution failed with a nonzero exit code"이었다. 의심되는 원인은 컴퓨터 환경 설정이었다.

2023년 1월 1일
·
0개의 댓글
·

Github) Github actions에서 Secrets로 환경변수 관리하기

github actions는 github에서 제공하는 기능으로, 특정 트리거가 발동되었을 때 미리 설정한 워크플로를 실행시키는 자동화 툴이다. github actions를 활용하면 main 브랜치에 코드가 푸시되었을 때 자동으로 코드를 테스트하고, 문제가 없다면 배포까

2022년 11월 15일
·
0개의 댓글
·

Next) Next에서 Apollo Client 사용하기

Next에서 apollo client를 사용할 때 설정이 필요한 이유 apollo client의 강력한 기능 중 하나는 캐싱을 지원한다는 점이다. 한번 서버에 쿼리를 날려서 응답을 받으면 apollo client는 자동으로 이 결과값을 메모리에 캐싱해둔다. 그리고 그

2022년 11월 11일
·
0개의 댓글
·

React Native) fastlane match를 이용해 signing하기 (IOS)

fastlane에는 cert와 sigh를 이용해 사이닝하는 방법과 match를 이용하는 방법이 있다. cert와 sigh는 로컬에 인증서를 저장해 사용하고, match는 원격 저장소를 이용한다.

2022년 11월 9일
·
0개의 댓글
·

React Native) fastlane으로 firebase app distribution 자동화하기

fastlane에는 다양한 plugin들을 제공하고, 그 중에는 firebase app distribution을 fastlane에서 관리할 수 있는 plugin도 존재한다. 이번에는 이 플러그인을 이용해 fastlane에서 firebase app distribution

2022년 11월 8일
·
0개의 댓글
·

React Native) firebase app distribution으로 테스트 앱 배포하기

firebase app distribution firebase app distribution은 firebase에서 제공하는 테스트 서비스다. app store와 play store에서도 각각 자체적으로 내/외부 테스트를 제공하지만, 그 절차가 비교적 까다롭고 두개의 스

2022년 11월 8일
·
0개의 댓글
·

React Native) Fastlane으로 배포를 자동화해보자 (Android)

지난번 Fastlane으로 배포를 자동화해보자 (IOS)에 이어 이번에는 fastlane을 이용해 android의 배포 자동화를 해보려고한다.ios에서 앱 암호를 발급받아 환경변수로 fastlane에 제공해준 것과 같이 android 자동화를 위해서는 서비스 어카운트라

2022년 11월 3일
·
0개의 댓글
·

React Native) Fastlane으로 배포를 자동화해보자 (IOS)

Fastlane fastlane이란 android와 ios 앱 어플리케이션을 자동으로 배포할 수 있도록 도와주는 오픈소스 플랫폼이다. fastlane을 사용하면 매번 앱을 빌드하고 배포할 때 수행해야하는 반복 작업들을 자동화할 수 있다. 이는 귀찮은 작업을 줄여주는 효

2022년 11월 3일
·
0개의 댓글
·

React Native) resource android:attr/lStar not found. 에러 해결하기

문제 발생 상황 개발을 마무리 짓고 android 에뮬레이터에서 최종 점검을 하기 위해 apk를 빌드하는 과정이었다. npm run android를 사용해서 빌드했을 때는 아무 문제가 없었기 때문에 apk를 빌드하는 과정도 문제가 없을 줄 알았다. 하지만 빌드가 끝나갈 때 쯤 Android resource linking failed라는 메시지와 함께, 아...

2022년 10월 27일
·
0개의 댓글
·

React Native) Component를 이미지로 바꿔서 공유해보자

서론 이번에 <전자두뇌 정총무>라는 이름의 토이 프로젝트를 진행하던 중에 이미지를 공유해야되는 소요가 발생했다. 전자두뇌 정총무는 모임의 정산을 도와주는 앱인데, 정산 결과를 이미지 형태로 손쉽게 공유할 수 있도록 기능을 구현하려고 했기 때문이다. 각설하고

2022년 10월 24일
·
0개의 댓글
·

React Native) navigation의 useRoute TS에서 사용하기

react native에서 navigation을 사용해 페이지를 이동할 때, 이동할 페이지로 특정 데이터를 넘겨야할 때가 있다. 일반적으로 다른 컴포넌트에 데이터를 제공하는 방법은 크게 prop을 사용하는 방법과 전역상태를 설정해 공유하는 방법이 있는데, navigat

2022년 10월 24일
·
0개의 댓글
·

React) Redux-toolkit에서 서로 다른 slice의 state 동시에 수정하기

여러개로 흩어진 state들 사이에는 간혹 서로 긴밀하게 연결된 값들이 존재할 수 있다. 예를들어 우리 학급의 정보를 다루는 classSlice와 각 학생들의 정보를 다루는 studentSlice가 있다고 해보자. class의 state 중에는 전체 학생들의 봉사시간

2022년 10월 23일
·
0개의 댓글
·