본문 바로가기

React Native67

[React Native] firebase auth 연동해서 구글 로그인하는 방법 RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱 안드로이드> 아이폰> 안녕하세요. 이번 게시글에서는 파이어베이스를 이용해서 구글로 회원가입 및 로그인을 하는 방법을 알아보겠습니다. 저도 처음에는 너무너무 복잡해보였는데, 쉽습니다! 10분만에 끝나버렸어요 ㅎㅎ 참고로 이번 게시글은 android, ios앱과 파이어베이스를 연동을 모두 마친 상태에서 설명이 진행됩니다. 앱과 firebase프로젝트를 연동하는 사전작업에 대해서는 따로 설명하지 않고 구글 로그인 부분만 설명드.. 2022. 1. 8.
[React Native] useEffect에서 async 사용하는 방법 1. 잘못된 사용 useEffect 안에서 async를 직접 선언해줌. 2. 올바른 사용 async - await을 써야하는 부분을 별도의 함수로 만들어주고, useEffect에서 호출함. 2022. 1. 7.
[React Native] MobX 도입 10분 컷! 1. mobx 도입 배경 안녕하세요. 제가 개발중인 영단어 앱은 하나의 파일 안에서 'screenMode' 상태값에 따라 화면을 바꿔주고 있습니다. screenMode === 'selectVoca'일 때는 왼쪽 화면이, === 'quiz'일 때는 오른쪽 화면으로 변경됩니다. 지금까지는 한 파일 안에서만 바뀌니 useState를 사용해왔었는데요. 개발을 하다보니 이 파일, 저 파일에서도 screenMode를 참조해야할 일이 생겨버렸습니다..! 처음에는 props로 넘겨주고, 또 넘겨주고 했는데... 너무 복잡해서 ㅠ mobX를 도입하기로 결정했습니다. 2. React Native에 mobx를 적용하는 방법 및 과정 * 저는 함수형 코드를 사용하기 때문에 클래스형 코드로 개발하시는 분들과는 많이 다를 수 있.. 2022. 1. 7.
[React Native / IOS] 시뮬레이터 에러 Unable to lookup in current state: Shutdown 1. 에러 상황 npm으로 ios 시뮬레이터를 기동할 때 Unable to lookup in current state: Shutdown 에러 발생. 2. 해결방법 시뮬레이터를 완전히 종료하고 다시 react-native run-ios해주면 잘 됩니다. 2022. 1. 7.
[React Native / android] 키보드 올라올 때 화면 고정하는 방법 windowSoftInputMode = "adjustNothing" RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중!) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com 키보드가 올라올 때 버튼이나 텍스트도 같이 밀려 올라와야 할 떄도 있고, 화면이 움직이지 않고 고정되어야 할 때도 있습니다. keyboardAvoidingView를 쓰지 않아도, 안드로이드 manifest의 " windowSoftInputMode " 속성을 이용해서 키보드가 올라올 때 화면을 고정시킬 수 있습니다. 우선 React Native 공식 문서의 TextInput 문서를 보겠습니다. 공식문서를 보면, 안드로이드일 경우 windowSoftInputMode의 파라미터값이 .. 2022. 1. 7.
[React Native] 랜덤 퀴즈 앱을 만들어보자 현재 개발중인 '바로보카'는 영어 단어 퀴즈앱입니다. 단어장에서 랜덤으로 단어를 뽑아서 퀴즈를 만들어줘요. 이번 포스팅에서는 랜덤 퀴즈 기능에 대한 핵심 알고리즘(?)을 풀어보려고 합니다. 너무 간단해서 알고리즘이라고 하기도 애매합니다. 우선 기본 틀은 이렇게 생겼습니다. 문제와 선택지 4개가 주어집니다. 문제를 만드는 로직은 아래와 같습니다. 1. 데이터셋에서 4개의 단어를 랜덤으로 뽑습니다. 2. 4개의 데이터 중에 1개를 출제 문제로 정합니다. ( 문제에 대한 대답이 들어가는 버튼 위치 또한 랜덤으로 계속 바뀝니다. ) 3. 클릭한 대답버튼이 문제에 해당하는 단어면 정답처리, 다른 단어면 오답처리합니다. 그럼 1번부터 차근차근 보겠습니다. 1. 데이터셋에서 4개의 데이터를 랜덤으로 뽑는다. 우선 대.. 2022. 1. 6.

티스토리툴바