[REACT] React + Typescript + Vite + SCSS로 만드는 쇼핑몰 개인프로젝트 (9/10)

💡오늘 할 것!

- firebase 연동

 

1️⃣ firebase 설치

📚 firebase란?

• NoSQL 기반의 데이터베이스
• RTSP 방식의 데이터베이스 지원 
  • RTSP : Real Time Stream Protocol. 실시간으로 데이터들을 전송

 

1. firebase 시작하기

2. 프로젝트 만들기

3. 데이터베이스 만들기 - Firestore Database

4. 컬랙션 만들기

 

5. 프로젝트 설정 / 플랫폼 선택

- 앱 등록 후 Firebase SDK 추가

 

6. firebase 설치

- 터미널에서 server로 이동

npm install firebase

 

7. SDK작성 (보안을 위해 .env 파일 생성 후 불러오기)

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import "dotenv/config";
import { getFirestore } from "firebase/firestore";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.fb_apiKey,
  authDomain: process.env.fb_authDomain,
  projectId: process.env.fb_projectId,
  storageBucket: process.env.fb_storageBucket,
  messagingSenderId: process.env.fb_messagingSenderId,
  appId: process.env.fb_appId,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;

export const db = getFirestore(app);

 

2️⃣ Product 연동

1. Query

const productResolver: Resolver = {
  Query: {
    products: async (parent, { cursor = "", showDeleted = false }) => {
      const products = collection(db, "products"); 
      const queryOptions = []; // orderby Error with startAfter, where
      if (cursor) {
        const snapshot = await getDoc(doc(db, "products", cursor)); 
        queryOptions.push(startAfter(snapshot)); 
      }
      if (!showDeleted) queryOptions.unshift(where("createdAt", "!=", null));
      const q = query(products, ...queryOptions, limit(PAGE_SIZE)); 
      const snapshot = await getDocs(q);
      const data: DocumentData[] = [];
      console.log(snapshot);
      snapshot.forEach(
        (
          doc 
        ) =>
          data.push({
            id: doc.id,
            ...doc.data(),
          })
      );
      return data;
    },

    product: async (parent, { id }) => {
      const snapshot = await getDoc(doc(db, "products", id));
      return {
        ...snapshot.data(),
        id: snapshot.id,
      };
    },
  },
 }

 

✏️ collection : firebase에서 만든 컬랙션 중 products 컬랙션을 가져옴

✏️ doc(), getDoc()

• doc() : 데이터베이스를 참조하며, 컬랙션 이름, 문서 ID를 인수로 사용
  • 따라서, cursor(페이지 끝 상품 ID)와 전달
• getDoc() : doc() 메서드에서 언급한 컬랙션 기반 참조에서 특정 문서의 데이터를 가져옴
  • promise를 반환하고 그 앞에 await 키워드 추가 

✏️ startAfter : 시작점을 제외한 데이터를 반환

✏️ 만약 삭제된 상품(!showDeleted)이라면 배열에서 where문 조건에 만족하는 데이터를 unshift.

• where("createdAt", "!=", null) : createdAt이 없는 데이터

✏️ query : 문서 ID를 기준으로 쿼리를 충족하는 모든 문서 검색 (오름차순)

• orderBy()를 사용하여 데이터의 정렬 순서를 지정할 수 있음
• limit()을 사용하여 검색되는 문서의 수를 제한할 수 있음

✏️ snapshot.forEach : 데이터 각각의 id와 값을 data 배열에 최종적으로 저장

 

2. Mutation

1) addProduct

• 클라이언트에서 보내온 데이터 정보들을 newProduct 객체에 저장.
• addDoc : Create기능은 addDoc 메서드를 사용.
  • addDoc("키를 통해 가져온 db", "payload")

addProduct: async (parent, { imageUrl, price, title, description }) => {
      const newProduct = {
        imageUrl,
        price,
        title,
        description,
        createdAt: serverTimestamp(),
      };

	// products 컬랙션에 newProduct 데이터 추가
      const result = await addDoc(collection(db, "products"), newProduct);
      const snapshot = await getDoc(result);
      return {
        ...snapshot.data(),
        id: snapshot.id,
      };
    },

2) updateProduct

• doc : 업데이트할 데이터를 doc 메서드를 통해 가져옴
• 만약 업데이트할 데이터가 존재하지 않는다면 에러 반환
• updateDoc: 두번째 값으로 기존에 있는 key값을 넣고 value를 넣으면 기존 값이 대체되고, 없는 key와 value를 넣으면 key, value가 추가.
  • data: 클라이언트에서 보낸 변경된 데이터 정보.

updateProduct: async (parent, { id, ...data }) => {
      const productRef = doc(db, "products", id);

      if (!productRef) throw new Error("상품이 없습니다.");

      await updateDoc(productRef, {
        ...data,
        createdAt: serverTimestamp(),
      });
      
      const snap = await getDoc(productRef);
      return {
        ...snap.data(),
        id: snap.id,
      };
    },

3) deleteProduct

• 삭제된 상품이라는 표시만 해주길 원했으므로, updateDoc을 통해 createdAt 값만 삭제시켜서 일반 상품과 삭제 상품을 구분

deleteProduct: async (parent, { id }) => {
      // 실제 db에서 delete를 하는 대신, createdAt을 지워준다.
      const productRef = doc(db, "products", id);
      if (!productRef) throw new Error("상품이 없습니다.");
      await updateDoc(productRef, { createdAt: null });
      return id;
    },

3️⃣ Cart 연동

1. query

const cartResolver: Resolver = {
  Query: {
    cart: async (parent, args) => {
      const cart = collection(db, "cart");
      const cartSnap = await getDocs(cart);
      const data: DocumentData[] = [];
      cartSnap.forEach((doc) => {
        const d = doc.data();
        data.push({
          id: doc.id,
          ...d,
        });
      });
      return data;
    },
  },
 }

 

2. Mutation

1) addCart

• 장바구니에 추가할 상품데이터를 불러오기
• cart 컬랙션에 추가한 상품데이터와 값이 같은 것이 있는지 판별
• 만약 같은 상품이 있다면?
  • amount: increment(1): 수량 1씩 증가 
• 만약 같은 상품이 없다면?
  • 수량 1로 저장, 해당 데이터 저장.

addCart: async (parent, { productId }) => {
      if (!productId) throw Error("상품id가 없다!");
      const productRef = doc(db, "products", productId);
      const cartCollection = collection(db, "cart");
      const exist = (
        await getDocs(query(cartCollection, where("product", "==", productRef)))
      ).docs[0];

      let cartRef;
      if (exist) {
        cartRef = doc(db, "cart", exist.id);
        await updateDoc(cartRef, {
          amount: increment(1),
        });
      } else {
        cartRef = await addDoc(cartCollection, {
          amount: 1,
          product: productRef,
        });
      }
      const cartSnapshot = await getDoc(cartRef);
      return {
        ...cartSnapshot.data(),
        product: productRef,
        id: cartSnapshot.id,
      };
    },

 

2) updateCart

• 클라이언트에서 변경된 amount값을 저장

updateCart: async (parent, { cartId, amount }) => {
      if (amount < 1) throw Error("1 이하로 바꿀 수 없습니다.");

      const cartRef = doc(db, "cart", cartId);

      if (!cartRef) throw Error("장바구니 정보가 없다!");

      await updateDoc(cartRef, {
        amount,
      });

      const cartSnapshot = await getDoc(cartRef);

      return {
        ...cartSnapshot.data(),
        id: cartSnapshot.id,
      };
    },

 

3) deleteCart

• deleteDoc에 컬랙션과 해당 데이터 ID를 넣기

   deleteCart: async (parent, { cartId }) => {
      const cartRef = doc(db, "cart", cartId);
      if (!cartRef) throw new Error("장바구니 정보가 없습니다");
      await deleteDoc(cartRef);
      return cartId;
    },

 

4) executePay

executePay: async (parent, { ids }) => {
      // createdAt이 비어있지 않은 ids들에 대해서 결제처리가 완료되었다고 가정하고
      // cart에서 이들의 ids를 지워준다.

      const deleted = [];

      for await (const id of ids) {
        const cartRef = doc(db, "cart", id);
        const cartSnapshot = await getDoc(cartRef);
        const cartData = cartSnapshot.data();
        const productRef = cartData?.product;
        if (!productRef) throw Error("상품정보가 없다.");

        const product = (await getDoc(productRef)).data() as Product;

        if (product.createdAt) {
          await deleteDoc(cartRef);
          deleted.push(id);
        }
      }

      return deleted;
    },

 

 

끝!! 다음은 배포다,, 근데 강의에서 다룬 heroku는 무료가 끝났다던데.. 다른 방법을 찾아봐야할 것 같다

두근두근..