📱Mobile15

• 

  [React Native] Reached end of file while looking for: Mach-O slice. 에러 상황Xcode로 앱을 빌드한 후 스토어에 Archive 하려는 도중 해당 오류가 발생했다.  에러 코드Reached end of file while looking for: Mach-O slice.  해결 방법해당 오류는 빌드 시 프로젝트 폴더 내에 zip 파일이나 .class 파일이 존재하는 경우 발생하는 오류이다. Android OS에서 사용할 apk 파일을 생성한 후 카카오톡으로 전송하기 위해 확장자를 zip로 바꾸면서 오류가 발생했다. 해당 파일을 삭제하고 재빌드한 후 재배포를 했고 오류없이 빌드 및 배포에 성공했다.  참고 사이트https://stackoverflow.com/questions/72210303/reached-end-of-file-while-looking-for-mach-o-sl.. 📱Mobile/오류해결 2024. 5. 21.

• 

  [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 init 오류 - TypeError: cli.init is not a function 에러 상황 개인 공부를 위해 새로운 react-native 프로젝트를 생성하는 도중 에러가 발생했다. 프로젝트가 잘 생성되다가 노드 모듈까지 설치한 후 에러가 발생했다. 에러 코드 TypeError: cli.init is not a function 해결 방법 여러 게시글을 찾아보면서 비슷한 이슈를 많이 찾아볼 수 있었다. 해당 오류는 react-native-cli와 설치하려하는 react-native의 버전이 맞지 않아서 발생하는 오류였다. 해결 방법은 공식 문서에 나와있는 방법과 구글에서 찾아본 방법 두 가지가 있다. 필자는 전자의 방법으로 해결했다. 1. 전역으로 설치된 react-native-cli를 삭제한 후 재설치 공식문서에 나와있는 방법으로 전역으로 설치된 react-native-cli를 삭제.. 📱Mobile/오류해결 2024. 1. 11.

• 

  [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] iOS 배포 오류 React-Native-Splash-Screen Symbolic Link 에러 상황 xCode에서 앱을 빌드 및 업로드한 뒤 TestFlight 에 올라간 앱이 몇 분 후 Build 목록에서 사라져 버리는 현상 발생했다. 없어진 Build에 관한 오류 상황을 위 그림과 같이 메일로 전달받았다. 에러 코드 ITMS-90332: Invalid Symbolic Link - The symbolick link 'react-native-splash-screen/node_modules/.bin/react-native' resolves to an invalid location. Make sure that the symbolic link does not resolve to itself, and thatt the location exists and is contanined within the .. 📱Mobile/오류해결 2023. 10. 27.

• 

  [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] NAVER Login Error 에러 상황 React Native에서 NAVER Login 기능을 구현하고 버튼을 눌러 로그인 함수를 호출하면 아무런 에러 메시지도 없이 앱이 꺼져버리는 현상이 발생했다. 해결 방법 @react-native-seoul/naver-login 라이브러리의 버전을 다운그레이드한다. npm i @react-native-seoul/naver-login@2.3.1 ! 현재 @react-native-seoul/naver-login 라이브러리의 최신 버전은 3.0.0-rc.1 이다. 📱Mobile/오류해결 2023. 3. 24.

• 

  [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.