차근차근 생활 & 코딩

이번시간에는 함수타입에 hook으로 onChnage 사용 방법에 대해 알아보도록 하겠습니다. 방법은 총 2가지에 대해 설명 드리도록 하겠습니다. ① Input이 한개의 경우 ② Input이 여러개의 경우 Step. 1 (Input이 한개의 경우) 상태 변수 만들기 const [text, setText] = useState(''); onChange 함수 만들기 const onChange = (event) => { console.log('onChange Event', event); setText(event.target.value); }; 전체 코드 import React, { useState } from 'react'; export default function Index() { const [text, se..

안녕하세요. 이번시간에는 react-native-vector-icon 설치 후 아이콘이 X로 깨져 보이는 현상이 발생되게 됩니다. 해결 방법은 간단합니다. # android/app/build.gradle 폴더로 이동 후 아래 코드 복사 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 다시 앱을 실행하시면 아이콘이 정상적으로 확인 됩니다. 수고 하셨습니다.

react-native 네이버 지도를 설치하려고 아무리 npm install 명령어를 입력해 보아도 에러가 계속 발행하였다. 현재 글 작성 기준으로 react-native 최신 버전은 0.66.3 버전으로 작업해 본 결과는 npm 설치가 안되었고, 구 버전인 0.60.5 버전에서는 네이버 지도 설치가 되는 것을 확인했다. 결론은 설치가 안되는 원인으로는 ReactNative 버전으로 인한 문제가 발생된 것으로 생각이 든다. 설치 오류 버전(0.66.3) 설치 성공 버전(0.60.5) 수고하셨습니다 [React Native] RN 특정 버전 프로젝트 생성 이번 시간에는 간단한 특정 버전으로 설치하는 방법에 대해 알려드리도록 하겠습니다. 아래 코드를 활용하여 실행해 주시면 설치 됩니다. $ react-nat..

이번 시간에는 간단한 특정 버전으로 설치하는 방법에 대해 알려드리도록 하겠습니다. 아래 코드를 활용하여 실행해 주시면 설치 됩니다. $ react-native init mysite --version=0.65.1 수고하셨습니다.

이번 시간에는 리액트 네이티브 회원가입 하는 방법에 대해 알려드리도록 하겠습니다. 아래 작업이 귀찬으신 분들께서는 맨 아래 전체코드를 작성해 놓았습니다. Install(설치하기) 아래 코드를 이용하여 라이브러리를 설치하도록 합니다. yarn add @react-native-firebase/auth 상태 변수 만들기 state 상태 변수 코드를 작성해 줍니다. const [initializing, setInitializing] = useState(true); const [user, setUser] = useState(); const [ registerEmail, setRegisterEmail ] = useState(""); const [ registerPassword, setRegisterPassword ..

안녕하세요. 이번 시간에는 스크롤을 위 아래로 움질일 때 스크롤 숨기는 방법에 대해서 알려드리도록 하겠습니다. 예제 코드 요약 #스크롤 숨기기 showsVerticalScrollIndicator={false} 또는 #iOS에서 작동하지만 Android에서는 작동하지 않을 수 있습니다. showsHorizontalScrollIndicator={false} 수고하셨습니다.

안녕하세요. 이번시간에는 현재 위치에서 좌표를 불러오는 방법에 대해서 알려드리도록 하겠습니다. Installing npm install @react-native-community/geolocation --save 안드로이드 권한설정 위치정보 권한 설정을 위해 아래 절차에 따라 진행해 주시면 됩니다. ① android > app > main > AndroidManifest.xml 파일을 선택합니다. ② 아래 코드를 복사하여 선택한 파일 안에 코드를 삽입하여 줍니다. 정확한 위치: ACCESS_FINE_LOCATION 권한이 제공하는 위치 정확도를 제공합니다. 대략적인 위치: ACCESS_COARSE_LOCATION 권한이 제공하는 위치 정확도를 제공합니다. 전체 코드 import React, {useSta..

안녕하세요. 이번 시간에는 카카오 로컬 API를 활용하여 좌표를 주소로 변경하는 작업을 해보도록 하겠습니다. Installing npm 또는 yarn을 통하여 axios를 설치하여 줍니다. npm install axios --save 또는 yarn add axios axios 데이터 불러오기 카카오 개발자 사이트에 접속 ① 내 어플리케이션 > 앱 설정 > 앱키로 접속해 줍니다. ② REST API 키를 복사합니다. ③ 복사한 REST API 키를 React Native 코드에 넣어 줍니다. 결과 확인하기 전체 코드 import React, {useState} from 'react'; import {Text, View, Button} from 'react-native'; import axios from '..