로그인


t

유용한 사이트

자신만의 즐겨찾기를 공유하는 게시판입니다.
웹서핑중 유용한 정보가 모여있는 사이트를 발견하면 이곳에 알려주세요.

[웹개발]유용한 javascript/css 파일들을 다운로드없이 사용하는 public CDN 라이브러리 - cdnjs.com

   https://cdnjs.com (88)   https://meisteruser.net/recommended_sites/1780 (51)

저같은 경우엔 개발을 하면서 수시로 이것저것 javascript나 css framework 등을 사용해봅니다. 심지어 새로운 기능도 만드는게 귀찮으면 일단 공개 라이브러리가 있나 한번 살펴보곤 하지요.

 

이런 것들을 일일히 서버에 경로잡아서 다운로드해서 설치하고 써보다가 아니다 싶으면 삭제하고, 상당히 번거롭잖아요?

 

그래서 공개적으로 라이브러리들을 호스팅해주는 public cdn서비스들을 사용해 봤는데요,

 

대표적인게 구글 cdn 라이브러리가 있지요 (https://ajax.googleapis.com 로 시작하는 파일들) 

 

처음에는 google cdn 에서 jquery/jqueryUI 같은것들 땡겨다 쓰고, 부트스트랩은 홈에 있는 가이드대로 maxcdn꺼 땡겨다 쓰고 해 봤었는데,

이게 속도가 엄청 불안정하더군요. 어떨때는 별 문제 없다가 어떨때는 (javascript 로딩하는것 땜에) 페이지가 로딩이 확 느려지는 상황도 발생하고...

이게 아마 maxcdn 이나 google 이 한국쪽에서 서비스하는 엣지서버가 없어서 그런게 아닐까 싶어요.

 

그러다가 우연히 cdnjs.com 알게돼서 들어가보니 엄청 많은 라이브러리들을 (현재 총 2,855개) 호스팅하고 있는데다가 속도도 꽤나 빠르고 안정적이더군요.

cdnjs 는 주력 cdn서버가 cloudflare 를 쓰는데, 클라우드플래어 얘네들은 한국쪽에 엣지가 나와 있어서 그런것 같습니다.

(물론 속도는 제 개인적인 경험이므로 구글이나 maxcdn등을 쓰시면서 아무 문제가 없는 경우도 많을거라 생각합니다)

 

붙여서 써보니 괜찮아서, 요즘은 시간나면 들어가서 라이브러리에 있는것들을 하나씩 붙여서 써보는 중입니다...^^

 

정리하자면, 간편하게 다운로드 없이  js/css 테스트해보는 용도로는  최고인것 같아요. 심지어 production에서 사용해도 큰 문제는 없을듯...

(원하는 버전별로 사용가능합니다. )

호스팅중인 라이브러리들중 일부: angular 관련 라이브러리들, react관련, bootstrap관련, jquery관련, font-awesome, 기타등등

 

 

아래는 간략히 여러 버전을 쓰는 방법에 대한 설명입니다.

 

원하는 라이브러리를 찾아서 (하나하나 찾아보거나 검색으로 - 여기서는 부트스트랩을 해볼게요)

 

클릭해서 들어가면 버전과 cdn provider를 선택할 수 있습니다 

 

그리고 써보기를 원하는 파일 우측에 마우스를 올리면 링크를 복사할 수 있습니다. 끝.

P.S. : 아 물론, 각종 패키지매니저를 쓰시는 분들은 그냥 필요한거는 설치하시는게 더 간편하실 수도 있습니다. 이런방법도 있다는 거죠 뭐...

P.S.2: 두번째 링크는 제가 원본 글을 올린 링크입니다...


signature
https://www.time2price.com 관리자 김군
https://meisteruser.net 공돌이 --> 지금 필진, 부관리자 모집중이예요!!
  • (2017-03-16 12:21)
좋은 정보 감사합니다 :)
  • Hommage님
  • (2017-03-16 13:48)
저도 애용 중입니다. 좋습니다.

저는 마소 CDN에서 제공하는 라이브러리(ex, jQuery, Bootstrap)를 우선 사용하고...
제공하지 않는 라이브러리는 cdnjs.com 것을 사용합니다.
마소 CDN이 개인적인 경험상 제일 안정적이고 빠르더라고요.
---
https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview
  • 민수아빠님
  • (2017-03-16 13:51)
Hommage님// ㅎㅎ 네 근데 닷넷용 위주라... 제가 닷넷을 안쓰니 쓸만한게 제이쿼리랑 부트스트랩밖엔 별로 없더라구요... 속도가 괜찮은가보죠?
  • wagon님
  • (2017-03-16 17:00)
http://codepen.io
http://jsfiddle.net

등을 이용하시면 더 좋습니다.
  • 민수아빠님
  • (2017-03-16 19:55)
wagon님// 이게 그냥 단일페이지에서 특정기능 테스트하는거 아닌가요? 기존의 비즈니스로직이 있는 페이지들에서 뭔가 변경해보려면 적당하지 않은거 같던데요...
  • wagon님
  • (2017-03-17 09:40)
제 경우에는 보통 특정 라이브러리를 가져와서 사용하려고 할때,
위 사이트들을 이용해서 기능을 구현해보고 괜찮다 싶으면 실제 사이트에 적용합니다.

단위별로 구현해 놓고 저장에 놓으면 다음에 다시 참고해서 쓰기도 좋습니다.

또한 해당 라이브러리로 검색해보면 구현해 놓은 예제도 찾을수 있어
직접 구현해보지 않아도 결과물 확인이 가능합니다.

그런의미에서 댓글은 달았고 위 사이트 등을 이용하시면 더 좋을수도 있으니
참고하란 의미입니다.
  • 민수아빠님
  • (2017-03-17 10:45)
wagon님// 아하 네 그렇군요 잘 알겠습니다 감사합니다...^^ 코드펜 같은데는 항상 남이 만들어둔거 보는 용도로만 사용하다보니...^^
  • 키스샷_아세님
  • (2017-03-20 10:28)
클플쪽은 사용할때 주의하세요.
한국에서 IP에 따라서 홍콩이나 한국쪽 서버가 아닌 북미나 이상한곳으로 바라보는경우가 있는데, 그런경우 TTL값이 어마무시하게 높아지면서 사이트로딩이 어마무시하게 느려질수 있습니다..
  • 갤럭님
  • (2017-03-22 13:48)
그냥 파일 다운받아서 서버 로컬에서 쓰는게 좋습니다. 클라우드 플레어가 엄청 느릴때도 많아요
이전글 부산에서 하는 좋은 "무료" Azure 강연 소개 드립니다. [1] 03-17 10:22
다음글 폰꾸미기 추천해주는 사이트[7] jamusrhee_ 03-14 18:23