CDN 사이트 먹통으로 인한 CSS, JS 라이브러리 내재화 방법

CDN 사이트 먹통 발생

문제 라이브러리 스크립트

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

CDN 사이트를 통해 라이브러리를 import 한 jsp 페이지들이 정상 동작하지 않는 오류가 발생하였습니다.

CSS, JS 등 라이브러리 파일은 다운받아 프로젝트 내에 두고 import 하는 것이 좋습니다.
URL 링크로 import 하면, CDN 사이트가 정상 동작하지 않게 되었을 때 사이트가 먹통이 될 수 있습니다.

---

CSS, JS 라이브러리 내재화 방법

다른 CDN 사이트에서 다운로드

접속 불가한 cdn 사이트가 아닌, 다른 cdn 사이트 URL 뒤에 /경로/파일명.확장자를 붙이면 파일이 나옵니다.

접속 가능 CDN 예시

https://fastly.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
https://gcore.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css

해당 웹페이지 우클릭 후 다른 이름으로 저장하고, 프로젝트 webapp 폴더 안에 옮겨서 /상대경로로 import 하면 됩니다.

다른 프로젝트에서 다운로드

1. 해당 라이브러리를 이미 내재화 한 다른 프로젝트 사이트에서 F12 개발자 모드를 엽니다.
2. Sources 탭에서 Ctrl + Shift + F로 해당 JS 또는 CSS 파일명을 검색합니다.
3. 파일 우클릭 후 Save as… 하여 다운로드합니다.

공식 사이트에서 다운로드

라이브러리 공식 사이트에서 버전에 맞게 파일을 다운로드합니다.

라이브러리 파일에서 참조하는 관련 폰트 등도 필요하면 전체 폴더를 다운로드합니다.
프로젝트에 전부 넣으면 느려지니, 페이지 Network 분석에서 404 파일만 경로에 맞게 넣어줍니다.

구글링하여 다운로드

구글 검색으로 나오는 깃허브, 블로그 등에서도 해당 파일을 받을 수 있습니다.