Day 0: 프로젝트 개요

이번 프로젝트에서는 고등학생들도 쉽게 따라 할 수 있도록 웹 주문 시스템을 만드는 과정을 21일 동안 다룹니다. 학생들은 프론트엔드(Vue.js)와 백엔드(FastAPI)를 분리하여 클라이언트-서버 구조의 웹 애플리케이션을 구축하는 경험을 할 수 있습니다. 이 프로젝트를 통해 학생들은 기본적인 웹 개발 지식뿐만 아니라, 데이터베이스와 API 사용법, 그리고 UI/UX 개선 방법까지 폭넓은 내용을 배울 수 있습니다.

1. 프로젝트 목표

• 웹 주문 시스템 구축: 손님이 클라이언트 페이지에서 주문을 하면 가게 주인이 서버에서 이를 확인하고 처리할 수 있는 시스템을 구축합니다.
• 기초 웹 개발 역량 강화: 프론트엔드(Vue.js)와 백엔드(FastAPI) 기본을 익히고, 이를 통합하는 방법을 배웁니다.
• 프로젝트 기반 학습: 실습을 통해 웹 애플리케이션 개발의 전체 과정을 경험합니다.

2. 사용 도구 및 기술

• 프론트엔드(Vue.js): 사용자 인터페이스와 클라이언트 측에서의 기능을 개발합니다.
• 백엔드(FastAPI): 서버와 API를 구축하여 클라이언트의 요청을 처리하고 데이터베이스에 데이터를 저장합니다.
• 데이터베이스(SQLite): 간단한 로컬 데이터베이스로 주문 데이터를 저장하고 관리합니다.

3. 프로젝트 구조

이 프로젝트는 4주 동안 주차별로 주제를 나누어 진행됩니다.

1. 1주차 - 기본 설정과 주문 시스템 기초: 개발 환경을 설정하고, 기본적인 주문 폼과 API를 만들어 프론트엔드와 백엔드를 연결하는 기초를 다집니다.
2. 2주차 - 기능 추가: 주문 상세 정보 추가, 주문 상태 설정 및 업데이트 등 기능을 확장하여 기본 시스템을 발전시킵니다.
3. 3주차 - 데이터 통합: SQLite를 사용하여 주문 데이터를 영구적으로 저장하고, 클라이언트와 서버에서 데이터를 처리하는 방법을 배웁니다.
4. 4주차 - UI/UX 개선: 반응형 디자인과 사용성 개선을 통해 보기 좋은 인터페이스를 완성합니다.

4. 기대 결과

이 프로젝트를 통해 학생들은 다음과 같은 결과를 얻을 수 있습니다.

• 기본 웹 애플리케이션 구축 역량: 클라이언트-서버 구조의 기초를 이해하고, 실제 웹 애플리케이션을 만드는 과정 경험.
• 개발 도구 사용 경험: Vue.js, FastAPI, SQLite와 같은 개발 도구의 기초 사용법을 배웁니다.
• 문제 해결 능력: 단계별 프로젝트 진행을 통해 각종 문제를 스스로 해결하는 방법을 익힙니다.

5. 블로그 시리즈 안내

21일 동안 매일 포스팅할 블로그의 주제는 각각의 프로젝트 단계와 관련된 내용으로 진행됩니다. 하루하루의 포스팅은 초보자들도 쉽게 따라 할 수 있도록 구성되며, 매주 마지막 날에는 해당 주차의 내용을 복습하고 자주 발생하는 문제에 대한 해결 방법을 공유합니다.

이제 Day 1에서 첫 환경 설정과 Vue.js 초기화를 시작해봅시다!