[Vue3 + vite + tailwindCSS] firestore에 db(유저정보) 저장하기

 

회원가입 버튼을 클릭하면 로딩을 표시하기 위해서 

 

    //회원가입 클릭 시 실행되는 함수

    const onRegister = async () => {

      try {

        loading.value = true; //로딩 시작

 

버튼을 클릭하면 로딩의 값을 true로 변경하고 

 

finally를 사용하여 오류가 발생하건, 정상적으로 종료되건 일단 끝이나면 로딩 값을 false로 만들어준다.

    } catch (e) {

        console.log("에러발생", e);

        alert(e.message);

      } finally {

        loading.value = false; //로딩 종료

      }

    };

 

 

회원가입 버튼을 두 개만들어서 

v-if와 v-else를 사용하여, 로딩 중에 표시되는 버튼과 로딩이 아닐 때 표시되는 버튼을 구분하여 만들어준다. 

    <button v-if="loading" class="w-96 rounded bg-light text-white py-4">

      회원가입중 입니다.

    </button>

    <button

      v-else

      @click="onRegister"

      class="w-96 rounded bg-primary text-white py-4 hover:bg-dark"

    >

      회원가입

    </button>

 

 

 

그리고 회원가입 시 작성했던 데이터와 가입일자 , 프로필 사진 등 필요한 데이터들은 db로 관리할건데

 

이 기능들은 firestore를 통하여 진행한다.

 

https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko&_gl=1*13vbxpz*_up*MQ..*_ga*OTI3OTE3MDgxLjE3MTA1OTA5NDg.*_ga_CW55HF8NVT*MTcxMDU5MDk0OC4xLjAuMTcxMDU5MDk0OC4wLjAuMA..

Cloud Firestore에 데이터 추가  |  Firebase

 

import { doc, setDoc } from "firebase/firestore";

import { auth, db } from "../firebase";

import { useRouter } from "vue-router";

 

setDoc을 사용하여 저장한다.

 

// 변수 ref(초기값) usestate 와 동일

    const username = ref("");

    const email = ref("");

    const password = ref("");

    const loading = ref(false);

    const router = useRouter();

    //회원가입 클릭 시 실행되는 함수

    const onRegister = async () => {

      try {

        loading.value = true; //로딩 시작

        //인증 사용자 추가 및 유저 정보만 가져오기

        const { user } = await createUserWithEmailAndPassword(

          auth,

          email.value,

          password.value

        );

        //회원가입 시 유저 정보 db 저장하기

        await setDoc(doc(db, "users", user.uid), {

          uid: user.uid,

          email: email.value,

          profile_image_url: "/profile/jpeg",

          num_tweets: 0,

          followers: [],

          followings: [],

          created_at: Date.now(),

        });

        alert("회원가입에 성공하였습니다. 로그인 해주세요.");

        //회원가입 성공 시 로그인 페이지로 이동

        router.push("/login");

      } catch (e) {

        console.log("에러발생", e);

        alert(e.message);

      } finally {

        loading.value = false; //로딩 종료

      }

    };

 

그리고 정상적으로 가입이 완료되면 alert을 사용하여 성공함을 알림과 동시에 router를 사용하여 login페이지로 이동한다./

 

 

 

성공 시 아래와 같이 firestore에 정상적으로 추가됨을 확인할 수 있다.