Day 20: 2주차 작업 복습 및 최적화

오늘은 이번 주(2주차) 동안 진행한 작업을 복습하고, 코드와 기능을 최적화하며, 남아 있는 문제를 해결하는 시간을 가집니다. Day 15부터 Day 19까지의 작업을 점검하고, 개선 가능한 부분을 찾아 정리합니다.

---

1. 2주차 주요 작업 복습

Day 15: 데이터베이스 설정 및 통합

• SQLite와 SQLAlchemy를 사용해 데이터베이스를 설정하고, 데이터를 영구적으로 저장하도록 구현.
• 복습 내용:
  • 데이터베이스 연결이 올바르게 설정되었는지 확인.
  • 주문 데이터가 데이터베이스에 정확히 저장되고 불러와지는지 테스트.

Day 16: 주문 상태 업데이트

• 추가된 기능: 주문 상태를 "대기 중", "승인됨", "완료됨"으로 업데이트할 수 있는 기능 구현.
• 복습 내용:
  • 상태 변경 API(/order/{order_id}/status)가 정상적으로 작동하는지 확인.
  • 클라이언트에서 상태 변경 후 데이터가 올바르게 반영되는지 테스트.

Day 17: 주문 기록 조회

• 추가된 기능: 특정 조건(예: 상태별)으로 주문 데이터를 필터링하는 기능 구현.
• 복습 내용:
  • /orders 엔드포인트에 필터 기능이 제대로 작동하는지 확인.
  • 클라이언트에서 상태 필터링 기능이 정상적으로 동작하는지 점검.

Day 18: 주문 상세보기

• 추가된 기능: 특정 주문의 세부 정보를 모달로 표시.
• 복습 내용:
  • 주문 세부 정보 API(/order/{order_id})가 올바르게 데이터를 반환하는지 확인.
  • 클라이언트에서 모달이 정확히 작동하고 필요한 정보가 표시되는지 테스트.

Day 19: 관리자 화면 개선

• 추가된 기능: 주문 목록을 테이블 형식으로 표시하고, 상태 필터링 및 정렬 기능 구현.
• 복습 내용:
  • 관리자 화면(/admin)의 UI가 깔끔하게 표시되는지 확인.
  • 상태 변경, 필터링, 정렬 기능이 정상적으로 작동하는지 테스트.

---

2. 발생한 문제 해결

2주차 작업 중 발견된 문제를 정리하고 해결합니다.

문제 1: 데이터베이스 동기화 문제

• 현상: 데이터베이스에 주문이 저장되지 않거나, 상태 업데이트가 반영되지 않는 문제.
• 원인: db.commit() 또는 db.refresh() 호출이 누락되었을 가능성.
• 해결 방법: 모든 데이터베이스 변경 작업 후 db.commit()과 db.refresh()를 호출해 변경 사항을 저장하고 동기화.

문제 2: 상태 업데이트 지연

• 현상: 클라이언트에서 상태 변경 후 UI가 즉시 업데이트되지 않음.
• 원인: 상태 변경 후 데이터 목록을 새로고침하지 않음.
• 해결 방법: fetchOrders() 메서드를 상태 업데이트 이후 호출하여 목록을 새로고침.

문제 3: 필터링과 정렬 동시 적용

• 현상: 필터링과 정렬을 동시에 사용할 때, 데이터가 제대로 표시되지 않음.
• 해결 방법: fetchOrders() 호출 후 sortOrders()를 다시 호출하여 정렬 결과를 반영.

---

3. 최적화 및 개선 사항

개선 아이디어 1: 로딩 상태 추가

• 현상: 데이터 로딩 중 사용자가 아무런 피드백을 받지 못함.
• 개선 방안:
  • Vue 컴포넌트에 isLoading 상태를 추가하고, 데이터 로딩 중 스피너를 표시.

개선 아이디어 2: 모달 UI 개선

• 현상: 주문 세부 정보 모달이 간단한 텍스트만 표시.
• 개선 방안:
  • 주문 데이터를 더 시각적으로 보기 좋게 정리.
  • 날짜/시간 형식을 추가하여 주문 시간을 표시.

개선 아이디어 3: 관리자 기능 확장

• 현상: 관리자 화면에서 대량 데이터를 관리하기 어려움.
• 개선 방안:
  • 페이지네이션 기능을 추가하여 많은 데이터를 쉽게 탐색.
  • 상태별 요약 데이터를 제공(예: 대기 중 주문 수, 승인된 주문 수 등).

---

4. 코드 개선

OrderList.vue – 로딩 상태 추가

vue

코드 복사

<template> <div class="container mt-5"> <h2 class="text-center mb-4">주문 목록</h2> <div v-if="isLoading" class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> <ul v-else class="list-group"> <li v-for="(order, index) in orders" :key="index" class="list-group-item d-flex justify-content-between align-items-center" > <div> <strong>{{ order.name }}</strong> - {{ order.item }} ({{ order.quantity }}) <p class="mb-0 text-muted">상태: {{ order.status }}</p> </div> <div> <button @click="updateStatus(order.id, '승인됨')" class="btn btn-success btn-sm me-2" > 승인 </button> <button @click="updateStatus(order.id, '완료됨')" class="btn btn-secondary btn-sm" > 완료 </button> </div> </li> </ul> </div> </template> <script> export default { data() { return { orders: [], isLoading: false, }; }, methods: { async fetchOrders() { this.isLoading = true; 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); } finally { this.isLoading = false; } }, }, async created() { this.fetchOrders(); }, }; </script>

---

5. 최종 점검

테스트 체크리스트

1. 클라이언트와 서버의 모든 엔드포인트가 정상적으로 작동하는지 확인.
2. 데이터베이스에서 주문 데이터가 올바르게 저장되고 업데이트되는지 확인.
3. 필터링, 정렬, 상태 업데이트 기능이 예상대로 작동하는지 점검.
4. 관리자 화면의 UI가 모든 화면 크기에서 적절히 표시되는지 확인.

---

오늘의 마무리

오늘은 2주차 작업을 복습하고, 문제를 해결하며, 코드와 기능을 최적화했습니다. 다음 주에는 UI 디자인 개선과 고급 기능 추가를 통해 프로젝트를 더욱 완성도 높게 발전시킬 예정입니다. 🚀