Vue 웹 프로그램 완성
사원관리 웹 프로그램의 전체 구조를 완성합니다.
이번 장에서는 지금까지 배운 Vue 기능을 하나의 프로그램으로 통합합니다.
최종 프로젝트는 사원관리 웹 프로그램입니다.
이전 장까지는 Vue Router, Axios, REST API, CRUD 같은 기능을 각각 나누어 학습했습니다. 이제는 이 기능들을 하나로 연결하여 실제 웹 프로그램이 동작하는 전체 구조를 이해합니다.
사용자가 브라우저에서 Vue 화면을 사용하면 Vue는 REST API를 통해 FastAPI와 통신하고, FastAPI는 SQLite에 데이터를 저장하거나 조회합니다.
| 구분 | 역할 |
|---|---|
| Vue | 화면 구성 |
| Vue Router | 화면 이동 |
| Axios | 서버 통신 |
| FastAPI | REST API 서버 |
| SQLite | 데이터 저장 |
사용자가 보는 화면을 구성합니다. 사원 목록, 등록 폼, 상세 화면, 수정 화면 등이 Vue에서 만들어집니다.
URL에 따라 어떤 Vue 화면을 보여줄지 결정합니다. 사원 목록, 등록, 상세, 수정 화면 사이의 이동을 담당합니다.
Vue에서 FastAPI로 HTTP 요청을 보내고 서버가 반환한 JSON 데이터를 받아오는 역할을 합니다.
Vue에서 전달받은 요청을 처리하는 REST API 서버입니다. 사원 조회, 등록, 수정, 삭제와 같은 기능을 처리합니다.
사원 데이터를 실제로 저장하는 데이터베이스입니다. 프로그램이나 서버가 다시 실행되어도 데이터를 유지할 수 있습니다.
↓
Vue 화면
↓
Axios
↓
REST API 요청
↓
FastAPI
↓
SQLite
↓
JSON 응답
↓
Vue 화면 갱신
Vue가 SQLite에 직접 접근하는 것이 아닙니다. Vue는 FastAPI에 요청하고, FastAPI가 SQLite 데이터를 조회하거나 변경합니다.
SQLite에 저장된 사원 데이터를 FastAPI가 조회하고, Vue가 전달받은 데이터를 목록 형태로 화면에 출력합니다.
사용자가 Vue 입력 화면에서 사원 정보를 입력하면 Axios를 통해 FastAPI로 전달되고, FastAPI가 SQLite에 새로운 사원을 저장합니다.
사원번호를 이용해 특정 사원의 정보를 조회하고 상세 화면에 표시합니다.
기존 사원 정보를 가져와 입력 화면에 표시하고, 수정된 값을 다시 FastAPI로 보내 SQLite 데이터를 변경합니다.
선택한 사원의 번호를 FastAPI로 전달하여 SQLite에서 해당 데이터를 삭제합니다.
- 최종 프로젝트는 사원관리 웹 프로그램입니다.
- 전체 구조는 Browser → Vue → FastAPI → SQLite로 연결됩니다.
- Vue는 사용자가 보는 화면을 담당합니다.
- Vue Router는 목록, 등록, 상세, 수정 화면의 이동을 담당합니다.
- Axios는 Vue와 FastAPI 사이의 서버 통신을 담당합니다.
- FastAPI는 REST API 요청을 처리합니다.
- SQLite는 실제 사원 데이터를 저장합니다.
- 최종 프로그램에서는 사원목록, 사원등록, 사원상세, 사원수정, 사원삭제 기능을 구현합니다.
- 가장 중요한 전체 흐름은 Vue → Axios → REST API → FastAPI → SQLite → JSON → Vue 화면입니다.