iOS 실시간 위치 정보 가져오기 - 확장판
·
React Native/공통
사용자의 위치 정보를 계속 가지고오는 작업을 진행했었다. 이번에는 사용자의 위치 정보를 일정 거리 이상 이동했을 때 가지고 오는 방법을 알아보려고 한다. 실시간으로 계속 가지고 온다면 위치 확인 성능은 좋겠지만 배터리 사용량은 증가할테니깐 상황에 맞는 필터를 건다면 성능도 잡고, 기능도 구현하는 좋은 방향이 되지 않을까??  본 글은 앞선 위치 정보 가지고 오기 글을 기준으로 작성했기 때문에 전체적인 코드는 나오지 않습니다.만약 해당 기능이 필요하다면 글을 먼저 확인 후 여길 다시 찾아주세요!  distanceFilterlocationManager 에서 사용할 수 있는 옵션 중 하나이다. 사용하면 설정해준 거리만큼 이동해야지 다시 호출된다. - (instancetype)init { self = [sup..
react native flex:1 의 오류
·
React Native/공통
사이드 프로젝트의 기능 중 달력을 만드는 부분이 있었다. 달력 레이아웃은 많이 구현했기 때문에 문제가 없을 것이라고 생각했는데, 정말 예상치 못한 오류가 있었다.  달력을 배치하는 부분에서 아주 미세하게 7등분으로 나눠지지 않는 문제가 있었다. react native에서 화면을 가득 채우는 간단한 방법은 flex 속성을 사용하는 것이다. 여기서도 복잡한 기능이 있는게 아니다.  부모 요소에게 flex: 1을 주고 자식 요소에게도 flex: 1을 주면 간단하게 해결된다. 지금까진 전혀 문제가 없었다. 그래서 동일하게 작업을 한 결과는 다음과 같다. 붉은 배경은 Children에 해당하는 요소에게 배경색을 줬다. 보는 것처럼 얇은 하얀색 여백을 확인할 수 있다. 이론대로라면 꽉차서 전..
iOS 실시간 위치 정보 가지고 오기
·
React Native/공통
실시간 위치 정보를 가지고 오기 위해서 여러가지 도전을 했다.  mauron85/react-native-background-geolocation 검색을 했을 때 가장 먼저 나오는 부분이 react native의 해당 라이브러리이다. 대부분의 글이 해당 라이브러리를 기준으로  작성이 되어 있고 유튜브에 검색했을 때도 똑같은 라이브러리를 사용했었다. 그래서 나도 해당 라이브러리를 먼저 사용해보려고 생각했다.  설치를 위해서 npm을 들어가봤는데,,,,, 165개?? 일주일에 165번 밖에 다운받아지지 않는 라이브러리를 사용하는게 맞을지 고민이 생겼다. 그래서 본격적으로 라이브러리를 사용하기 전에 유튜브 영상을 먼저 보고 내가 필요한 기능이 정상적으로 동작하는지 확인하기 위해서 보면서 댓글을 확인했는데, 걱정..
React Native 파이어베이스 배포하기
·
React Native/공통
React Native를 테스트할 때 가장 쉬운 방법 중 하나가 firebase로 테스트 배포를 하는 것이다. iOS랑 Android 모두 배포를 해볼 수 있으며, 업데이트도 빠르게 확인이 가능하다.  환경 설치첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다.공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. npx @react-native-community/cli@latest init [프로젝트명] 설치가 끝나면 파이어베이스 라이브러리를 설치한다. yarn add @react-native-firebase/app  설치까지 완료하면 package.json은 다음과 같다 : "dependencies": { "react": "18.2.0", ..
React Native cli Apple 로그인 연동하기
·
React Native/JavaScript
끝이 다가오고 있다. 네이버, 카카오, 구글을 구현하고 이번엔 애플 로그인을 구현할 계획이다.  작업 환경은 iOS ( Macbook )이다.  환경 설정 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다.공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 애플 로그인 라이브러리를 설치하였다. yarn add @invertase/react-native-apple-authentication 설치가 끝나면 iOS환경에서도 로그인이 필요하므로 npx pod-install 명령어를 바로 사용해서 pod 라..
React Native cli Google 로그인 연동하기
·
React Native/JavaScript
Expo가 아닌 React Native cli 환경에서 네이버 구글 로그인을 구현하려고 한다. 카카오 로그인 또는 네이버 로그인이 필요한 분은 각 링크를 참고해도 좋다.  작업 환경은 iOS ( Macbook )으로 작업했다.  환경 설치 환경을 통일하면 아무래도 오류가 줄어들 것이기 때문에 시작부터 함께하자. 공식 사이트의 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 구글 로그인 라이브러리를 설치한다. yarn add @react-native-google-signin/google-signin 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치한다. npx p..
React Native cli Naver & Kakao 연동하기
·
React Native/JavaScript
네이버와 카카오를 각각 로그인하는 기능을 구현하였다. 이번엔 네이버와 카카오 같이 설정하는 방법에 대해서 진행하겠다.  반드시 Naver와 Kakao 연동하는 것을 선행적으로 진행하고 해당 글을 봐주시길 바랍니다.  작업 환경은 iOS ( Macbook )입니다.  환경 설치이미 Naver와 Kakao 로그인을 진행했다면 추가로 작업할 필요가 없습니다. 마지막으로 해당 글을 참고해서 연동을 하지 않으셨다면 돌아가서 연동 후 해당 글을 봐주시기 바랍니다.  각각 개발 환경 자체는 세팅하지 않고 바로 둘을 연동하기 위한 설정만 진행합니다.  환경 설정 1. LSApplicationQueriesSchemes 설정 LSApplicationQueriesSchemes naversearchapp naversear..
React Native cli Naver 로그인 연동하기
·
React Native/JavaScript
Expo가 아닌 React Native cli 환경에서 네이버 로그인을 구현하려고 한다. 카카오 로그인이 필요한 사람은 다음 링크를 참고해도 좋다.  작업 환경은 iOS ( Macbook ) 환경이다.  환경 설치첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다. 공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 설치가 끝나면 네이버 로그인 라이브러리를 설치한다. yarn add @react-native-seoul/naver-login 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치해줘야 한다. npx pod-install ..