Frontend 2

브라우저가 VOD 영상을 받아오는 방법 — CDN 구조, MP4 vs HLS, MSW 로컬 개발 환경까지

API를 호출했더니 응답은 수십 바이트인데 영상은 수백 MB가 들어오는 이유가 뭘까. 개발 환경과 운영 환경에서 영상 로딩 방식은 어떻게 다를까.VOD 기능을 개발하다 보면 이 구조를 정확히 이해해야 할 순간이 온다. 이 글에서는 그 구조를 처음부터 정리한다.📌 영상 서비스의 실제 구조실제 운영 환경에서 VOD를 서비스하는 방식은 단순하다. DB에 영상 파일 경로가 저장되어 있고, 백엔드 API가 그 경로를 조합해 CDN URL을 반환한다. 실제 영상 데이터는 브라우저가 CDN에서 직접 받아온다.단계 역할 전송량① Backend API콘텐츠 ID로 DB 조회 → CDN URL 반환. 영상 데이터와 무관JSON 수십 바이트② Playlist (.m3u8)HLS 방식일 경우 세그먼트 목록 텍스트 반환텍스트..

Frontend/Network 2026.04.02

엑셀 다운로드, 어떤 방식으로 구현해야 할까 — Client Export vs Server Download

운영 관리 화면을 개발하다 보면 어김없이 "엑셀 다운로드" 기능 요건이 들어온다. 단순히 "어디서 파일을 만드느냐"의 차이처럼 보이지만, 실제로는 어떤 데이터를 진짜 기준으로 삼느냐의 문제이기도 하다.구현 방법은 크게 세 가지로 나뉜다. 어떤 상황에서 어떤 방식을 골라야 하는지 정리한다.📌 세 가지 방식 한눈에 보기방식 파일 생성 위치 핵심 특징Client Export브라우저이미 내려온 데이터를 프론트에서 읽어 즉시 파일 생성. exceljs, SheetJS 등 활용Server Download서버요청 시 서버가 데이터를 다시 조회하고 파일을 생성해 응답으로 반환Hybrid서버화면의 정렬·컬럼 상태를 파라미터로 서버에 전달, 서버가 전체 데이터 기준으로 파일 생성📌 1. Client Export브라우저..