Content Delivery Network
말 그대로 콘텐츠를 배송하는 방식이다.
CDN이란 인터넷 서버와 가까운 위치에 파일을 미리 복사해두고 이를 빠르게 다시 가져가 사용하는 방법을 말한다.
하나의 서버에서 가져오는 좌측과 같은 방식이 있다면
여러대의 서버에서 가져오는 우측과 같은 방식이 있다.
파일을 쉽고 빠르게 다운로드 받아서 사용하는 방법을 말하는데,
여러분들이 사용하고자 하는 누군가의 js 파일을 사용하고자 한다면, 코드를 직접 다운 받거나 복사하여 우리 프로젝트에 맞게 적용시키는 과정이 필요하다.
하지만 CDN를 이용하여 JS 파일을 다운로드 받으면, 단 한 줄의 코드로 파일을 다운로드 할 수 있게 된다.
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>아래는 타이핑 애니메이션을 구현한 코드를 CDN으로 받아온 것이다.
- CDN 사용법
원하는 기능을 검색하면 다양한 웹사이트에서 CND 링크를 제공한다.
(CDN는 서버에서 가져오는 수단이기 때문에 링크가 따로 존재한다.)
cdnjs - The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil
cdnjs.com
npm
Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java
www.npmjs.com
<head>
<script src="(링크)"></script>
</head>위와 같이 HTML 문서의 HEAD 부분에 script 태그의 src를 통해서 추가만 해주면 끝
이후로는 CDN 링크를 제공한 개발자의 문서를 통해 사용하면 된다.
위에서 본 타이핑 애니메이션을 통해 예시를 확인해보자
Typewriter JS - A simple yet powerful native javascript plugin for a cool typewriter effect.
safi.me.uk
오 적용해보니 재미가 있네
ㅋㅋㅋㅋ
엄연히 말하면 자바스크립트 기술은 아니지만,
CDN는 간단하게 말하면 한 줄의 코드로 네트워크를 통해서 필요한 기술들을 가져와 쓸 수 있는 라이브러리라고 볼 수 있다
'Javascript' 카테고리의 다른 글
| input type text 숫자만 입력하고 싶을 때 (0) | 2021.10.01 |
|---|---|
| javscript remove(); 체크박스 삭제 사용시 주의사항 (0) | 2021.09.29 |
| [Javascript] 지도 API 사용하기 (0) | 2021.08.12 |
| [Javascript] 자바스크립트 프로처럼 쓰는 팁 / 엘리코딩 (0) | 2021.08.08 |
| [Javascript] onkeypress() / keyup, keypress, keydown (0) | 2021.07.29 |