📱Mobile/React Native10

• 

  [React Native] react-native-geolocation-service 라이브러리를 사용해보자 개요 프로젝트를 진행하면서 위치 서비스를 사용하는 일이 생겼고 자연스럽게 Geofence에 대해 알게 되었다. Geofence의 개념과 라이브러리에 대해 관심이 생겼고 간단한 프로젝트를 구현해보려고 한다. Geofence Geofence란 지리(Geography)와 울타리(Fence)를 결합한 것이다. 쉽게 말하자면 특정 위치로부터 반경 x미터의 가상 구역을 만드는 것을 의미한다. Geofence를 사용하는 것을 Geofencing이라고 부른다. Geofence는 위도와 경도를 입력받아 하버사인 공식(Haversine Formula)을 이용해서 가상 구역을 만든다. 하버사인 공식이란? 구면 삼각법에서 지구와 같은 구면의 두 점 사이의 대원 거리를 계산하는 공식 하버사인 공식 하버사인 공식을 구현한 코드는.. 📱Mobile/React Native 2024. 1. 18.

• 

  [React Native] 앱 종료 시에도 React Native 코드 실행 개요 안드로이드 앱을 개발하던 중 도즈모드에 대해 알게됐다. 도즈모드 테스트를 위해 일정 시간마다 서버 API와 통신하는 코드를 작성했다. 하지만 앱이 백그라운드 상태가 되면 코드가 동작하지 않았다. 사용 라이브러리 우선 원하는 앱 동작 방식을 정리했다. 1. 앱을 켠 후 로그인을 한다. 2. 로그인된 상태에서 앱을 종료시킨다. 3. 앱이 종료되어도 일정 시간(30분) 마다 서버 API와 통신한다. 4. 통신 결과로 앱이 도즈모드 상태에 들어가는지 확인한다. 위 로직대로 동작하기 위해선 앱을 포그라운드 서비스에 등록하는 방법이 가장 적합했다. 여러 블로그를 찾아보며 react-native-background-actions 라이브러리를 사용해서 구현하게 됐다. 코드 1. 라이브러리 다운로드 npm inst.. 📱Mobile/React Native 2023. 12. 18.

• 

  [React Native] iOS BLE Advertising BLE의 정의 및 참고 사이트 https://tlseoqja.tistory.com/38 [React Native] Android BLE Advertising BLE 란? Bluetooth Low Energy의 줄임말로, 저전력 블루투스 라고 한다. Bluetooth는 크게 Bluetooth Classic과 BLE로 구분된다. Bluetooth 3.0 까지는 Bluetooth Classic, Bluetooth 4.0 부터는 BLE로 불린다. Bluetooth Classic은 다 tlseoqja.tistory.com 코드 Swift가 아닌 Object-C를 사용해서 코드를 작성하였다. 1. BLE 권한 추가 ios 폴더의 프로젝트 폴더의 Info.plist 파일을 열어서 블루투스 사용 권한을 넣어준다. .... 📱Mobile/React Native 2023. 11. 21.

• 

  [React Native] Android BLE Advertising BLE 란? Bluetooth Low Energy의 줄임말로, 저전력 블루투스 라고 한다. Bluetooth는 크게 Bluetooth Classic과 BLE로 구분된다. Bluetooth 3.0 까지는 Bluetooth Classic, Bluetooth 4.0 부터는 BLE로 불린다. Bluetooth Classic은 다른 기기와 단거리 에서 무선으로 연결되어 통신되는 엄청난 편리함을 주었지만 배터리 소모로 인해사용하는데 불편함이 있었다. 그리고 쌍방향 통신만 가능했기 때문에 데이터를 수신하기 위해서는 항상 기기가 대기상태여야 했다. 2010년 새로운 Bluetooth 표준으로 Bluetooth 4.0이 채택되었다. Bluetooth Classic과의 가장 큰 차이는 훨씬 적은 전력으로 Classic과 .. 📱Mobile/React Native 2023. 9. 14.

• 

  [React Native] Kakao Login 구현하기 Kakao Login 라이브러리 설치 React Native Project에서 터미널을 키고 아래의 명령어로 Kakao Login 라이브러리를 설치한다. npm i @react-native-seoul/kakao-login Kakao Developer Application 등록 1. Kakao Login 후 Application을 등록해준다. 2. Application의 이름과 사업자명을 입력해주고 약관에 동의해준다. 저장 버튼을 누르면 아래와 같이 앱 키를 생성해준다. React Native로 개발 중이므로 네이티브 앱 키를 사용한다. 3. 카카오 로그인 기능을 사용하기 위해 카카오 로그인 API를 활성화해준다. 안드로이드 플랫폼 설정 Kakao Developer 사이트 왼쪽 메뉴에 있는 플랫폼 탭으로 .. 📱Mobile/React Native 2023. 3. 28.

• 

  [React Native] Naver Login 구현하기 NAVER Login 라이브러리 설치 React Native Project에서 터미널을 키고 아래의 명령어로 NAVER Login 라이브러리를 설치한다. npm i @react-native-seoul/naver-login@2.3.1 NAVER Login 2.3.1 버전 설치 이유 [RN, Error] NAVER Login Error (tistory.com) [RN, Error] NAVER Login Error 에러 상황 React Native에서 NAVER Login 기능을 구현하고 버튼을 눌러 로그인 함수를 호출하면 아무런 에러 메시지도 없이 앱이 꺼져버리는 현상이 발생했다. 해결 방법 @react-native-seoul/naver-login 라이 tlseoqja.tistory.com NAVER Dev.. 📱Mobile/React Native 2023. 3. 28.

• 

  [React Native] Firebase 문자 인증 아직 Firebase Project를 만들지 않았다면 아래 글을 참고해서 생성하고 진행하길 바란다. Firebase Project 생성 및 연동 방법 [RN] Firebase 프로젝트 생성 및 연동 (tistory.com) [RN] Firebase 프로젝트 생성 및 연동 Firebase 프로젝트 생성 1. 신규 Project 생성 우선 구글 계정으로 로그인 후 Firebase 사이트에 접속해준다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시 tlseoqja.tistory.com 안드로이드 앱 추가 및 프로젝트 설정 우선 이전에 생성한 Firebase Project Console로 들어간다. 그리고 앱 추가를.. 📱Mobile/React Native 2023. 3. 23.

• 

  [React Native] Window에서 Firebase SHA-1 인증서 확인 Firebase에서 인증 기능을 사용하려면 SHA-1 인증서가 필요했다. SHA의 기본 정의와 인증서 확인 방법에 대해 알아보겠다. SHA 란? SHA ( Secure Hash Algorithm, 안전한 해시 알고리즘) 함수들은 서로 관련된 암호학적 해시 함수들의 모음이다. 이들 함수는 1993년 미국 국가안보국 (NSA)이 처음으로 설계했으며 미국 국가 표준으로 지정되었다. SHA 함수군에 속하는 최초의 함수는 공식적으로 SHA라고 불리지만, 나중에 설계된 함수들과 구별하기 위해 SHA-0이라고도 불린다. 2년 후 SHA-0의 변형인 SHA-1이 발표되었으며, 그 후에 4종류의 변형, 즉 SHA-224, SHA-256, SHA-384, SHA-512가 발표되었다. 이들을 통칭해서 SHA-2라고도 한다... 📱Mobile/React Native 2023. 3. 22.

• 

  [React Native] Firebase 프로젝트 생성 및 연동 Firebase 프로젝트 생성 1. 신규 Project 생성 우선 구글 계정으로 로그인 후 Firebase 사이트에 접속해준다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 메인 화면의 시작하기를 누르면 Firebase Console 화면으로 이동하게 된다. Console 화면에서 '프로젝트 추가' 버튼을 누르면 프로젝트 생성 페이지로 이동하게 된다. 생성할 프로젝트 명을 입력하면 자동으로 프로젝트 ID를 부여해준다. 만약 ID를 직접 설정하고 싶다면 프로젝트 ID를 클릭하면 변경할 수 있다. 프로젝트명을 입력 후 계.. 📱Mobile/React Native 2023. 3. 22.

• 

  [React Native] Hash Key 발급 React Native에서 Kakao Login 기능을 개발하던 중 Hash Key를 입력해야 하는 상황에 맞딱뜨렸고 발급하는 방법에 대해 찾아보고 정리해보려고 한다. Hash Key란? 해시라는 것은 임의의 길이를 가진 데이터를 고정된 길이를 가진 데이터로 매핑하는 것을 말한다. 이 과정에서 원본 데이터를 키(Key), 매핑하는 과정을 해싱(Hashing), 결과물로 나온 데이터를 해시 값(Hash value)라고 한다. 또한 이렇게 데이터를 해싱하는 함수를 해시 함수(Hash Function)이라고 한다. 대표적인 해시 함수에는 MD-5, SHA 함수가 있다. MD-5 MD는 Message Digest의 약자로, 입력된 데이터를 각 512비트의 블록들로 나누어 처리하여 128 비트 길이의 해시 값을 .. 📱Mobile/React Native 2023. 3. 20.