목록react native (8)

차근차근 생활 & 코딩

[React Native] EXPO - Firebase 회원가입

이번시간에는 회원가입에 대해 알아보도록 하겠습니다. Step 1. 설정값 참조하기 https://ssilook.tistory.com/entry/REACT-NATIVE-EXPO-Firebase-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83 [React Native] EXPO - Firebase 로그인, 로그아웃 안녕하세요. 이번시간에는 리액트 엑스포 파이어베이스 로그인, 로그아웃에 대해 알아보도록 하겠습니다. Part 1. 라이브러리 설치 - Expo Firebase를 사용하기 위한 라이브러리를 설치합니다. expo ins ssilook.tistory.com - 위 링크를 참조하여 기본 세팅을 완성하시기 바랍니다. Step 2. 코드 작..
IT/REACT NATIVE(리액트 네이티브) 2023. 10. 26. 15:39
[RN] React Native - 카카오 키 해시(KaKao Key Hash) 등록 방법

안녕하세요. 이번 시간에는 카카오 키해시 등록하는 방법에 대해 알아보도록 하겠습니다. Step 1. 키 해시 수정하기 내 애플리케이션 > 앱 설정 > 플랫폼에 접속 후 수정 버튼을 클릭해 줍니다. 키 해시 여러 줄 바꿈으로 여러개를 등록 할 수 있어 등록 후 저장 버튼을 눌러 주도록 합니다. 간단히 등록이 됩니다. 수고하셨습니다.
IT/REACT NATIVE(리액트 네이티브) 2022. 6. 15. 21:07
[RN] React Native - 키 해시(Key Hash) 얻는 방법

카카오, 구글, 네이버 api 연동 시 키 해시를 입력해야 접속이 됩니다. 이럴 때 개발용(Debug Key)과 배포용(Release key) 두 가지를 가져오셔야 됩니다. #Debug Key 아래 코드 명령어를 치시면 디버그 작업 개발용 키 해시 값을 얻을 수 있습니다. keytool -exportcert -alias androiddebugkey -keystore ./android/app/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 명령어 입력 후 cmd 창에 예를 들어 Xo8123214214215yr9iU= 같은 문자가 나타나게 됩니다. #Release key 아래 링크에서 키값을 생..
IT/REACT NATIVE(리액트 네이티브) 2022. 6. 15. 20:57
[React Native] RN - 권한(카메라, 사진, 미디어, 파일, 위치) 요청하기

안녕하세요. 이번 시간에는 안드로이드 권한 설정 하는 방법에 대해 알려드리도록 하겠습니다. 안드로이드(Android) 권한 설정 android > app > src > main > AndroidManifest.xml 경로에 아래 코드를 추가해 주도록 합니다. 권한요청 아래 코드를 활용하여 권한을 요청하도록 합니다. import { PermissionsAndroid } from 'react-native'; const requestPermission = async () => { if (Platform.OS === 'android') { await PermissionsAndroid.requestMultiple([ // PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsA..
IT/REACT NATIVE(리액트 네이티브) 2022. 3. 23. 13:59
[React Native] RN - 환경 변수를 활용한 API key 숨기기

안녕하세요. 환경 변수는 API KEY를 활용해서 숨기는 방법도 있지만, 다양한 개발 환경과 관련된 다양한 파일에 변수를 저장할 수 있으며, 환경변수를 사용하면 보다 쉽게 관리 할 수 있습니다. 그럼 이번 시간에는 환경 변수를 활용하여 노출이 되면 안되는 API KEY를 숨기는 방법에 대해서 알아보도록 하겠습니다. Step1. 설치 환경 변수를 활용할 수 있는 라이브러리를 설치하도록 하겠습니다. yarn add react-native-config 또는 npm install --save react-native-config Step2. .env 파일 생성 프로젝트 내 최상위에 .env 파일을 만들어 준 후 github에 업로드 되지 않도록 .gitignore에 추가해주시면 됩니다. Step3. 안드로이드 설..
IT/REACT NATIVE(리액트 네이티브) 2022. 3. 18. 20:47
[React Native] RN - APK 추출하기 1편(Android Studio로 APK 추출하기)

안녕하세요. 이번 시간에는 안드로이드 스튜디오(Android Studio)를 활용하여 apk 파일을 만들어 보도록 하겠습니다. 폴더 추가 assets 폴더를 추가해 줍니다. android/app/src/main/assets Bundle 파일 생성 CMD 창에 명령어를 입력해 줍니다. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ Android Studio 프로젝트 빌드 ① Android Studio를 실행합니다. ② Android Stu..
IT/REACT NATIVE(리액트 네이티브) 2021. 12. 6. 09:09
[React Native] 리액트 네이티브 - 상태바(Status Bar) 설정 하기

안녕하세요. 이번 시간에는 React Native 상태바에 대해서 알아보도록 하겠습니다. 상태바는 흔히 우리가 핸드폰에 맨 상단에 배터리, 와이파이, 알람 등 상태가 표시되는 화면이라고 생각하시면 됩니다. 기존에 React Native를 사용하시면 상태표시바가 겹쳐 보이게 됩니다. 해결 방법은 marginTop 조정하면 됩니다. 하지만 고정하면 폰의 기종마다 상태바의 크기가 달라져 문제가 됩니다. 그럼 marginTop 높이를 설정하는 2가지 방법에 대해서 알아보도록 하겠습니다. 첫번째 방법이 안된다고 생각하시면 두번째 방법으로 진행하시면 됩니다. 어렵지 않고 간단합니다. 첫번째 방법 라이브러리 설치 $ npm install --save react-native-status-bar-height (Packa..
IT/REACT NATIVE(리액트 네이티브) 2021. 11. 10. 21:18
[REACT NATIVE] 리액트 네이티브 - EXPO 설치 및 실행하기

이번 시간에는 EXPO 설치에 대해서 알아보겠습니다. 설치 방법은 너무 간단합니다. Step 1. EXPO 설치하기(Installing Expo) NPM을 이용하여 엑스포를 설치하도록 하겠습니다. * 코드 2개 중 본인이 편한 코드를 한 개 선택하셔서 설치하시면 됩니다. $ npm install --global expo-cli 또는 $ npm install -g expo-cli Step 2. EXPO 신규 앱 만들기 (Create a new app) 설치가 완료되었으면 신규 앱을 만들어 봅니다. 명령어를 입력하시면 blank, blank (TypeScript), tabs (TypeScript) 같은 선택 화면이 표시되게 됩니다. 현재는 타입 스크립트는 필요가 없기 때문에 기본적인 blank를 선택해 줍니..
IT/REACT NATIVE(리액트 네이티브) 2021. 8. 23. 22:03
Prev 1 Next