피드로 돌아가기
Dev.toBackend
원문 읽기
Fetch API와 Flask 기반의 Non-refresh Dynamic CRUD 아키텍처 구현
Simple pero poderoso: CRUD dinámico con Flask, Javascript y Fetch API.
AI 요약
Context
전통적인 Server-side Rendering 방식의 페이지 전체 리프레시로 인한 사용자 경험 저하 및 리소스 낭비 문제 분석. 복잡한 프레임워크 도입 없이 표준 Web API를 통해 클라이언트 측 부분 갱신을 달성하려는 요구사항 반영.
Technical Solution
- Fetch API를 통한 비동기 HTTP Request 구현으로 페이지 전체 리로드 없는 데이터 교환 구조 설계
- Flask Backend에서 JSON 응답 규격을 정의하여 Frontend의 DOM 조작 효율성 극대화
- Raw SQL Query 기반의 데이터 추출 로직을 통해 ORM 오버헤드 제거 및 쿼리 실행 성능 최적화
- Jinja2 템플릿과 JavaScript Dynamic Rendering을 결합하여 초기 렌더링과 동적 업데이트의 역할 분리
- DML 이벤트 발생 시 동일한 데이터 로드 함수를 재사용하는 모듈형 프론트엔드 로직 구성
- Client-side에서 JSON 데이터를 HTML Table Row로 변환하는 매핑 함수 구현을 통한 상태 동기화
실천 포인트
1. 페이지 전체 리프레시가 필요 없는 단순 CRUD 기능 구현 시 무거운 프레임워크 대신 Fetch API 검토
2. Backend 응답 시 일관된 JSON Status Code(resp: 0/1) 정의를 통한 에러 핸들링 표준화
3. 데이터 정합성을 위해 서버 사이드에서 Raw SQL을 통한 명확한 컬럼 매핑 및 DTO 변환 적용