전체 글
firebase 연동방법 (2) - 파이어스토어, 리얼타임 데이터베이스 등
데이터베이이스별 저장형식 1) MySQL : 엑셀 형식 2) 파이어스토어 데이터베이스 : 이미지 형식 3) 리얼타임 데이터베이스 : JSON 형식 1. 파이어스토어 데이터베이스 (이미지 파일 저장) : 이미지 파일을 저장하고 필요시 도메인으로 간편하게 불러올 수 있는 기능 > 파이어베이스의 좌측 항목들 중 빌드 > 스토리지 선택 > 다음 버튼 누르면 원하는 서버 위치 고르고 완료 (구글 서버가 중 가까운 지점 고르는 것) > 버킷(저장소)가 생김 > 폴더 생성 > 파일 업로드 > 파일을 눌러보면 파일 이름이 파란색으로 뜸 > 파일이름 눌러보면 해당 파일이 브라우저로 열림 > 브라우저 상단의 주소가 해당 이미지의 주소가 된다. 2. 리얼타임 데이터베이스 (JSON 데이터 저장) : 플랫폼과 실시간 연동되어..
firebase 개념 & 연동방법 (1)
서버리스(Serverless) : 서버를 직접 만들 필요 없이, 필요한 서버 기능을 제공하는 곳에서 서비스를 사용하는 것 파이어베이스(Firebase) : 구글에서 만든 서버리스 (로그인, 이미지 서버 등 다 지원해줌) * 예시설명 1) 게임에 가입한다 > 파이어베이스에 가입한다 2) 캐릭터를 생성한다 > 파이어베이스 프로젝트를 생성 3) 캐릭터에 필요한 장비를 착용한다 > 사용 할 파이어베이스 서비스 활성화 파이어베이스 앱 연동 및 파일 스토리지(이미지 파일 관리) 1. 프로젝트 만들기 1) 파이어베이스에서 프로젝트 생성 2) iOS, Android, web 중 선택 (react-native의 경우, 웹앱으로 구분된다) 3) 웹 아이콘 클릭 ( ) 4) 자바스크립트 코드 생성 후 알려줌 => 내용을 보..
Loading화면 구현하기
1. 로딩 화면 만들어두기 Loading.js import React from 'react'; import { StyleSheet, Text, View, ImageBackground } from "react-native"; import { render } from 'react-dom'; import 컴포넌트이름 from '../assets/원하는 이미지 이름.png'; export default class Loading extends React.Component { render() { return ( ); } } 2. App.js에 useEffect, useState, 삼항연산자로 로딩 페이지 구현 1) function안에 useState를 선언해준다. 이때 변수는 state와 ready로 두 개 선언해..
[리액트 기초] 용어공부 [진행중]
1. 왠만하면 yarn add 나 expo install을 사용하기 2. Peer dependencies : 사용시 필요한 확장들로, ""안에있는 모듈을 yarn add로 설치해주기 설치 완료하면 pakage.json에 자동으로 입력됨.
Search.js 모음 [진행중]
1. Dynamic_Searchbar 사용 [공식문서 : https://www.npmjs.com/package/react-native-dynamic-search-bar] * props는 공식문서 참조 설치파일 npm i react-native-dynamic-search-bar yarn add WrathChaos/react-native-dynamic-search-bar#expo yarn add WrathChaos/react-native-dynamic-vector-icons#expo yarn add react-native-animated-spinkit yarn add @freakycoder/react-native-bounceable 기본 사용법 : 모듈을 import하고, 태그를 사용. import Sear..
Navigation 혼용 (Stack + BottomTab)
1. 기본설명 각각의 화면을 구성하는 js파일을 받아 > 각각 StackNavigator를 입혀 StackScreen화 시키고 > 이를 다시 TabNavigator 내에서 TabScreen화 하여 화면을 구성한다. 단, WebView의 경우 StackNavigator안에서 StackScreen화 되지 않으므로, 뒤로가기가 먹히지 않는다. 따라서 이럴 땐, 컴포넌트로 import할 WebView 자체에 뒤로가기 기능을 구현해 놓고 import하면 된다. ( 참고링크 : https://radpro.tistory.com/30 ) 2. 옵션 설명 ㄱ. backBehavior : Bottom Tab에서, 탭끼리의 뒤로가기 상호작용은 공식문서의 option에 있다. 그중 default값은 firstRoute, 즉 ..
WebView에서 Back버튼 사용하기(Android버전)
1. 설명 : 안드로이드의 뒤로가기버튼(Back)으로 WebView상의 뒤로가기(스택네비같은 동작)를 사용하기 위해선, 하드웨어적인 기능과 소프트웨어적인 기능을 구현해야 사용이 가능하다. 아래의 코드를 사용한 webview 컴포넌트를 만들어 구현하면 된다. 만약, 공식홈페이지의 Navigation TabBar 컴포넌트를 사용할때, webView를 함께 구성하고 싶다면, TabBar 구현 후, 원하는 컴포넌트 페이지 내에 아래의 WebView를 넣으면 StackNavigation효과를 사용할 수 있다. WebView.js import React, { useRef, useState } from "react"; import { BackHandler } from "react-native"; import { us..
Infinite scroll, Pull down refresh 구현 (Flatlist 사용)
사용기능 : Flatlist, 외부 JSON파일 1. 기본 Flatlist 구현 (테스트용 외부 JSON 파일 사용 => JSONPlaceholder ) : Flatlist에 데이터 목록을 표시하기 위해선 아래의 세가지 props가 기본이다. data={ } : 데이터를 만들 리스트([ ])가 들어갈 곳. 즉, JSON의 키값 혹은 키값을 받은 getter변수를 넣음된다. keyExtractor={ } : FlatList고유 식별자를 사용하거나 id배열의 개별 요소를 사용하도록 지시한다. keyExtractor={item => item.id} 같은 형식으로 사용한다. renderItem={ } : 데이터 배열에서 개별 요소를 가져와 UI에 렌더링하는 곳이다. 즉, UI적 요소를 구성하는 곳이다. rend..
WebView 구성하기
설치파일 npm install --save react-native-webview npm install --save react-native link react-native-webview 기존 core에 있을때는 import {WebView} from 'react-native'; 로 import 해주었지만, 지금은 import { WebView } from 'react-native-webview'; 밑의 코드로 import 해주어야한다. WebView 사용 두 가지 방법 1. uri로 웹페이지를 연결하는 기본식 import React, {Component} from 'react'; import { WebView } from 'react-native-webview'; class MyWeb extends Com..