🚀 Start

이제 데이터베이스에 실제 데이터를 넣고, 서버에서 데이터를 잘 불러오는지 확인하자.

✅ 우선, JSON 데이터를 저장하여, 정상적인 데이터 전송이 이루어지는지 보자.

JSON은 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환형식으로, 자바스크립트 객체의 형식을 기반으로 만들어졌다.

MySQL과 같은 데이터베이스에서도 JSON 형태로 데이터가 저장되므로, 이번 기회에 순수하게 JSON DB를 형성하여 데이터를 어떻게 꺼내 쓰고, 업데이트하는지 알아보자.

참고하자!
👉 [JSON] JSON 이란 무엇인가? 간단 정리 및 예제를 통한 사용 방법
👉 JSON 기초
👉 거의 모든 SW 개발의 필수⋯JSON 데이터 포맷의 이해

📡 DB Controller

✅ JSON 데이터베이스의 어떤 데이터를, 어떻게 처리할 것인지, 컨트롤러가 필요

• readDB : 데이터를 조회할 경우 해당 함수 실행

  • JSON.parse: JSON 문자열을 JS객체로 변환(참고)

  • fs.readFileSync: 경로에 따른 동기파일로부터 데이터를 읽어올 수 있다.
    단, utf8로 명시하여 인코딩이 되도록해줘야한다.(참고)

• writeDB : 데이터를 수정할 경우 해당 함수 실행

  • JSON.stringfy: JS객체를 JSON 문자열로 변환

  • fs.writeFileSync: 경로에 따른 동기파일에 데이터를 쓸 수 있다.

// src/dbController.ts
import fs from "fs";
import { resolve } from "path";

export enum DBField {
  CART = "cart",
  PRODUCTS = "products",
}

const basePath = resolve(); // __dirname

const filenames = {
  [DBField.CART]: resolve(basePath, "src/db/cart.json"),
  [DBField.PRODUCTS]: resolve(basePath, "src/db/products.json"),
};

export const readDB = (target: DBField) => {
  try {
    return JSON.parse(fs.readFileSync(filenames[target], "utf-8"));
  } catch (err) {
    console.log(err);
  }
};

export const writeDB = (target: DBField, data: any) => {
  try {
    fs.writeFileSync(filenames[target], JSON.stringify(data));
  } catch (err) {
    console.log(err);
  }
};

✅ readDB Setting

// src/ index.ts
const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    context: {
      db: {
        products: readDB(DBField.PRODUCTS),
        cart: readDB(DBField.CART),
      },
    },
  });

✅ readDB Setting

// src/resolvers/cart.ts
const setJSON = (data: Cart) => writeDB(DBField.CART, data);

👕 Product

✔️ JSON DB

✅ src에 db 폴더를 생성하고, mocking Data를 갖고와 JSON형식으로 직접 데이터를 저장.

// src/db/products.json
[
  {
    "id": "1",
    "imageUrl": "http://placeimg.com/640/480/1",
    "price": 50000,
    "title": "임시상품-1",
    "description": "임시상세내용-1"
  },
  {
    "id": "2",
    "imageUrl": "http://placeimg.com/640/480/2",
    "price": 50000,
    "title": "임시상품-2",
    "description": "임시상세내용-2"
  },
  {
    "id": "3",
    "imageUrl": "http://placeimg.com/640/480/3",
    "price": 50000,
    "title": "임시상품-3",
    "description": "임시상세내용-3"
  },
  ...
]

✔️ Query

그럼 이제 JSON DB에 있는 상품들을 조회해보자.

✅ Products

// src/resolvers/products.ts
const productResolver: Resolver = {
  Query: {
    products: async (parent, args, { db }, info) => {
      return db.products;
    },
    ...
    },
  },
};

💡 Product JSON DB에 존재하는 20개의 상품 데이터 조회

✅ Product

// src/resolvers/products.ts
const productResolver: Resolver = {
  Query: {
     ...
     product: async (parent, { id }, { db }) => {
      const found = db.products.find((item) => item.id === id);
      if (found) return found;
      return null;
    },
    },
  },
};

💡 Product JSON DB에 존재하는 id가 2인 상품을 조회

✔️ Mutation

🛒 Cart

✔️ JSON DB

✅ src에 db 폴더를 생성하고, mocking Data를 갖고와 JSON형식으로 직접 데이터를 저장.

• 장바구니에 2개의 상품이 있는 것을 가정으로 데이터 자장.

// src/db/cart.json
[
  { "id": "1", "amount": 1 },
  { "id": "2", "amount": 1 }
]

✔️ Query

그럼 이제 JSON DB에 있는 장바구니에 존재하는 상품들을 조회해보자.

// src/resolvers/products.ts
const cartResolver: Resolver = {
  Query: {
    cart: async (parent, args, { db }, info) => {
      return db.cart;
    },
  },
  ...
}

💡 Cart JSON DB에 존재하는 장바구니 상품 데이터 조회

✔️ Mutation

✅ 장바구니 데이터를 업데이트해보자.

• 장바구니에 상품을 추가 (add)
• 장바구니의 상품 수량 수정 (update)
• 장바구니에서 상품 삭제 (delete)
• 장바구니의 상품 결제하기 (execute)

👉 Add

// src/resolvers/cart.ts
const cartResolver: Resolver = {
  Mutation: {
     addCart: (parent, { id }, { db }, info) => {
      if (!id) throw Error("상품id가 없습니다");
      const targetProduct = db.products.find((item) => item.id === id);
      if (!targetProduct) throw new Error("상품이 없습니다");

      const existCartIndex = db.cart.findIndex((item) => item.id === id);
      if (existCartIndex > -1) {
        const newCartItem = {
          id,
          amount: db.cart[existCartIndex].amount + 1,
        };
        db.cart.splice(existCartIndex, 1, newCartItem);
        setJSON(db.cart);
        return newCartItem;
      }
      const newItem = {
        id,
        amount: 1,
      };
      db.cart.push(newItem);
      setJSON(db.cart);
      return newItem;
    },
  },
  CartItem: {
    product: (cartItem, args, { db }) =>
      db.products.find((product) => product.id === cartItem.id),
  },
};

💡 Cart JSON DB에 존재하는 장바구니 상품 데이터 조회

💡 cart.json에 id가 3인 상품이 추가된 것을 확인!

👉 Update

// src/resolvers/cart.ts
const cartResolver: Resolver = {
  Mutation: {
     updateCart: async (parent, { id, amount }, { db }) => {
      const existCartIndex = db.cart.findIndex((item) => item.id === id);
      if (existCartIndex < 0) {
        throw new Error("상품이 없습니다");
      }
      const newCartItem = {
        id,
        amount,
      };
      db.cart.splice(existCartIndex, 1, newCartItem);
      setJSON(db.cart);
      return newCartItem;
    },
  CartItem: {
    product: (cartItem, args, { db }) =>
      db.products.find((product) => product.id === cartItem.id),
  },
};

💡 Cart JSON DB에 존재하는 id가 3인 상품의 amount를 5로 수정

💡 cart.json에 id가 3인 상품의 수량이 5가 된 것을 확인!

👉 Delete

// src/resolvers/cart.ts
const cartResolver: Resolver = {
  Mutation: {
     deleteCart: async (parent, { id }, { db }) => {
      const existCartIndex = db.cart.findIndex((item) => item.id === id);
      if (existCartIndex < 0) {
        throw new Error("상품이 없습니다");
      }
      db.cart.splice(existCartIndex, 1);
      setJSON(db.cart);
      return id;
    },
  CartItem: {
    product: (cartItem, args, { db }) =>
      db.products.find((product) => product.id === cartItem.id),
  },
};

💡 Cart JSON DB에 존재하는 id가 3인 상품을 삭제

💡 cart.json에 id가 3인 상품 삭제 확인!

👉 Execute

// src/resolvers/cart.ts
const cartResolver: Resolver = {
  Mutation: {
   executePay: (parent, { ids }, { db }) => {
      const newCartData = db.cart.filter((cartItem) => {
        !ids.includes(cartItem.id);
      });
      db.cart = newCartData;
      setJSON(db.cart);
      return ids;
    },
  CartItem: {
    product: (cartItem, args, { db }) =>
      db.products.find((product) => product.id === cartItem.id),
  },
};

💡 Cart JSON DB에 존재하는 id가 2인 상품을 결제

🖥 Client to DB

이제 클라이언트에서 DB의 데이터를 받아오는 것을 구현해야 한다.
지금까지는 서버와 API가 생성되기 이전에 MSW를 통해 모의 통신을 하며 데이터 패칭을 하였다.

✅ 이제는 앞서 만든 JSON DB의 데이터를 가져와 출력해보자.

• 이미 서버와의 통신은 MSW를 통해 모의 통신을 해놓은 상태이기 때문에, 가짜 데이터들을 불러오는 URL이 아닌, 서버 URL을 Base Url로 설정하여 JSON DB의 데이터들을 불러온다.

// gueryClient.ts

//변경 전
const BASE_URL = "https://fakestoreapi.com"

// 변경 후
const BASE_URL = "http://localhost:8000";

💡 CORS Error

한가지 주의할 점은 Vite 3.0에서 로컬호스트가 5173으로 잡히기 때문에, Server에서 cors origin 설정을 3000번이 아닌 5173으로 해주어야 한다!

✅ 실제 데이터를 불러오고, 장바구니의 데이터를 직접 수정하니, JSON DB에서도 실시간으로 변경되는 것을 확인할 수 있다.