😵 들어가며

현재 회사에서 라이브러리를 구축중인데 lit 패키지 쪽 CDN 배포를 리서치하게 되었다. 처음에는 CDN이라는 개념을 잘 모르니 어떤걸 해야하는지 나의 롤을 정확히 파악하지 못했다. 그래서 정리해보는 나의 CDN 탐험 및 라이브러리 배포기.



CDN이란?

CDN(Content Delivery Network)은 전 세계 여러 서버에 파일을 분산 저장하여 사용자가 요청하는 파일이 물리적으로 가장 가까운 서버에서 제공되어 더 빠르고 안정적인 콘텐츠 전달을 가능하게 하는 시스템이다. 내가 서울에 있으면 서울에서 가장 가까운 서버에서 콘텐츠를 불러오고, 멕시코에 있으면 멕시코에서 가장 가까운 서버에서 콘텐츠를 불러와 내가 어디에 있던 빠르게 서비스를 제공받을 수 있다! 왕이득!



CDN 어떻게 사용하는가?

제공하려는 라이브러리를 CDN에 어떻게 배포할 수 있을까! 방법은 여러가지가 있을 수 있는데, 우리는 jsDelivr 를 택했다. Github 저장소에 있는 빌드된 프로젝트 파일을 룰에 맞게 주소에 넣어주기만하면 아주아주 쉽게 배포할 수 있기 때문이다.


jsDelivr 배포 예시 https://cdn.jsdelivr.net/gh/{username}/{repo}@{version}/{file}

진짜 별거 없이 url에 repo 및 파일 위치만 알맞게 기입하면 DONE… 주의할 점은 캐시 문제인데, 파일 업데이트시 바로 변경사항이 반영되는건 아니고 12시간 후에 반영된다고 한다. 그래서 버전관리를 명확하게 할 필요도 있고, 테스트하는 중이라면 그냥 레포를 새로 파는 것도 방법이다..!



트러블 발생-type

요즘은 대부분이 타입스크립트를 베이스로 개발할텐데, 빌드된 결과물은 js 파일이다. 그래서 Script 로 CND을 설치해도 막상 사용시에 타입 에러가 날 것 이다. 실제로 아래 이미지를 보면 라이브러리에서 제공하는 커스텀 엘리먼트가 해당 프로젝트 내에 타입이 설정되지 않아 태그를 인식못하는 에러가 뜬다.

cdn-type-error


그래서 우리 팀이 내린 결론은 CDN을 사용하려면 해당 라이브러리의 타입을 따로 npm으로 설치하거나, 라이브러리 자체를 npm으로 다운받는 것이다. 그러면 여기서 드는 의문은 타입을 제공하기 위한 라이브러리를 또 따로 만들어야하는 것이다.

물론,, 이 프로젝트가 현재 진행형이라 의문 또한 현재 진행형인것,,, 우리만의 답은 아직 못찾았지만 좋은 해결안을 찾게 되면 이 글을 다시 업데이트 하도록 하는것으로!😇