- 01.28 1차 피드백을 받고 정리한 내용입니다.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />bootstrap 라이브러리를 불러올 때 위와 같이 CDN 서버에 접속하여 받아왔습니다.
외부 라이브러리를 사용할 때 (1) 라이브러리를 파일로 저장해두고 불러오는 방식과 (2) CDN 서버에서 가져오는 방식에 있어 퍼포먼스 차이가 있다고 하여 공부하게 되었습니다.
CDN 서버 통해 file가져오지말고, 직접 라이브러리를 static하게 저장해서 불러오기
CDN이란?
CDN(Content Delivery Network; 컨텐츠 전송 네트워크)이란 컨텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
CDN의 장점
인터넷 서비스 제공자에 직접 연결되어 데이터를 전송하므로, 컨텐츠 병목을 피할 수 있음
출처: 위키피디아
CDN의 동작원리
웹 브라우저가 실행되는 디바이스의 사용자 에이전트가 특정 주소에 접근하여 렌더링하는 데 필요한 컨텐츠를 서버로부터 요청한다 → DNS는 컨텐츠에 대한 요청이 발생하면 End User와 가장 가까운 위치에 최적으로 배치된 CDN 서버에 End User를 매핑시킴, 해당 서버는 요청된 파일의 캐싱된 버전으로 응답한다 → 서버가 파일 찾는데 실패하는 경우 다른 서버에서 찾은 다음 End User에게 응답 / 컨텐츠를 사용할 수 없거나 오래된 경우 origin 서버에 대한 요청 프록시로 작동하여 추후 요청에 대해 응답할 수 있도록 patch된 새로운 컨텐츠 저장
출처: 한량 개발자
왜 CDN으로 라이브러리를 가져오는 것이 권장되지 않는가?
- 온라인 환경이 필수적: 오프라인 환경에선 작동하지 않으므로 인터넷 연결 없이는 개발할 수 없다
- 액세스가 제한적: 국가 등에 따라 액세스가 제한적일 수 있다
- 디버깅의 어려움: CDN이 호스팅된 파일을 자동 변경하거나, 신뢰할 수 없는 것으로 판단하면 디버깅이 어려울 수 있다
- 호환 문제: 최신 버전을 가져오게 설정했다가 이전 버전과 호환되지 않아 오류가 발생할 수 있다
출처: Ohjongsung's Dev Story
