차근차근 생활 & 코딩

안녕하세요. 이번 시간에는 체크박스 버튼을 구현해 보도록 하겠습니다. 설치하기 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..

안녕하세요. 이번 시간에는 토글 스위치를 만들어 보도록 하겠습니다. 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); 토글 스위치 코드를 붙여 넣어주도록 합니다. 위에 코드를 보면 어려우시니 이해가 쉽도..

안녕하세요. 이번시간에는 검색 할 때 글자가 자동 완성 되는 기능에 대해서 알아보도록 하겠습니다. 어렵지 않게 간단하게 정리해 보았습니다. 설치 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..

아래와 같은 오류가 발생하여 해결 방법에 대해 정리 해보도록 하겠습니다. 코드 삽입 아래 코드를 입력하면 오류가 사라지게 됩니다. 'prettier/prettier': ['error', {endOfLine: 'auto'}], 혹시나 사라지지 않는다면 아래쪽 CRLF를 선택하면 상단에 새로운 창이 보이게 되는데 이때 LF 변경하여 줍니다. LF 변경되면 에러명이 사라지게 됩니다. 수고하셨습니다.

안녕하세요. 이번시간에는 React Native 안드로이드 버전 카카오 로그인을 구현해 보도록 하겠습니다. 카카오 로그인 구현이 초보자들은 쉽지는 않으니 천천히 따라 해 보시길 바랍니다. Android(안드로이드) Step 1. 설치하기 yarn add @react-native-seoul/kakao-login * 설치 후 바로 ReactNative를 실행하시면 오류가 발생할 수 있으니 설치 후 아래 순서대로 전부 작업 후 ReactNative를 실행하시길 권장합니다. Step 2. 키해시 등록 아래 명령어를 입력을 통해 키해시 등록을 진행 하도록 합니다. keytool -exportcert -alias androiddebugkey -keystore ./android/app/debug.keystore -s..

안녕하세요. 이번 시간에는 리액트 네이티브 파이어베이스 애드몹 광고 게시하는 방법에 대해 알아보도록 하겠습니다. Installation(설치) app, admob 2개의 앱 모듈을 설치하도록 하겠습니다. # Install & setup the app module npm install --save @react-native-firebase/app@11.5.0 # Install the admob module npm install --save @react-native-firebase/admob * 주의사항 : 애드몹을 사용하기 위해서는 Firebase 11.5.0 버전으로 사용하셔야 합니다. Firebase 최신 버전으로 admob을 사용 시 지원하지 않는다고 합니다. 꼭 버전을 맞추어 작업하시길 바랍니다. 구..

이번 시간에는 명령어를 통해 apk 파일을 손쉽게 만드는 방법에 대해서 알아보도록 하겠습니다. 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\app\src\main 폴더 안에 assets 폴더를 추가해 줍니다. error ENOENT: no such file or directory, open 'C:\Users\tistor..

안녕하세요. 이번 시간에는 React Native APK 추출할 때 용량도 줄이고, 구글 콘솔에 업로드를 시킬 수 있는 aab 파일을 생성하는 방법에 대해서 알아보도록 하겠습니다. 키 생성 my-upload-key과 my-key-alias을 원하는 이름으로 작성하셔도 되고 아래 코드를 그냥 사용하셔도 무관합니다. $ keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 명령어 입력 후 추가 입력창이 나오시면 입력해 주시면 되는데 마지막 yes 입력해주시면 입력이 종료됩니다. Enter your keystore password: Re-enter new..