Day 14: 새로운 기능들에 대한 리뷰와 문제 해결

오늘은 이번 주(2주차) 동안 추가한 기능들을 복습하고, 발생했던 문제를 해결하며 프로젝트를 다듬는 시간을 가지겠습니다. Day 8부터 Day 13까지 개발한 기능들을 점검하고, 개선하거나 최적화할 부분이 없는지 확인합니다.

---

1. 2주차 기능 복습

Day 8: 주문 폼 개선

• 추가된 기능: 주문 폼에 수량과 주문 메모 입력 필드 추가.
• 확인할 사항:
  • 사용자가 수량과 메모를 정상적으로 입력할 수 있는지 테스트.
  • 서버로 데이터가 정확히 전송되는지 확인.

Day 9: 주문 상태 설정

• 추가된 기능: 주문 상태 필드("대기 중", "승인됨", "완료됨") 추가.
• 확인할 사항:
  • 기본 상태가 "대기 중"으로 설정되는지 확인.
  • 주문 상태가 서버에서 정확히 저장되고 반환되는지 점검.

Day 10: 주문 상태 업데이트

• 추가된 기능: 주문 상태를 업데이트할 수 있는 API 엔드포인트 추가.
• 확인할 사항:
  • 특정 주문의 상태를 "승인됨" 또는 "완료됨"으로 업데이트할 수 있는지 확인.
  • 클라이언트에서 상태 업데이트 후, 변경된 상태가 목록에 즉시 반영되는지 테스트.

Day 11: 성공 메시지 표시

• 추가된 기능: 주문 성공 시 성공 메시지 화면 표시.
• 확인할 사항:
  • 주문이 성공적으로 전송되었을 때 메시지가 표시되는지 확인.
  • 성공 메시지 이후 폼이 초기화되고 새로운 주문이 가능하도록 동작하는지 점검.

Day 12: 오류 처리와 유효성 검사

• 추가된 기능: 클라이언트와 서버에서 입력 데이터에 대한 유효성 검사 추가.
• 확인할 사항:
  • 클라이언트에서 필드가 비어 있거나 수량이 0 이하인 경우 오류 메시지가 표시되는지 확인.
  • 서버에서 잘못된 데이터가 전송되었을 때 적절한 오류 메시지가 반환되는지 테스트.

Day 13: 스타일링

• 추가된 기능: Bootstrap을 사용해 UI 스타일 개선.
• 확인할 사항:
  • 주문 폼과 주문 목록이 모든 화면에서 보기 좋게 표시되는지 확인.
  • 오류 메시지와 성공 메시지가 시각적으로 잘 드러나는지 테스트.

---

2. 발생했던 문제 해결

이번 주 작업 중 발생했던 문제들을 다시 살펴보고 해결합니다. 다음은 자주 발생하는 문제와 해결 방안입니다.

문제 1: CORS 오류

• 원인: 클라이언트와 서버가 서로 다른 포트에서 실행되면서 CORS 정책에 의해 요청이 차단됨.
• 해결 방안: FastAPI에서 CORSMiddleware를 설정하여 Vue 클라이언트의 출처를 허용.

문제 2: 상태 업데이트가 즉시 반영되지 않음

• 원인: 클라이언트에서 상태 업데이트 후, 서버에서 변경된 데이터를 목록에 반영하지 않음.
• 해결 방안: updateStatus 메서드에서 상태가 업데이트된 주문 데이터를 기존 배열에 반영하도록 로직 수정.

문제 3: UI 스타일이 깨짐

• 원인: Bootstrap 클래스 적용이 누락되거나 다른 CSS와 충돌.
• 해결 방안: Bootstrap의 기본 클래스 확인 및 CSS 충돌 수정.

---

3. 최적화 및 개선 아이디어

• 에러 메시지 표시 최적화:
  • 클라이언트에서 필드별로 에러 메시지를 더 구체적으로 표시.
  • 서버에서 반환하는 오류 메시지를 클라이언트에 전달하여 통합된 피드백 제공.
• UI 반응형 디자인:
  • 모바일, 태블릿, 데스크톱 화면에서 모두 잘 작동하도록 추가적인 반응형 디자인 적용.
• UX 개선:
  • 주문 완료 후 사용자에게 상태 업데이트 버튼 대신, 새로고침 또는 새로운 주문 버튼 제공.
  • 서버 응답 시간에 따라 로딩 스피너 추가.

---

4. 팀원 또는 독자 피드백 반영

블로그 독자나 팀원들이 제공한 피드백을 정리하고, 프로젝트에 반영할 개선 사항을 확인합니다.

• 질문 예시:
  • "주문 상태를 추가로 세분화하면 어떤 이점이 있을까요?"
  • "UI를 더욱 간단하고 직관적으로 만들려면 어떤 방식이 좋을까요?"
• 피드백 반영:
  • 독자 피드백을 통해 발견된 오류 수정 및 추가 기능 요청 검토.

---

5. 주간 마무리

이번 주 작업을 통해 주문 시스템에 더 많은 기능을 추가하고, 사용자 경험을 크게 개선했습니다. 아래는 2주차 동안 학습한 주요 내용입니다.

주요 학습 내용

1. Vue와 FastAPI 간의 데이터 처리 및 상태 관리.
2. API 엔드포인트를 활용한 상태 업데이트 구현.
3. CSS 프레임워크를 활용한 UI 스타일링.
4. 클라이언트와 서버에서 유효성 검사 및 오류 처리.

다음 주 목표

• 데이터베이스 통합: 주문 데이터를 영구적으로 저장.
• 주문 기록 조회: 클라이언트에서 과거 주문 데이터를 확인.
• 고급 기능 추가: 관리자 인터페이스 개선.