이전 포스팅에서 파이어 베이스와 앱 연동하는 방법을
확인해보았습니다
못 보신 분들은 하단에 포스팅을 클릭해주세요
2022.07.05 - [Server/Firebase] - React Native X Expo X 구글 파이어 베이스 서버 구축, 기본 세팅하기
React Native X Expo X 구글 파이어 베이스 서버 구축, 기본 셋팅하기
2022.06.30 - [Mobile/React Native] - [React Native X Expo] View, ScrollView, Text, Button, TouchableOpacity, Image 엘리먼트 & 태그 활용 리액트 네이티브 [React Native X Expo] View, ScrollView, Text,..
tantangerine.tistory.com
그럼 본론으로 파이어 베이스의 몇 가지 기능을 설정하고 사용하는 방법까지 알아보겠습니다
알아보려는 기능은 2가지입니다
가장 기본적이면서 간단한 기능들이죠
- 파일 스토리지 - 간단히 말하면 파일을 저장하는 장소라고 생각하시면 됩니다.
- 리얼타임 데이터 베이스 - 파이어 베이스에서 제공하는 함수를 사용해서 데이터 저장, 수정, 삭제가 가능합니다
정리하다 보니 리얼타임 데이터베이스는 다음 포스팅에서 해야겠네요
파일 스토리지 기능을 우선 알아보도록 하겠습니다
firebase의 파일 스토리지 설정 및 기능 구현 방법
파이어 베이스 홈페이지에서
로그인 후 시작하기 버튼을 클릭하면
이전 포스팅까지 하셨다면 현재 프로젝트 공간에
자신의 프로젝트명이 노출되고 있는 것을 확인할 수 있습니다
클릭해서 이제 파일 스토리지를 활성화하로 가시죠!
아래의 화면과 같이
Storage를 확인할 수 있으실 겁니다
그 버튼을 클릭하고
시작하기를 클릭하시면 이제 거의 끝난 거나 다름없습니다!
아래와 같은 창이 노출되면 다음 버튼을 클릭하여 진행합니다
그리고 파일 스토리지와 저장 장소를 설정합니다
지금 살고 있는 지역과 비슷하면 괜찮겠죠?
그래서 선택하고 완료 버튼을 클릭합니다
파일을 저장할 수 있는 스토리지의 화면이 활성화됩니다
그럼 이미지만 저장해서 관리할 수 있는 폴더를 생성하면 편하겠죠?
폴더 모양의 아이콘을 클릭해서 폴더를 만들어 줍니다
저는 폴더명을 images라고 하려고요
빨간색으로 블록이 처리된 부분은 파일 저장 경로가 노출되어있는 것을 확인할 수 있습니다
폴더를 생성하면 경로가 변경된 것을 확인할 수 있으며,
파일 업로드 버튼을 클릭하여 파일도 저장된 모습을 확인할 수 있습니다
이렇게 저장된 파일은 외부 경로를 통해 이미지를 불러올 수 있어요
이미지 불러오는 법은
마지막에 링크를 걸어 두겠습니다
이렇게 파일을 저장하는 공간을 만들어보았습니다
다음 포스팅에서는 리얼타임 데이터베이스 기능으로
저장공간에 파일을 저장하는 방법과
데이터를 추가, 삭제, 수정하는 방법을 알아보도록 하겠습니다
1일 1포스팅을 하려고 노력하고 있는데 쉽지는 않네요
그래도 이렇게 포스팅을 하며 복습하니 기억에도 많이 남고 하네요
힘들겠지만 오늘도 한걸음 나아갑시다!!
힘내시고 아직 대모험은 끝나지 않았으니까요!!
파이팅!!
[React Native X Expo] View, ScrollView, Text, Button, TouchableOpacity, Image 엘리먼트 & 태그 활용 리액트 네이티
View, ScrollView, Text, Button, Image 엘리먼트 & 태그 활용 엘리먼트 활용 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. App.js 상에서 View는 화면 전체 영역을 가진다. 아래와 같이 화면을 분할.
tantangerine.tistory.com