CDN : Contents Delivery Network - 콘텐츠 전송 네트워크
- 서버와 이용자 사이의 물리적 거리를 줄여 웹 페이지 콘텐츠 로드 지연을 최소화 하는, 촘촘히 분산된 서버로 이루어진 플랫폼
지역에 따라 느려지는 것을 방지하기 위해 CDN은 PoP(Points of Presence)라고 하는 전 세계의 여러 지역에 캐시된 버전의 웹사이트 콘텐츠를 저장합니다.
이러한 PoP에는 자체 캐싱 서버가 포함되어 있고 사용자의 위치에서 해당 콘텐츠를 제공합니다.
웹 브라우저를 실행하면 HTML, CSS, Javascript, image 파일을 렌더링하는데 필요한 콘텐츠를 요청합니다.
대부분 CDN의 경우 콘텐츠에 대한 각 요청이 발생하면 최적으로 배치된 CDN 서버에 엔드 유저가 매핑되고, 해당 서버는 요청된 파일의 캐싱된(사전 저장된) 버전으로 응답합니다.
웹 사이트의 콘텐츠 전송은 CDN이 가장 흔히 사용되는 사례지만, 이 밖에도 다양한 콘텐츠 유형을 전송
- 4k 및 HD 품질의 동영상 등
- 디지털화될 수 있는 모든 데이터는 CDN을 통해 전송할 수 있음
unpkg cdn, jsDelivery
- npm에 등록된 패키지를 CDN으로 바로 활용가능한 서비스
axios 사용 예
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
// GET
const getUsers = () => {
axios.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data;
console.log(`GET users`, users);
})
.catch(error => console.error(error));
};
getUsers();
// POST
const createUser = (user) => {
axios.post('https://reqres.in/api/users', user)
.then(response => {
const addedUser = response.data;
console.log(`POST: user is added`, addedUser);
// append to DOM
appendToDOM([addedUser]);
})
.catch(error => console.error(error));
};
// DELETE
const deleteUser = (elem, id) => {
axios.delete(`https://reqres.in/api/users/${id}`)
.then(response => {
console.log(`DELETE: user is removed`, id);
// remove elem from DOM
elem.remove();
})
.catch(error => console.error(error));
};참고 문헌
움직이는 만큼 행복해진다