Bulk Query 도입을 통한 API 응답 속도 90% 개선 및 Vanilla JS 기반 SPA 구현

# I Built a Full Stack Academic Management System for My College — Here's How

Suman Kumar Singh2026년 6월 15일5분intermediate

AI 요약

Context

수동 행정 처리로 인한 비효율을 해결하고자 학생, 교수, 관리자를 위한 통합 학사 관리 시스템을 설계함. 초기 설계 시 개별 API 호출 방식의 비효율적 데이터 요청으로 인해 대규모 데이터 로드 시 심각한 Latency 발생.

46개 개별 API 호출을 단일 Bulk Endpoint로 통합하여 MongoDB $in 연산자를 통한 일괄 조회 구조로 변경
Framework 없이 Vanilla JavaScript의 DOM 조작과 CSS Class 제어를 통한 Single Page Application(SPA) 인터페이스 구현
Media Query를 활용하여 Table 레이아웃을 Card 형태로 전환하는 Responsive UI 전략 채택
Role-based Access Control(RBAC) Middleware를 구축하여 JWT 기반의 사용자 권한 및 승인 상태 검증 로직 적용
Mongoose ODM을 통한 User, Data, Notice 컬렉션 간의 정규화된 데이터 모델 설계

실천 포인트

클라이언트-서버 간 N+1 Query 문제 발생 시 Bulk API 도입을 통해 Network Round-trip 시간을 최소화할 것

태그