JavaScript 오픈소스 CDN jsDelivr(JS 배달) 사용 방법
CDN(Content Delivery Network, 콘텐츠 전송 네트워크)을 사용하는 이유는?
- 자신이 운영하고 있는 서버의 부하를 CDN 서버로 분산할 수 있다.
- CDN은 전 세계에 여러 개의 캐시 서버로 구성되어 있어 하나의 서버가 다운되더라도 문제없다.
- 클라이언트의 지역에서 가장 가까운 CDN 서버가 요청에 응답하므로 해당 콘텐츠가 보다 빠르게 전송된다.
※굳이 CDN을 사용하지 않아도 되는 경우가 있습니다. 개별적인 상황을 고려해 올바르게 CDN을 사용합니다.
오픈소스 CDN으로 jsDelivr(제이에스 딜리버리, JS 배달)을 사용해 보도록 하겠습니다. 무료이며 빠른 속도와 자동화로 인한 편리함으로 사용하고 있습니다. npm, GitHub, WordPress의 오픈소스를 대상으로 CDN을 제공하는데 제가 앞으로 다룰 내용은 npm와 GitHub입니다. WordPress는 아직 사용해 본 경험이 없어서 제외합니다.
CDN 적용 전 HTML 파일
현재의 날짜와 시간을 표시하는 HTML 파일이고 CDN 사용 방법을 보여드리기 위한 심플한 코드로 작성하였습니다. 앞으로 JavaScript 부분을 CDN으로부터 받아서 페이지를 렌더링하는 방식으로 바꿔 볼 것입니다.
[CDN 적용 전]
[실행 결과]
현재의 날짜와 시간은?
1. npm CDN 사용 방법
우선 사용하고자 하는 JavaScript 파일이 npm에 등록되어 있어야 합니다.
제가 사전에 테스트용으로 npm에 등록한 패키지입니다.
[npm CDN 사용에 필요한 정보]
패키지명: blogger-sua
버전: 1.0.2
사용하려는 파일명: current-date.js
※최상위 폴더에 위치하지 않을 경우, 파일명에 경로를 포함시킨다.
jsDelivr의 npm CDN을 사용하기 위한 URL 구조는 아래와 같고
https://cdn.jsdelivr.net/npm/패키지명@버전/파일명
적용해 보면 이렇게 ↓↓↓
작성한 URL을 사용하기만 하면 됩니다. 아래의 소스 코드를 참고하세요.
[npm CDN 적용 후]
※실행 결과는 CDN 적용 전과 같습니다.
2. GitHub CDN 사용 방법
우선 이용하고자 하는 JavaScript 파일이 GitHub에 등록되어 있어야 합니다.
제가 미리 테스트용으로 GitHub에 올린 JavaScript 파일 주소입니다.
GitHub에서의 raw(가공되지 않은) 파일 주소입니다.
[GitHub CDN 사용에 필요한 정보]
사용자명: gpe-joshua
리포지토리명: blogger
버전: master
사용하려는 파일명: current-date.js
※파일이 최상위 폴더에 있지 않을 경우에는 파일명에 경로도 넣는다.
jsDelivr의 GitHub CDN을 사용하기 위한 URL 구조는 아래와 같고
https://cdn.jsdelivr.net/gh/사용자명/리포지토리명@버전/파일명
적용해 보면 이렇게 ↓↓↓
작성한 URL을 사용하기만 하면 됩니다. 아래의 소스 코드를 참고하세요.
[GitHub CDN 적용 후]
※실행 결과는 CDN 적용 전과 같습니다.
※여러 파일을 결합할 수도 있다고 합니다. 자세한 내용은 Combine multiple files를 살펴보세요.
댓글
댓글 쓰기