일단 내가 firebase database에 만든것 

 

백엔드에서 데이터 담겨져서 날라오는거 생각하면 걍

 

note: {

     name: "123"

     뭐 다른 값들도 들어있겠지 

}

 

이런느낌으로 받아들여져서 아아 ~~ 이런생각... 

완전 잘 모르겠다 싶으면 그냥 대강 넣고 코드 따라넣고 몇번 데이터 이렇게 저렇게 넣어보면 감올듯싶다 

 

내가 Import 한것들 

import {app} from "@/firebase"
import {collection, doc, query, setDoc, getDocs, addDoc, updateDoc, deleteField, deleteDoc} from "firebase/firestore/lite";
import {getFirestore} from "firebase/firestore/lite";

 

 

const dbService = getFirestore();

async function getData(path) {
  // 컬렉션의 모든 문서 가져오기
  const getTestData = await getDocs(query(collection(dbService, path)))
  return getTestData.docs.map(ele => ({
    ...ele.data()
  }))
}

 

 


async function testGetData() {
  // 데이터 아이디까지 알면 가져오는 방법
  doc(dbService, 'test', 'case1')
}

// 데이터는 obj형태로 삽입해야함
async function addData(path, data) {
  await addDoc(collection(dbService, path), data);
}

async function testAddData() {
  // id가 랜덤값으로 들어감
  await addDoc(collection(dbService, 'new'), {
    // 들어갈 데이터는 객체형식
    name: '안녕하세요',
    bye: '반갑',
    createdAt: Date.now(),
  });

  // set 으로 하면 Id를 지정할 수 있음
  await setDoc(collection(dbService, 'new', 'createId'), {
    // 들어갈 데이터는 객체형식
    name: '안녕하세요',
    bye: '반갑',
    createdAt: Date.now(),
  })
}

async function testDelData() {
  //document 지우기
  await deleteDoc(doc(dbService, "new", "rBBZTYyxe2rpjBj3LcxI"));


  // 필드 지우기
  const cityRef = doc(dbService, 'test', 'case1');
// Remove the 'capital' field from the document
  await updateDoc(cityRef, {
    id: deleteField()
  });
}



const updateUser = async () => {

  // 원하는 데이터 찾아서 수정함
  const userDoc = doc(dbService, "new", 'rBBZTYyxe2rpjBj3LcxI');
  try {
    const res = await updateDoc(userDoc, {bye: 'zzz'});
    console.log(res); // res는 undefined
  } catch (e) {
    console.log(e);
  } finally {
    console.log("end");
  }
};

 

여기엔 주석을 다 달아놔서 딱히 설명할 필요가없을듯.. 

 

 

'firebase9' 카테고리의 다른 글

firebase9 Authentication  (0) 2023.05.22
firebase9 설치 vue3  (0) 2023.05.22

전 게시물에 말했던가 ...

 

나는 이메일이랑 구글 로그인만 구현했고 이거 두개 할줄알면 다른것들은 감 잡는데 얼마 안걸릴것같아서 이렇게 두개만 진행했다 

 

 

일단 vue 파일생성 

나는 authView 라는 파일 안에 연습용으로 모든 로그인기능을 넣었다 ㅋㅋ 기능 구현이 잘되었으니 이제 다시 꺼내다가 잘 써먹어야겠다 

 

일단 import한 코드 

 

import {
  GoogleAuthProvider,
  signInWithPopup,
  signInWithRedirect,
  signOut,
  onAuthStateChanged,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword, getAuth,
  getRedirectResult
} from "firebase/auth";
import {app} from '@/firebase'

이메일 아이디 생성 

 

function createUser(email, password) {
  console.log(email, password, ' 이메일이랑 아이디에요 ')
  createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        console.log(user)
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });
}

 

 

이메일 로그인 

 

function loginUser(email, password) {
  signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        // ...
        console.log(user)
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });
}

 

로그인 체크 

 

function checkAuth() {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      const uid = user.uid;
      console.log(uid, 11, 'check user uid')
      // ...
    } else {
      // User is signed out
      // ...
    }
  });
}

 

 

구글 로그인 

 


const auth = getAuth()
const provider = new GoogleAuthProvider();

function googleLogin(auth, provider) {
  signInWithPopup(auth, provider)
      .then((result) => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const credential = provider.credentialFromResult(result);
        const token = credential.accessToken;
        // The signed-in user info.
        const user = result.user;
        // IdP data available using getAdditionalUserInfo(result)
        // ...

      }).catch((error) => {
  });
}

 

리다이렉트 

 


function redirect(auth, provider) {
  signInWithRedirect(auth, provider);

}

 

토큰 체크 

 


function tokenCheck(auth) {
  getRedirectResult(auth)
      .then((result) => {
        // This gives you a Google Access Token. You can use it to access Google APIs.
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;

        // The signed-in user info.
        const user = result.user;
        // IdP data available using getAdditionalUserInfo(result)
        // ...
      }).catch((error) => {
  });
}

 

이렇게 간단하게 코드 복붙하면 되는데 이거 뭐지.. 하면서 고민한 나를... 자책하게됨 .. 

 

추가적인건 공식문서 확인

'firebase9' 카테고리의 다른 글

firebase9 friestore database  (0) 2023.05.22
firebase9 설치 vue3  (0) 2023.05.22

공부용으로 한거라 react나 next로 할라그랬는데 firebase 공식문서 보니까 아 이게 뭔소리지 싶어서 바로 일단 익숙한 vue3 composition을 뽑아들었다...

 

firebase 페이지에 들어가서 프로젝트 만드는것까지는 어려울게 없으니까 여기까진 패스 

 

나는 authentication 이랑 firestore database , realtime database , storage , hosting을 사용했다 

 

근데 hosting 은 다른거 써도 괜찮을것같음 .. 맨처음 서버리스 접하게된 인프콘 2022 restful api 개발 영상에서는 vercel 을 사용했었던가... 

 

거기선 구글클라우드도 사용했는데 나는 아직 못붙였으니까 그것도 붙여보고 도커도 붙여보고 하는걸 목표로 좀 더 공부해야겠다 

 

------코드 -----

 

 

  1. npm install firebase

 

나는 src 폴더안에 firebase.js 를 생성했다 .

다른분들은 퍼블릭에 넣는분도 있었고 firebase 폴더를 따로 생성해서 넣는분들도 있었고 다양한 방법이 있었다 

 

/src/firebase.js 

 

import { initializeApp } from "firebase/app";
import {getAuth, connectAuthEmulator, GoogleAuthProvider} from 'firebase/auth';


// Your web app's Firebase configuration
let firebaseConfig = {
    apiKey: "",
    authDomain: "-",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};


const app = initializeApp(firebaseConfig);

export { app };

 

firebaseConfig 안의 값들은 처음에 firebase 프로젝트 만들면 안에들어갈거 줌 

 

글고 main.js 에다가 

 

import '@/firebase'

 

이거 하나는 해줌 

 

 

아 혹시firestore.rules 에 

 

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true
    }
  }
}

if true 아니면 true 로 변경하시길 

 

나는 authentication 은 이메일이랑 구글만 했다. 

이거 두개 감잡으면 다른것들은 다 시간 좀만 투자해도 가능하지않을라나... 

 

난 일단 이정도 기본설정으로 시작했다 . 

'firebase9' 카테고리의 다른 글

firebase9 friestore database  (0) 2023.05.22
firebase9 Authentication  (0) 2023.05.22

공부용 + 취미로 페이지나 앱을 만들고싶은데 백엔드나 sql 같은걸 못하다보니까 이러한 데이터 관리들에 대해서 많은 문제가 생겼었다 

 

그러다가 우연찮게 서버리스라는걸 배우게 되고 아 이거라면 내가 백엔드를 배우는 기간동안 뭔가를 만들고싶어하는 내 욕구를 채워줄 수 있겠구나 라는 생각을 하게되었다 

 

그러나 firebase 8에 관련한 게시물들이 많았고 9는 한국어로 된건 별로 없더라... 

 

뭐 사실 내가 알잘딱 엄청 잘하는 스타일이었다면 공식문서만 보고도 확확 했겠지만 처음엔 감이 안와서 게시물들을 좀 찾아봤었다 

 

몇개 찾아보고 나니까 감이 좀 와서 공식문서보고 대충 슥슥 했지만 여전히 이게 뭔소리지 했던것들이 있어서 나중에 다시 그런일 없게 firebase 설정 후기를 남겨야겠다 

'잡담' 카테고리의 다른 글

지금 목표로 잡아둔것...  (0) 2023.04.06

+ Recent posts