21일오블완챌린지를 하기 위한 vue.js 와 fastapi로 만드는 웹 주문 시스템 개발 시작

Day 0: 프로젝트 개요

• 프로젝트 목표, 사용할 도구들 (Vue.js, FastAPI), 그리고 시리즈의 구성 소개.

1주차: 기본 주문 시스템 설정

• Day 1: 개발 환경 설정과 Vue.js 초기화 (npm create vue@latest 사용).
• Day 2: Vue 컴포넌트 기초 – 간단한 주문 폼 생성.
• Day 3: Vue 라우팅 기초 설정으로 페이지 간 네비게이션 구현.
• Day 4: FastAPI 서버 설정 – 기본 API 엔드포인트 만들기.
• Day 5: Vue와 FastAPI 연결 – 주문 데이터를 서버로 전송하기.
• Day 6: 서버에 간단하게 주문 데이터를 임시 저장 (메모리 저장).
• Day 7: 1주차 리뷰와 문제 해결하기.

2주차: 기능 추가

• Day 8: 주문 폼 개선 – 수량, 주문 메모 등 추가 입력 항목 추가.
• Day 9: 서버에서 주문 상태 설정 (예: 대기 중, 승인됨, 완료됨).
• Day 10: 주문 상태 업데이트를 위한 API 엔드포인트 추가.
• Day 11: 클라이언트 측 주문 확인과 간단한 성공 메시지 표시.
• Day 12: 기본 오류 처리와 유효성 검사 추가.
• Day 13: CSS 또는 CSS 프레임워크를 사용한 기본 스타일링.
• Day 14: 새로운 기능들에 대한 리뷰와 문제 해결.

3주차: 데이터 통합

• Day 15: 데이터베이스 기초 – FastAPI와 SQLite 데이터베이스 설정.
• Day 16: FastAPI에서 주문 데이터를 SQLite에 저장하도록 수정.
• Day 17: 주문 상태를 데이터베이스에서 업데이트하기.
• Day 18: 클라이언트 측에서 주문 기록을 불러와 표시하기.
• Day 19: 가게 주인을 위한 관리자 화면 추가하여 주문 모니터링.
• Day 20: 데이터 통합에 대한 리뷰와 문제 해결.

4주차: UI/UX 개선

• Day 21: 최종 마무리 – 반응형 디자인과 사용성 개선 추가.