JuzeroSpace

navigtaion.addListener('beforeRemove') 를 이용하면 됩니다! useEffect(() => { const gestureHandler = navigation.addListener('beforeRemove', e => { if (!isLoading) { return; } e.preventDefault(); Alert.alert('구매가 진행되고 있어요', '화면을 벗어나면 구매가 취소돼요.', [ { text: '머무르기', onPress: () => {}, }, { text: '나가기', onPress: () => { navigation.dispatch(e.data.action); }, }, ]); }); return gestureHandler; }, [navigation, i..

배열 안에 객체가 있는 경우, 객체가 특정 값을 갖고 있는지 중복 체크합니다. 예시로, fruits = [ { id: 1, name: "apple", mean: "사과", }, { id: 2, name: "grape", mean: "포도", }, { id: 3, name: "orange", mean: "오랜지", } ] 의 배열이 있습니다. 이 배열에 새로운 과일을 추가하려고하는데, 추가하려는 과일이 배열에 이미 있는건지 확인이 필요합니다. 가령, 사과를 새로 추가하려는데 이미 있는지? 확인을 해줘야겠죠. map이나 filter 등 사실 확인할 수 있는 함수들은 많습니다. 그 중에서도 array 함수 중에 some() 을 사용하면 짧은 코드로 쉽게 확인할 수 있습니다. some()은 해당 배열을 스윽 통..

git config core.ignorecase false 한 뒤에 파일명 변경

iOS 앱 아이콘 에러 해결 앱 아이콘 설정을 모두 완료했는데도 안보인다면 아래 2가지를 체크해야 한다. 1. image파일의 에셋 우측에 target membership에 앱이 체크되어있는지 확인한다. 위 사진 제일 우측에 프로젝트이름의 앱이 체크되어있는지 확인한다. 만약 체크가 안되어있다면 체크를 해주고, 비활성화 상태라면 다음 단계를 진행해보자. 2. Copy Bundle Resources 가 있는지 확인한다. 프로젝트 > Targets > Build Phases 위 경로에서 Copy Bundle Resources가 있는지 확인한다. 이게 없다면 1단계에서 target membership에 앱을 체크할 수 없다. 이게 없다면 General 글자 밑에 + 버튼으로 추가하고, Image를 추가해주자.

아래 명령어로 프로젝트 생성하고, RN의 버전을 업그레이드 하면 됨. npx react-native init ProjectName --version 0.68.2

('https://juzero-space.tistory.com'이하 'juyeongkim')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. ○ 이 개인정보처리방침은 2022년 5월 1부터 적용됩니다. 제1조(개인정보의 처리 목적) ('https://juzero-space.tistory.com'이하 'juyeongkim')은(는) 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의..

안녕하세요. 이번 포스팅에서는 유저가 Firebase auth를 이용해서 로그인을 했는지, 로그인 상태를 확인하는 방법을 알아보겠습니다. 특히, 로그인 상태를 여러 스크린에서 확인해야하는 경우에는 mobx를 이용해서 중앙에서 상태값을 관리해줄 필요가 있습니다. 본 포스팅은 mobx를 이용해서 로그인 상태를 앱 전역에서 확인하는 방법을 알아보도록 하겠습니다. Firebase auth를 도입하지 않으신 분은 여기 포스트를, mobx를 도입하지 않으신 분은 여기 포스트를 참고해주세요. mobx를 도입했다는 가정 하에 진행해보도록 하겠습니다. 1. userStore.js 파일 생성 Store폴더에 userStore.js 파일을 만들어주세요. 이 파일에서 유저와 관련된 상태값들을 관리할 예정입니다. 2. user..

이런식으로 배열의 요소가 Ojbect 형태일 경우 console.log(list)를 찍어보면 [Obect, Obect] 라면서 JSON.stringify cannot serialize cyclic structures 에러가 발생할 때가 있습니다. 그리고, 각 요소에 들어있는 Object 에서도 특정한 값만 사용해야할 때가 있습니다. 가령, 위의 사진에서 Obejct안의 data 객체만 읽고싶을 수 있죠. 위의 예시처럼 Oject 형태로 배열이 이루어져있고, 값을 불러오려니 JSON.stringify cannot serialize cyclic structures 에러가 발생할 떄 map 함수를 이용해 쉽게 해결할 수 있습니다. 이렇게 하면 temp 배열에는 list 배열에 있는 객체요소중 data에 대한 ..

안녕하세요. 앱을 출시하고 처음에는 구글 애드몹 배너광고가 잘 떴습니다. 아주 소소하게나마 광고수익이 잡혔죠. 그런데 갑자기 개발모드에서 테스트광고도 안뜨더니, 배포된 앱에서도 광고가 안뜨길 시작했습니다. 내가 뭘 잘못건드렸나? 하고 몇시간동안 애드몹 코드를 지웠다 다시 시작하기를 반복했죠... 그러다가 개발모드에서 Error code3 이 뜨는걸 알게됐습니다. Error code3란? '귀하에게 보내줄 광고가 없습니다.' 라는 건데요. 코드 문제가 아니고, 출시한지 얼마 안된 앱에게 흔히 나타날 수 있는 에러라고 합니다. 이 앱에 어떤 광고를 노출시켜야 할지 판단이 안되어서 광고를 보내주지 않는다고 합니다. Error code 3이 뜨는 이유는 여러가지가 있겠습니다만, 해결방법은 오직 '기다림' 뿐입니..

react-native start --reset-cache 또는 npm start -- --reset-cache 또는 expo start -c 또는 yarn cache clean RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중!) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com

안녕하세요. 이번 포스팅에서는 React Native로 개발하는 프로젝트의 파일명, 폴더명 네이밍 규칙을 알아보겠습니다. '이렇게 써야만 해!' 라고 법적으로 정의한 것은 아니지만 가독성 높은 코드를 위해서 통일성을 맞춰서 하면 좋을 것 같습니다. 1. 파일명 ( index.js 처럼 뒤에 js 확장자가 붙은 JS파일) 파일명은 대문자로 시작합니다. (예시: UserInformation.js) 단, index.js 는 소문자로 시작합니다. 파일명과 exports default의 이름은 동일해야 합니다. 아래처럼 파일의 export가 LogIn이면 파일명도 LogIn.js로 해야합니다. export default LogIn; 또한 다른 곳에서 import 할 때에도 파일명과 동일하게 써야합니다. //bad..

안녕하세요. 이번 포스팅에서는 firebase의 firestore에서 컬렉션, 문서를 추가하는 방법을 알아보겠습니다. firestore는 NoSQL의 데이터베이스로써 key-value 형태의 데이터베이스를 제공하고 있습니다. 그리고 파이어스토어에서 디비 구조를 만들기 위한 핵심개념이 컬렉션(collection)과 문서(doc) 인데요. 공식 문서는 여기를 참조하시면 됩니다. 컬렉션? '폴더' 라고 생각하시면 됩니다. 데이터베이스들이 모여있는 뭉텅이, 하나의 스키마와 비슷합니다. 문서 폴더 안에 저장된 낱개의 정보입니다. 컴퓨터의 폴더 구조에 비교하면 이해가 조금 쉬울 것 같습니다. 유저의 정보를 저장하는 User라는 폴더(컬렉션)이 있습니다. 그리고 그 폴더 안에는 유저에 대한 실제 데이터가 적혀있는 한..

개발 모드와 실제 서버와 구분해서 테스트해야할 때가 종종 있습니다. 저의 경우, 개발 모드에서 애드몹의 실제 광고 ID를 갖고 테스트하면 광고계정이 삭제되기때문에 테스트용 ID를 넣어줘야 하는데요. 개발할때 바꾸고, 출시용으로 번들 압축할 때 바꾸고하는게 여간 귀찮은 일이 아니었습니다. React Native에는 기본적으로 __DEV__ 를 입력하면 개발 모드를 true, false값으로 반환해줍니다. 따로 라이브러리를 import하거나 선언할 필요 없이 사용하고 싶은 곳에 __DEV__ 를 입력해주면 돼요. 개발 모드는 안드로이드&iOS 시뮬레이터, usb 연결한 실제 기기일때 true값을 반환해줍니다. 그리고 앱 번들로 제출한 배포버전에서는 false로 됩니다. 간단한 예시로 아래 코드처럼 테스트해보..

안녕하세요. facebook에서 공식으로 지원하고 있던 RN 라이브러리가 더이상 업데이트 되지 않습니다. 아래 링크의 readme를 읽어보면 업데이트 중단된 것을 알 수 있고, 가장 최근 release가 2020년 11월 24일입니다. https://github.com/facebookarchive/react-native-fbsdk GitHub - facebookarchive/react-native-fbsdk: A React Native wrapper around the Facebook SDKs for Android and iOS. Provides acce A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access..

RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱 안드로이드> 아이폰> 안녕하세요. 이번 게시글에서는 파이어베이스를 이용해서 구글로 회원가입 및 로그인을 하는 방법을 알아보겠습니다. 저도 처음에는 너무너무 복잡해보였는데, 쉽습니다! 10분만에 끝나버렸어요 ㅎㅎ 참고로 이번 게시글은 android, ios앱과 파이어베이스를 연동을 모두 마친 상태에서 설명이 진행됩니다. 앱과 firebase프로젝트를 연동하는 사전작업에 대해서는 따로 설명하지 않고 구글 로그인 부분만 설명드..