◆ CDN(Content Delivery Network) 정의
- 웹 콘텐츠를 빠르게 전송하기 위해 사용되는 분산 네트워크입니다.
◆ JavaScript에서 CDN(Content Delivery Network)을 사용하는 방법
1. HTML 문서에서 CDN 주소를 추가하는 방법
1) 원하는 라이브러리나 프레임워크의 공식 사이트에서 CDN 주소를 가져옵니다.
2) HTML 문서에서 CDN 주소를 추가합니다.
- HTML 문서에서
<script>태그를 사용하여 CDN 주소를 추가합니다. <head>태그 안에서 사용하는 경우가 일반적입니다.- 예를 들어 jQuery를 사용하고자 한다면, 다음과 같이 추가할 수 있습니다.
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>2. CDN 파일을 생성하는 방법
1) VSCode 에서 js파일을 생성한다.
2) 생성한 js파일에 공유되기를 원하는 코드를 작성한다.
3) 깃허브에서 해당 CDN 전용 프로젝트를 새로 생성해준다.
4) Add file -> Create new file을 클릭하여 commit한 파일을 이곳에 생성 후 코드를 복사하여 붙여넣는다.
5) 깃허브의 Releases을 클릭하여 0.0.1버전을 new release 하기.
6) VScode에서 minify를 검색하여 JS & CSS Minifier (Minify)를 다운로드 받기.
7) 키보드 f1을 누르고 minify를 검색하여 생성한 js의 min.js를 클릭하여 새로 생성하기.
8) 깃허브에서 min.js 파일을 새로 생성하고 VSCode에서 생성된 api 주소를 복사하여 붙여넣기.
9) 깃허브의 Releases을 클릭하여 0.0.2버전을 new release 하기.
3. Github에서 Releases(배포) 하는 방법
1) 깃허브 레포지토리에서 "Releases" 탭으로 이동합니다.
2) "Draft a new release" 버튼을 클릭합니다.
3) 태그 이름과 릴리즈 제목을 입력합니다.
4) 릴리즈 노트를 작성합니다.
5) "Attach binaries" 섹션에서 릴리즈에 포함시킬 파일을 업로드합니다.
6) "Publish release" 버튼을 클릭합니다.
깃허브의 Releases할 경우 해당 CDN을 어디에서나 누구나 불러와서 사용할 수 있다.
◆ CDN의 장점
- 브라우저에서 파일을 다운로드하는 시간을 줄일 수 있습니다.
- 웹페이지 로딩 속도를 빠르게 할 수 있습니다.
- 또한 CDN에서 파일을 관리하므로, 라이브러리의 최신 버전을 적용하거나 보안 문제를 해결하는 등의 업데이트를 자동으로 적용할 수 있습니다.
