귤귤의 대모험

이번에는 구글 파이어 베이스의 Cloud Firestore 데이터 추가 기능을 구현해보겠습니다

 추가할 때 이미지도 같이 저장해보도록 하겠습니다

아래의 목차와 같이 진행하겠습니다

1. Storage 설정 및 폴더 추가하기
2. App 내에서 이미지 데이터 컨트롤하기
3. Stroage에 이미지 저장하기
4. Cloud Firestore에 데이터 추가하기

우선 파이어 베이스의 이미지를 파일 저장소(Storage) 설정부터 하겠습니다

Storage 설정 및 폴더 추가

폴더를 추가하고 보안설정을 진행하도록 하겠습니다

Rules 탭을 클릭해서

allow read, write로 설정하여

읽고, 쓰기를 가능하게 합니다

이제는 이미지를 저장할 파일 저장소의 폴더 추가 및 설정을 끝냈습니다

App 내에서 이미지 데이터 컨트롤 하기

expo-image-picker 라이브러리를 설치합니다

사진을 촬영해서 바로 앱에 데이터를 전달하여 이미지를 저장하는 방법

앱 내의 사진첩을 접근해서 이미지 데이터를 불러와 저장하는 방법을 알아보겠습니다

그 방법은 아래의 포스팅에 자세히 설명이 되어있습니다

포스팅을 클릭할 때 마우스 우 클릭해서  새 탭에서 링크 열기를 선택하시면 더 편하게 볼 수 있습니다

그럼 아래의 포스팅을 클릭해봅시다!

2022.07.29 - [Mobile/React_Native] - React Native X Expo 이미지 데이터 expo-image-picker로 이미지 업로드 구현하기

Storage에 이미지 저장하기

아래와 같이 화면이 구성되어있다고 가정합시다

  const pickImage = async () => {
    console.log('이미지 선택');
    let imageData = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 4],
      quality: 1,
    });
    if(imageData.uri){
      setImageUri(imageData.uri ? imageData.uri : '');
    }
  };

위와 같이 선언된 함수를 호출하여 이미지 사진첩 내 이미지의 데이터를 가져와서 setImageUri에 저장합니다

또 한, 미리 보기 기능이 구현되어있다면 저장할 때 imageData.uri가 있을 경우에만 저장하도록 합니다

등록버튼을 클릭하게 되면 아래와 같은 함수가 호출이 됩니다

이때 중요한 것은 blob형식으로 변경해야지만 최종적으로 파이어 베이스 storage에 업로드할 수 있습니다

사이드바에 공식문서를 참조하시면 더 많은 정보를 확인할 수 있습니다

blob 객체는 파일류의 변하지 않는 미가공 데이터를 나타내며, 텍스트와 이진 데이터 형식으로 읽을 수 있습니다

const upload = () => {
    confirmAlert('게시글을 등록하시겠습니까?', async () => {
      console.log('업로드 준비중!');
      if(!imageUri){
        Alert.alert('이미지를 등록해주세요.');
        return;
      }
      if(!title){
        Alert.alert('제목을 입력해주세요');
        return;
      }
      if(!content){
        Alert.alert('내용을 입력해주세요');
        return;
      }
      if(!currentUser.uid){
        Alert.alert('로그인이 필요합니다');
        return;
      }
      const currentUser = firebase.auth().currentUser;
      let date = new Date();
      let getTime = date.getTime();
      let data = {
        title: title,
        author: currentUser.email,
        desc: content,
        image: image,
        date: getTime,
        uid: currentUser.uid,
      };
      const response = await fetch(imageUri);
      const blob = await response.blob();
      const imageUrl = await imageUpload(blob, getTime);
      data.image = imageUrl;
      console.log(data);
      let result = await addDiary(data);
      if (result) {
        Alert.alert('글이 성공적으로 등록되었습니다!');
        setTitle('');
        setContent('');
        setImage(tempImage);
        setImageUri('');
      }
    })
  };

fetch를 활용해서 주소를 실행시켜 결괏값을 가져와 blob함수를 실행하여 그 데이터 값을 storage에 저장하게 됩니다

그렇게 호출된 imageUpload에서 아래와 같이 실행하게 됩니다

blob과 데이터를 매개변수로 받아 파일 저장소(storage)에 저장하게 됩니다

저장 후   snapshot.ref.getDownloadURL()를 호출하여 storage에 저장된 url주소를 불러옵니다

그 불러온 url주소를 reurn 하여 cloud firestore에 저장합니다

export async function imageUpload(blob, date) {
  const storageRef = firebase
    .storage()
    .ref()
    .child('diary/' + date);
  const snapshot = await storageRef.put(blob);
  const imageUrl = await snapshot.ref.getDownloadURL();
  blob.close();

  return imageUrl;
}

Cloud firestore에 데이터 추가하기

위와 같이 return값을 기본 Object객체에 추가하여 addDiary의 매개변수를 할당하여 함수 호출을 합니다

그리고 firebase.firestore() 함수, db.collection(). doc.(). set()의 두 가지 함수를 호출하여

diary라는 데이터 베이스 테이블 생성과 data의 객체 값들을 cloud firestore에 추가합니다

export async function addDiary(content) {
  try {
    const db = firebase.firestore();
    await db.collection('diary').doc(content.date + "D").set(content);
    return true
  } catch (err) {
    Alert.alert("글 작성에 문제가 있습니다! ", err.message)
    return false
  }
}

아래와 같이 파이어 스토어에 저장된 모습을 확인할 수 있습니다

collection('diary') // 테이블을 만들게 되면서 diary를 만들면서 없을 때에는 추가를 하게 됩니다

. doc(content.date + "D") // 저장한 날짜를 가져와 'D'를 붙여서 저장합니다 그것이 테이블의 PK KEY가 됩니다

하지만 위의 방식보다는 doc(content.date + "_" + content.author) 이 방식으로 변경하는 것이 더 유니크한 값이 되지 않을까 생각합니다 여러 유저들이 들어와서 이미지를 동시에 클릭한다면 분명 오류가 발생할 것이라 생각합니다

. set(content); // content객체의 값들은 아래에 이미지에서 확인할 수 있습니다

이렇게 cloud firestore에 데이터 저장하는 방법과 파일 저장소(Storage)에 이미지를 저장하는 방법을 알아보았습니다

사이드바에 파이어 베이스 관련 공식 문서가 있으니 참고하세요

IT 개발 공부는 끝이 없기에 항상 공부를 해야 하는 직종이지요 하지만 포기하지 마시고 끝까지? 끝이 있을지는 모르겠지만 하시길 바랍니다

우리들의 대모험은 끝나지 않았습니다 그럼 파이팅 하시고 다음 포스팅도 기대해주세요 감사합니다

저번 포스팅에서 

Authentication & Cloud Firestore

서버 및 기능 구현을 완료하였습니다

2022.07.20 - [Server/Firebase] - React Native X Expo X 파이어 베이스 Authentication 및 Cloud Firestore 서버 구축

회원가입 구현하기

firebase의 인증 기능을 사용하기 위해 

파이어 베이스의 함수를 호출해서 결과값을 받아 인증 및  회원가입을 진행하게 됩니다.

이때 고객의 기입정보를 데이터 베이스에 저장하며

인증 테이블에 고유키 값과 비밀번호도 저장하게 됩니다.

직관적으로 관리하기위해

firebaseApi.js 파일을 만들고 아래와 같이 코드 작성을 해서 

필요할 때 import 하여 사용합니다.

회원가입 폼에서 등록버튼을 누르면

registration() 함수를 호출하여

아래와 같은 함수를 실행하게 됩니다

import * as firebase from "firebase";
import "firebase/firestore";
import {
  Alert
} from "react-native";

export async function registration(nickName, email, password, navigation) {
  try {
    console.log(nickName, email, password)
    await firebase.auth().createUserWithEmailAndPassword(email, password);
    const currentUser = firebase.auth().currentUser;
    const db = firebase.firestore();
    db.collection("users")
      .doc(currentUser.uid)
      .set({
        email: currentUser.email,
        nickName: nickName
      });
    Alert.alert("회원가입 성공!")
    navigation.push("TabNavigator")

  } catch (err) {
    Alert.alert("무슨 문제가 있는 것 같아요! => ", err.message);
  }
}

회원가입을 진행하면 

firebase.auth().createUserWithEmailAndPassword(); 함수를 사용해서 

기입한 메일과 uid의 고유번호를 생성해서 식별자 테이블에 정보를 저장하게 됩니다

이때 중요한 것은 비동기(async/await)가 정말 중요합니다

회원가입이 끝날 때까지 다른 작업은 안 하는 것이 좋겠지요?

그리고 firebase.auth().currentUser 함수를 사용하게 되면

현재 자신의 uid와 email 정보를 조회할 수 있습니다.

또한, 그 정보를 가지고 데이터베이스에 컬렉션의 상위는 users에 uid를 저장합니다

그리고 email과 nickName을 같이 지정하여 저장합니다.

위의 함수를 실행하게 되면 아래와 같이 저장됩니다

아래에 식별자는 자신의 이메일이 저장이 됩니다

사용자 uid는 고유한 키값으로 파이어 베이스에서 생성해줍니다

컬렉션의 user와 문서는 사용자 uid가 저장되며 필드는 

회원의 정보가 저장된 것을 확인할 수 있습니다

위의 정보는 아래의 코드로 표현할 수 있습니다

{
    users : {
        IkafkITYpGXfYlxLsqU1W2uD2XC2 : {
            email : "sparta@gmail.com",
            nickName: "Gunhee"
        }
    }
}

로그인 구현하기

로그인 폼에서 아래와 같은 함수를 실행해서 

firebase.auth().signInWithEmailAndPassword(); 함수를 

호출해서 기입한 정보들이 현재 식별자 테이블에 있는지 확인을 합니다

로그인에 성공하면 탭 내비게이션 메인 페이지로 이동하게 됩니다

export async function signIn(email, password, navigation) {
  try {

    await firebase.auth().signInWithEmailAndPassword(email, password)
    navigation.push("TabNavigator")

  } catch (err) {
    Alert.alert('로그인에 문제가 있습니다! ', err.message);
  }
}

이렇게 회원가입 및 로그인 기능을 구현하였습니다

구글 파이어 베이스를 사용하면

정말 간편하게 구현할 수 있었습니다

이렇게 한 개씩 하다 보면 조금도 숙달이 되겠지요?

비동기 부분도 한 번씩 더 보고 더 깊게 공부를 해보아야겠다는

생각하게 되었습니다.

그럼 오늘도 파이팅 하시고~!

즐거운 대모험이 되시길 바랍니다!!

파이팅!!

Authentication이란?

이 서비스는 다양한 타 앱들의 정보로 계정 인증하여 보다 손쉽게

회원가입과 로그인을 구현할 수 있습니다.

그리고

타 앱 간의 정보 인증 이외에도 휴대폰 번호와 이메일 인증으로도

구현이 가능합니다.

이 기능을 사용하기 앞서 우선 

가장 중요한 데이터베이스를 구성해야 합니다

그래야 지만 회원가입의 유저 정보를 저장할 수 있습니다

그 데이터베이스를 구축하기 위해서는 

Cloud Firestore를  사용해보도록 하겠습니다

잠깐

저번에 배운 리얼타임 데이터 베이스와 또 다른 것입니다

같은 firebase의 데이터 베이스지만 서로 다른 기능들을 가지고 있습니다

2022.07.08 - [Server/Firebase] - React Native X Expo X 파이어 베이스 리얼타임 데이터 베이스 설정 및 조회, 추가, 삭제 기능 구현

두 가지의 차이점은 다음 포스팅 때 알아보도록 하고

우선 지금 구축할 데이터 베이스를 알아보도록 하겠습니다

Cloud Firestore이란?

리얼 타임 데이터베이스보다 확장성이 크며 직관적이 모델링과

풍부하고 빠른 쿼리와 원활한 확장성을 제공하고 있습니다

리얼타임 데이터베이스의 업그레이드 버전이라고 생각하시면 되겠습니다

하지만 꼭 그런 개념은 아니니 다음 포스팅 때 알아보도록 해요

우선 아래의 같이 폴더와 파일을 생성해줍니다

프로젝트를 생성하여 키값을 파일로 관리를 하기 위함입니다

일단 파이어 베이스 프로젝트를 추가하시지 않았다면 위의 포스팅에 들어가시면 프로젝트 추가 방법과

키값의 위치를 확인할 수 있습니다

그리고 Expo로 파이어 베이스구축하려고 하니 설치는 필수입니다!

expo install firebase

생성된 키값을 복사해서 

아래 와같이 파일을 생성합니다

아래의 이미지처럼 export default를 해서 

여러 파일에서 사용할 수 있게 만들어 줍니다

그리고 마지막으로 데이터 베스 이를 만들기로 합시다

데이터베이스 만들기 Cloud Firestore

파이어 베이스로 로그인하여 프로젝트 시작하면

대시보드의 빌드란에 Cloud Firestore가 존재하는 것을 확인할 수 있습니다

데이터 베이스 만들기 버튼을 클릭해서 진행해 봅시다

프로덕션 모드로 진행하고

보안 규칙은 추후에 변경하도록 합니다

위치 설정은 aisia-northest2로 해주며 사용 설정 버튼을 클릭합니다

그럼 이제 보안 규칙을 변경하도록 하겠습니다

Cloud Firestroe에 들어가시면 규칙 탭을 확인하실 수 있을 겁니다

write 부분을 true로 변경해 줍니다

이제 데이터 베이스 서버 구축이 완료되었습니다

그럼 서버와 앱을 연결합니다

위 와같이 import 하여 라이브러리와 접속에 사용할 키값을 가져옵니다

그렇게 firebase.initializeApp() 함수를 사용하여 연결합니다

Authentication 서비스 이용하기

위에서 언급했듯이 회원가입 기능과 로그인 기능을 구현하기 위해 필요한 서비스입니다

여러 타 앱들로 계정을 인증받아 정보를 데이터 베이스에 저장하며

Authentication는 고객들의 고유키를 저장하여

관리하는 기능으로 대시보드에서 어드민 페이지가 없이도 데이터 관리가 용이합니다

그럼 시작하기 버튼을 클릭하여 서비스 이용할 준비를 하겠습니다

아래와 같이 로그인 제공업체 리스트를 볼 수 있으며

새로운 업체들도 추가할 수 있습니다

아래의 제공업체를 클릭하면

2 단계 창이 노출되며 

여러 가지 정보들을 활용하여

업체 간의 인증서비스를 연동시킬 수 있습니다

아래와 같이 앱 ID와 비밀번호를 입력하여 진행하며

비밀번호 밑에 회색으로 고유 키값이 존재합니다

업체들 간의 데이터인증을 위한 키값이며 

업체들간의 방법과 키값은 모두 다르니

한번 사용 설정해서 어떻게 인증서비스를 이용하는지

이용해보는 것도 좋은 공부가 될 것입니다

이렇게 서비스를 이용할 모든 준비는 끝이 났습니다

그럼 다음 포스팅에는 이 두 가지 서비스를 이용하여 

회원가입 시 데이터베이스에 고객의 정보를 저장하고

authentication에는 회원의 고유 키값과 비밀번호를 저장함으로써

회원 가입과 로그인 기능을 구현해보겠습니다

그럼 오늘 복습도 끝이 났습니다

하루에 2~3시간씩 공부를 하면

힘이 들지만 그래도 앞으로 조금씩 나아간다는 느낌이 확실히 있습니다

내년 말까지는 나만의 앱을 만들기 위해 노력해 보도록 하겠습니다

아직 대모험은 끝나지않았다는 것을 명심하시고!

같이 끝가지 나아가요!!