목록IT (166)

차근차근 생활 & 코딩

[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
npm 라이브러리 특정버전 설치

특정버전 설치는 간단합니다. 아래와 같은 방법으로 진행하시면 됩니다. 특정버전 설치 방법 설치하고자 하는 라이브러리뒤에 @ 버전을 작성하시면 됩니다. npm install --save styled-components@0.0.0 수고하셨습니다.
IT 2022. 3. 18. 10:33
[React Native] RN - java.lang.OutOfMemoryError (no error message) / 메모리 부족

메모리가 부족했다.. 메모리를 늘려주도록 하자. android > gradle.properties 파일에 코드 삽입합니다. org.gradle.jvmargs=-Xmx4096m
IT/오류노트 2022. 3. 17. 20:24
[React Naitve] RN - Firebase 구글 로그인(Google Login) 구현하기

안녕하세요. 이번 시간에는 파이어베이스 구글 로그인에 대해 알아보도록 하겠습니다. 내용이 다소 복잡 할 수 있으니 천천히 따라 해보시면 좋을 듯합니다. Step1. Firebase 세팅 ① 프로젝트 추가하기 ② 프로젝트 이름을 정합니다. ③ 프로젝트 이름을 정하셨으면 계속 버튼을 클릭합니다. ④ 애널리틱스 사용 설정을 Off 해주도록 합니다. (통계 분석을 하시고 싶은 분들께서는 On으로 설정하셔도 됩니다.) ⑤ 프로젝트 만들기 버튼을 클릭하여 프로젝트를 만들도록 하겠습니다. ⑥ 새 프로젝트가 준비되었습니다. 이제 신규 프로젝트가 생성된 것을 확인 할 수 있습니다. ⑦ 이제 안드로이드 아이콘 버튼을 클릭하여 앱을 추가하여 시작하도록 하겠습니다. ⑧ Android 패키지 이름을 등록해 주도록 합니다. (자..
IT/REACT NATIVE(리액트 네이티브) 2022. 3. 17. 14:02
React Native 빌드 시 SHA-1 for file … is not 문제

문제 발생의 원인은 이전 네이티브 버전으로 새 프로젝트를 구성해서 발생한 것으로 보인다. 아래 명령어를 입력하고 다시 빌드하면 잘되는 것으로 보인다. npm install -i -g --force react-native-cli
IT/오류노트 2022. 3. 15. 20:03
[React Native] RN - 체크박스(CheckBox) 버튼 구현하기

안녕하세요. 이번 시간에는 체크박스 버튼을 구현해 보도록 하겠습니다. 설치하기 npm i react-native-bouncy-checkbox --save import import BouncyCheckbox from "react-native-bouncy-checkbox"; 사용하기 {}} /> 전체코드 import { StyleSheet, Text, View } from 'react-native' import React from 'react' import BouncyCheckbox from "react-native-bouncy-checkbox"; export default function App() { return ( {}} /> ) } const styles = StyleSheet.create({ con..
IT/REACT NATIVE(리액트 네이티브) 2022. 3. 8. 11:02
[React Native] RN - 토글 스위치(Toggle switch) 구현하기

안녕하세요. 이번 시간에는 토글 스위치를 만들어 보도록 하겠습니다. Switch 모듈을 import 해주도록 합니다. import {View, Switch, StyleSheet} from 'react-native'; useState 를 통해 컴포넌트값을 변경하도록 합니다. import React, {useState} from 'react'; const [isEnabled, setIsEnabled] = useState(false); 스위치가 동작 할수 있도록 함수를 만들어 보도록 하겠습니다. const toggleSwitch = () => setIsEnabled(previousState => !previousState); 토글 스위치 코드를 붙여 넣어주도록 합니다. 위에 코드를 보면 어려우시니 이해가 쉽도..
IT/REACT NATIVE(리액트 네이티브) 2022. 3. 7. 21:09
[React Native] RN - 검색 자동 완성 기능 구현하기

안녕하세요. 이번시간에는 검색 할 때 글자가 자동 완성 되는 기능에 대해서 알아보도록 하겠습니다. 어렵지 않게 간단하게 정리해 보았습니다. 설치 npm install --save react-native-autocomplete-dropdown or (또는) yarn add react-native-autocomplete-dropdown 아이콘 설치 yarn add react-native-vector-icons 패키지 가져오기 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown' 예제 데이터 const [selectedItem, setSelectedItem] = useState(null) 전체 테스트 코드 import {StyleS..
IT/REACT NATIVE(리액트 네이티브) 2022. 3. 4. 23:18
Prev 1 ··· 5 6 7 8 9 10 11 ··· 21 Next