React Native19 [React Native] 리액트 네이티브에서 네이버 로그인 구현하기 (@react-native-seoul/naver-login) 리액트 네이티브 (안드로이드, ios)에서 네이버 로그인을 하는 방법을 정리하고자 한다.우선 네이버 개발자센터에서 어플리케이션을 등록해야 한다. Application으로 이동하여 애플리케이션 등록을 선택한다. 앱 이름을 입력하고, 사용 API에서 네이버 로그인을 선택한다. 제공 정보를 선택할 수 있지만 필요하지 않으니 생략한다.아래 로그인 오픈 API 서비스 환경에서 안드로이드, iOS를 선택한다. 안드로이드다운로드 URL은 아직 배포 전이므로 https://localhost 등으로 입력한다.네이버 로그인은 타 소셜 로그인과 다르게 배포가 완료되어야 완벽하게 작동한다는 점을 참고한다. 우선 패키지명은 일반적인 경우 android/app/src/main/AndroidManifest.xml을 보면 알 수도.. 2024. 11. 14. [React Native] 리액트 네이티브에서 카카오 로그인 구현하기 (@react-native-seoul/kakao-login) 리액트 네이티브 (안드로이드, ios)에서 카카오 로그인을 하는 방법을 정리하고자 한다. 우선 카카오 로그인 방식에는 크게 웹뷰를 띄워 아이디, 비밀번호를 입력하는 Rest 방식과 카카오톡 어플을 실행하여 로그인하는 SDK 방식이 있다.모바일에서는 UX상 후자를 선호하므로 오늘은 후자에 대해서만 이야기할 것이다. 우선 카카오 디벨로퍼 사이트에서 프로젝트를 생성해야 한다. 내 애플리케이션으로 이동하여 애플리케이션 추가하기를 누른다. 앱 이름과 회사명, 카테고리를 입력하고 저장한다. 아이콘은 나중에 설정해도 된다. 안드로이드안드로이드 카카오 로그인을 구현할 때 가장 중요한 부분은 키 해시이다.디버깅 버전 키 해시, 릴리즈 버전 키 해시 이렇게 2개가 필요하고, 구글로그인을 구현한 경우에는 추가적으로 1개가.. 2024. 11. 13. [React Native] 리액트 네이티브에서 keychain store 구현하기 (react-native-keychain) 이전 글(리액트 네이티브에서 지문 인식 구현하기)에서 지문 인식을 도입한 프로젝트는 서버가 없어 react native단에서 직접 pulbic key를 안전하게 저장해놨다가, signature를 받아 검증까지 해야 했다.이를 위해서 모듈 react-native-keychain과 jsrsasign을 사용하였다.여기서는 keychain만 기록한다.keychain은 asyncStorage와 비슷하게 작동하지 ios 기기의 keychain과 android 기기의 keystore에 저장되어 매우 안전하게 보관된다는 특징이 있다.간단해서 따로 설명할 건 없고 기록용이다.import * as Keychain from 'react-native-keychain'export const setItem = async (key.. 2024. 8. 16. [React Native] 리액트 네이티브에서 지문 인식 구현하기 (react-native-biometrics) 생체 인식은 사용자의 잠금 해제 과정을 훨씬 더 간단하고 안전하게 만들어준다.오늘은 react native에서 생체 인식을 사용하는 방법에 대해서 기록하고자 한다. 사용할 모듈은 react-native-biometrics이다.ios에서는 touch id와 face id를, android에서는 지문인식을 지원한다.생체 인식 기능의 구조는 다음과 같다. 출처 New in Android Samples: Authenticating to remote servers using the Fingerprint APINews and insights on the Android platform, developer tools, and events.android-developers.googleblog.com 이 사진으로는 잘 이.. 2024. 8. 14. [React Native] 리액트 네이티브에서 커스텀 폰트 일괄 적용하기 보통 앱을 제작할 때에는 fontFamily 스타일 특성을 이용해 기본 폰트가 아닌 커스텀 폰트를 사용한다.이번 글에서는 커스텀 폰트로 fontFamily를 사용하는 방법과 프로젝트에 일괄적으로 폰트를 적용하는 방법을 적어 보겠다.우선 폰트 파일이 필요하다. 폰트 파일은 일반적으로 ttf, otf 확장자를 사용하는데, otf는 안드로이드에서도 적용이 되는 반면 ttf는 ios에서 적용이 안되는 경우가 있으니 가능한 otf를 사용하자.Google Fonts 사이트에서 무료 폰트 파일을 다운로드할 수 있다. 1. src/assets/fonts 폴더에 폰트 파일을 넣는다. 주의할 점은 이 폰트 파일의 이름을 그대로 사용하면 안 된다는 것이다.안드로이드의 경우 폰트 파일을 찾을 때 파일명을 참조하지만 ios의 .. 2024. 7. 30. [React Native] 리액트 네이티브에서 구글로그인 구현하기 (@react-native-google-signin/google-signin) 리액트 네이티브 (안드로이드, ios)에서 구글로그인을 하는 방법을 정리하고자 한다. 구글 클라우드 콘솔에서 새 프로젝트를 생성한다.왼쪽 위를 보면 드롭다운이 있다. 새 프로젝트를 생성한다. 프로젝트의 이름을 설정한다. 잠깐의 시간이 지나고 생성되었다는 팝업이 뜨면 아까 그 드롭다운을 눌러 생성한 프로젝트 콘솔로 들어간다. 왼쪽 사이드바를 열어서 API & Services (API 및 서비스) > Credentials (사용자 인증 정보) Create Credentials > OAuth client ID 동의 화면을 설정해야 한다고 나온다. 설정하러 가보자. 유저타입: 외부 앱 이름과 이메일, 개발자 이메일을 설정한다. 그 외 범위, 테스트 유저 등은 일단 설정하지 않는다. 동의 화면이 설정되면 .. 2024. 7. 23. 이전 1 2 3 4 다음
