리액트

이 전 글에는 React Native 프로젝트와 Firebase를 연동하는 방법을 살펴보았다. 이제 Firebase로 회원 인증을 구현해보자. Firebase 프로젝트 설정 먼저 이 전 글에서 생성한 Firebase 프로젝트에 접속해 왼쪽 사이드 메뉴에 Authentication을 클릭하고 시작하기 버튼을 클릭해준다. 이메일과 비밀번호를 사용해 예제를 구현해볼 것이기 때문에 이메일/비밀번호를 클릭한다. 나머지 제공업체들도 나중에 추가가 가능하다. 이메일/비밀번호를 사용 활성화해주고 저장 버튼을 클릭한다. 여기까지 했다면 이제 리액트 네이티브 프로젝트로 돌아가서 로그인, 회원가입, 로그아웃 기능을 구현해보자. Firebase로 회원 인증 하기 프로젝트에 lib 디렉터리를 만들고, auth.js 파일을 만들..

React Native 프로젝트에서 연동하고 사용하는 예제를 정리해보겠다. Firebase 프로젝트 생성 먼저 구글 로그인 후 Firebase에 접속해보면 시작하기 버튼이 보일 것이다. 이 버튼을 클릭하고 프로젝트를 추가해준다. 프로젝트 이름을 입력하고 계속 버튼을 클릭한다. 구글 애널리틱스를 사용하려면 Google 애널리틱스 사용 설정을 체크하고 계속 버튼을 누르고 애널리틱스 계정을 선택하거나 만들고 프로젝트 만들기 버튼을 클릭하면 프로젝트가 생성된다. 그럼 이제 안드로이드와 iOS에 Firebase를 설정하고 연동해보자. 안드로이드에 Firebase 설정하기 1. 앱 등록 프로젝트를 생성 후에 이동하는 페이지에 '앱에 Firebase를 추가하여 시작하기'라는 문구와 함께 안드로이드 아이콘이 보일 것이..

라이브러리 설치 및 시뮬레이터 실행 리액트 네이티브에서 datetimepicker를 사용하려면 아래 명령어를 통해 라이브러리를 설치하고, 시뮬레이터를 다시 실행해준다. $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker $ npx pod-install $ yarn ios $ yarn android @react-native-community/datetimepicker는 iOS와 안드로이드 각각 플랫폼에서 특화된 날짜/시간 선택 컴포넌트를 제공해주고 react-native-modal-datetime-picker는 제공된 컴포넌트를 모달 형태로 쉽게 사용할 수 있게 해준다. DateTimePickerModal ..

리액트 네이티브에서 useMemo라는 Hook을 사용해 값을 memoization해 최적화할 수 있다. memoization이란 동일한 계산을 반복해야 할 때 불필요한 연산을 제거하기 위해 이전에 계산한 값을 재사용해 처리를 최적화하는 것을 의한다. const value = useMemo(() => compute(a, b), [a, b]); 이렇게 Hook을 사용하면 a나 b의 값이 변경될 때만 값이 연산된다. 아래 예제 코드를 통해 확인해보자. import React, { useState, useMemo } from "react"; ... const [datas, setDatas] = useState([{ ... }, { ... }]); const datas1 = useMemo(() => datas.r..

리액트 네이티브에서 달력 화면을 만들때는 react-native-calendars라는 라이브러리를 사용한다. 설치 및 사용법 아래 명령어를 통해 라이브러리를 설치하고 디바이스를 다시 로드해준다. $ yarn add react-native-calendars $ npx pod-install $ yarn ios $ yarn android 아래는 react-native-calendars 라이브러리 사용 예제 코드다. import React from "react"; import { Calendar } from "react-native-calendars"; import { StyleSheet } from "react-native"; function CalendarView() { return ( ); } const ..

리액트 네이티브에서 화면 크기를 dp 단위로 가져오는 방법은 두 가지가 있다. 1. Dimensions.get import {Dimentsions} from 'react-native'; const { width, height } from Dimensions.get('window'); Dimensions.get에는 두 가지 문자열을 넣을 수 있다. window : 현재 앱에서 사용할 수 있는 영역의 크기를 가져온다. screen : 전체 화면의 크기를 가져온다. iOS에서는 두 크기의 차이가 없지만, 안드로이드에서 window로 크기를 조회했을 때는 상단의 상태 바와 하단의 소프트 메뉴 바 영역을 제외한 크기를 반환한다. 이 방법은 컴포넌트 외부에서도 작동하므로 StyleSheet에서도 사용할 수 있다. ..

Animated 사용법 리액트 네이비트에서 애니메이션을 구현할 때는 Animated라는 객체를 사용한다. 일단 Animated를 사용하려면 Value를 하나 만들어야 한다. import React, {useRef} from 'react'; import {Animated} from 'react-native'; function Sample() { const animation = useRef(new Animated.Value(1)).current; } Value를 만들 때는 이렇게 useRef를 사용해야 한다. 래퍼런스 선택 외에 특정 값을 컴포넌트 생성 시에 설정하고, 컴포넌트가 사라질 때까지 재사용하고 싶은 경우에도 이와 같이 useRef를 사용해 구현할 수 있다. Value의 생성자 함수 인자에는 초깃값..

date-fns 라이브러리란? 보통 앱에서 날짜 형식을 보여줄때 다음과 같은 형식으로 시간이 출력되는 것을 본 적이 있을 것이다. 방금 전 3분 전 1시간 전 3일 전 2022년 2월 16일 07:00 이런 형식으로 시간을 출력할때 유용하게 사용하는 라이브러리가 date-fns다. 아래 링크에서 더욱 다양한 기능을 확인할 수 있다. Modern JavaScript Date Utility Library date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. date-fns.org date-fns 라이브러리 설치 및 사용 아래 ..

UUID란? UUID는 범용 고유 식별자(universally uniqute identifier)로써, 표준으로 사용되는 고유 식별자 형식이다. UUID는 4가지 버전이 있는데, 일반적으로 랜덤하고 고유한 식별자를 생성할 때는 v4를 많이 사용한다. UUI 설치 및 설정 UUID를 사용하려면 아래 명령어를 통해 라이브러리를 설치해야 한다. $ yarn add uuid 이 라이브러리는 Node.js의 crypto 기능을 사용하는데, 리액트 네이티브에서는 이 기능이 기본적으로 내장되어 있지 않기 때문에 react-native-get-random-values라는 라이브러리를 설치해 호환시켜야 한다. $ yarn add react-native-get-random-values $ npx pod-install 라이..

TextInput에 내용이 많아졌을때 기본적으로 보여줄 수 있는 줄 수를 초과할 경우, 안드로이드에서는 별 문제없이 스크롤할 수 있지만, iOS에서는 하단 내요이 잘리게 된다. 따라서 KeyboardAvoidingView로 컴포넌트 내부의 내용을 감싸줘야 작성한 내용이 엄청 길어져 줄이 많아졌을 때도 문제없이 글을 작성할 수 있다. KeyboardAvoidingView를 적용하지 않고 많은 내용을 작성했을때 iOS의 화면을 확인해보겠다. 키보드가 작성한 내용을 가리는 것을 확인할 수 있다. 이번엔 KeyboardAvoidingView를 적용해보자. import React from "react"; import { KeyboardAvoidingView, Platform, StyleSheet } from "r..