Web · 웹 개발 기초
대시보드에서 2026년을 선택하면 숫자 카드와 차트가 바뀝니다. 이처럼 브라우저 안에서 끝나는 일은 **프론트엔드(FE)**가 처리합니다. 검토 메모를 저장해 다른 PC에서도 보려면 화면이 **백엔드(BE)**에 요청하고, 백엔드가 데이터베이스에 기록해야 합니다.
flowchart TB A["사용자: 저장 클릭"] --> B["FE: 메모 입력 확인"] B --> C["API 요청: 메모를 저장해 줘"] C --> D["BE: 권한·내용 확인"] D --> E["데이터베이스: 기록"] E --> F["응답: 저장 성공 또는 오류"] F --> B class F output
| 궁금한 것 | 읽을 곳 |
|---|---|
| HTML·CSS·GitHub 같은 말의 뜻 | 핵심 용어 |
| 버튼, 필터, 표, 오류 문구는 어디서 바뀌나 | FE · 프론트엔드 |
| 로그인, 계산 기준, 저장은 누가 처리하나 | BE · 백엔드 |
| 메모를 브라우저와 서버에 각각 저장해 보기 | 저장과 API 실습 |
대시보드 실습의 index.html은 데이터를 파일에 담은 정적 화면입니다. GitHub Pages는 이 파일을 게시하지만 Python 서버나 데이터베이스를 실행하지 않습니다. 그래서 공개 대시보드의 필터는 작동해도, 여러 사람이 공유하는 메모 저장 기능은 별도 서버가 필요합니다.