Day 5: Vue와 FastAPI 연결 테스트 및 서버에서 임시로 데이터 저장하기

오늘은 Vue 클라이언트와 FastAPI 서버 간의 데이터 전송을 확인하고, 서버에서 데이터를 임시로 저장하는 방법을 알아보겠습니다. 서버가 주문 데이터를 수신하면, 이를 메모리에 임시로 저장하여 주문 목록을 관리하도록 설정할 것입니다. 이 과정은 데이터베이스를 사용하기 전의 간단한 구현 방식입니다.

1. 주문 데이터 임시 저장을 위한 서버 코드 수정

FastAPI 서버에서 주문을 임시로 저장할 수 있도록 main.py 파일을 수정합니다. 여기서는 주문 데이터를 메모리(서버의 변수)에 저장하므로, 서버가 재시작되면 데이터가 사라집니다.

1. main.py 파일을 열고, 주문 데이터를 저장할 리스트를 추가합니다.
   • orders 리스트: 서버 메모리 내에 주문 데이터를 임시로 저장하는 리스트입니다.
   • create_order 엔드포인트: 클라이언트에서 받은 주문 데이터를 orders 리스트에 추가합니다.
   • get_orders 엔드포인트: 현재까지 저장된 모든 주문 데이터를 반환합니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from typing import List

app = FastAPI()

# CORS 설정
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],  # Vue.js가 실행 중인 포트
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 주문 데이터 구조 정의
class Order(BaseModel):
    name: str
    item: str
    quantity: int

# 임시로 주문을 저장할 리스트
orders: List[Order] = []

# 주문 접수 엔드포인트
@app.post("/order")
async def create_order(order: Order):
    orders.append(order)  # 주문 데이터를 리스트에 저장
    return {"message": "Order received", "order": order}

# 모든 주문 조회 엔드포인트
@app.get("/orders")
async def get_orders():
    return {"orders": orders}

2. 서버 테스트하기

1. FastAPI 서버가 실행 중인지 확인하고, http://127.0.0.1:8000/docs에 접속하여 API 문서를 확인합니다.
2. /order 엔드포인트에 주문 데이터를 POST 방식으로 전송하면 orders 리스트에 데이터가 저장됩니다.
3. /orders 엔드포인트를 GET 방식으로 호출하여 현재 저장된 주문 데이터를 확인할 수 있습니다.

3. 클라이언트에서 주문 목록 불러오기 (옵션)

Vue 클라이언트에서도 주문 목록을 불러올 수 있도록 코드를 수정해 보겠습니다. 이 작업은 주문 목록을 관리자 또는 가게 주인이 확인할 수 있는 기능을 만들기 위한 기초 작업입니다.

1. OrderList.vue 컴포넌트 생성

   <template>
     <div class="order-list">
       <h2>주문 목록</h2>
       <ul>
         <li v-for="(order, index) in orders" :key="index">
           {{ order.name }} - {{ order.item }} (수량: {{ order.quantity }})
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   export default {
     name: "OrderList",
     data() {
       return {
         orders: [],
       };
     },
     async created() {
       try {
         const response = await fetch("http://127.0.0.1:8000/orders");
         const data = await response.json();
         this.orders = data.orders;
       } catch (error) {
         console.error("주문 목록을 불러오는 중 오류가 발생했습니다:", error);
       }
     },
   };
   </script>
   
   <style scoped>
   .order-list {
     max-width: 400px;
     margin: 20px auto;
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 5px;
   }
   </style>

   • created() 라이프사이클 훅: 컴포넌트가 생성될 때 서버의 /orders 엔드포인트에서 데이터를 불러와 orders 배열에 저장합니다.
   • v-for 디렉티브: 불러온 주문 데이터를 리스트로 출력합니다.
2. src/components 폴더에 OrderList.vue 파일을 만들고, 현재까지의 주문 목록을 서버에서 불러와 표시하는 기능을 추가합니다.

 

OrderList.vue 컴포넌트를 App.vue에 추가하여 주문 목록을 볼 수 있도록 설정합니다.

1. App.vue에 컴포넌트 추가하기
    
   이제 Vue 앱에서 주문 폼과 주문 목록이 동시에 표시됩니다.
2. src/App.vue 파일을 열고, OrderList 컴포넌트를 불러와 사용할 수 있도록 설정합니다.

<template>
  <div id="app">
    <h1>웹 주문 시스템</h1>
    <router-view />
    <OrderList />
  </div>
</template>

<script>
import OrderList from "./components/OrderList.vue";

export default {
  name: "App",
  components: {
    OrderList,
  },
};
</script>

1. 라우팅 설정 (옵션)
    
   이렇게 하면 /orders 경로로 이동하여 현재까지 저장된 주문 목록을 볼 수 있습니다.
2. 주문 목록을 별도의 페이지로 이동하고 싶다면 OrderList.vue에 라우트를 추가하여 네비게이션을 할 수 있습니다. 예를 들어, OrderList를 /orders 경로로 표시하도록 src/router/index.js 파일을 수정합니다.

import { createRouter, createWebHistory } from "vue-router";
import OrderForm from "../components/OrderForm.vue";
import OrderConfirmation from "../components/OrderConfirmation.vue";
import OrderList from "../components/OrderList.vue";

const routes = [
  {
    path: "/",
    name: "OrderForm",
    component: OrderForm,
  },
  {
    path: "/confirmation",
    name: "OrderConfirmation",
    component: OrderConfirmation,
  },
  {
    path: "/orders",
    name: "OrderList",
    component: OrderList,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

4. 전체 흐름 테스트하기

1. Vue 앱(npm run dev)과 FastAPI 서버(uvicorn main:app --reload)가 모두 실행 중인지 확인합니다.
2. Vue 앱에서 주문을 제출한 후, /orders 페이지로 이동하여 주문이 정상적으로 표시되는지 확인해 보세요.

5. 오늘의 마무리

오늘은 FastAPI 서버에서 주문 데이터를 임시로 저장하고, Vue 클라이언트에서 이를 조회하는 방법을 배웠습니다. 지금은 메모리에 데이터를 저장하고 있으므로, 서버를 재시작하면 데이터가 사라지지만, 다음 주에는 데이터베이스를 사용하여 데이터를 영구적으로 저장하는 방법을 배울 것입니다.

문제가 발생했다면 오류 메시지를 확인하고 필요한 부분을 수정해 주세요!