개요
- 브라우저에서 직접 URL로 JS 모듈 불러오기 학습하면서 esm.sh 서버에서 모듈 다운로드 받는 과정에서 궁금증이 생겼다. CDN서버는 무슨돈으로 운영되고, 왜 있는걸까?
CDN 이란?
CDN = Content Delivery Network (콘텐츠 전송 네트워크)
→ 전 세계에 퍼져 있는 서버 네트워크에서 정적 파일(JS, CSS, 이미지 등)을 빠르게 전송해주는 서비스다.
📦 예:
esm.sh - ESM(ES Module) 방식으로 npm 패키지를 브라우저에 제공
unpkg.com - npm에 올라온 모든 패키지를 JS 파일 형태로 서빙
jsdelivr.com - CDN + 캐싱 기능 (Cloudflare, Fastly 등 기반)
CDN의 동작
import _ from "https://esm.sh/lodash@4.17.21"- 이 URL을 브라우저가 호출하면
- esm.sh는 npm에서 lodash 패키지를 받아
- ESM 모듈 형태로 변환하고
4.js 파일로 브라우저에 전송한다.
즉, 파일 내려주는 "자동 번들링 & 캐싱 서버" 인 것 이다.
CDN의 목적
- 웹 사이트(서버)와 사용자(클라이언트) 간의 통신 트래픽은 아주 먼 물리적 거리를 이동해야 하는데,
- CDN은 클라이언트와 웹 사이트 서버 간에 중간 서버를 두어 효율성을 높인다.
CDN의 장점
- 빠른 응답속도
사용자와 가까운 서버에서 콘텐츠를 제공하므로 로드 속도 향상 - 서버 부담 감소
원 서버(origin)의 부하를 CDN이 대신 분산 - 글로벌 접근성 향상
해외 유저도 빠르게 웹사이트 접속 가능 - 신뢰성과 안정성 증가
트래픽 폭증 시에도 CDN이 버팀 - 캐싱 효과
자주 쓰이는 JS 라이브러리나 이미지 파일은 브라우저가 이미 캐시했을 수 있음 (속도 극대화) - 설치 없이 즉시 사용
esm.sh 같은 경우, npm 설치 없이도 JS 모듈을 import해서 사용 가능 (실험/학습에 좋음)
CDN의 단점
-
CDN은 패키지 전체 구조를 통제하기 어려움
→ ESM-only, CommonJS 충돌 문제 -
중첩 의존성(sub-dependencies) 관리 어려움
→ lodash만 가져와도 의존성 직접 import해야 할 수 있음 -
VSCode / TypeScript 지원 미흡
→ 자동완성, 타입 추론, 오류 인식 약함
CDN과 비교한 npm i 의 장점
-
오프라인 개발 가능
– 한 번 설치하면 인터넷 없이도 작업 가능 -
도구와 잘 통합됨
– TypeScript, ESLint, Vite 등은 node_modules 기준으로 동작
– 타입도 자동으로 인식됨 (@types) -
배포가 더 안정적임
– 모든 의존성이 번들에 포함돼서 CDN 장애와 무관 -
최적화 용이
– 번들러가 필요 없는 코드를 제거해주니까 성능이 더 좋아짐 -
테스트/배포 자동화에 강함
– npm install 한 번으로 모든 환경 복제 가능 (CI/CD에 적합)
출처
프론트엔드개발자인디