본문 바로가기
📌 Front End/└ JavaScript

[JavaScript] 자바스크립트 라이브러리 모음(CDN) - CryptoJS, Dropzone, SweetAlert2, Swiper, Chart.js, interact.js

by 쫄리_ 2024. 11. 15.
728x90
반응형

📌 CDN / 라이브러리

  • 라이브러리 : 웹사이트에 필요한 기능을 쉽게 추가할 수 있는 도구 모음
  • CDN : 라이브러리를 인터넷을 통해 쉽게 가져다 쓸 수 있게 해주는 장소

🔎 CDN을 통해 라이브러리를 사용하는 이유

라이브러리를 내 컴퓨터에 저장해서 쓰면, 매번 파일을 설치하고 업데이트의 번거로움이 있습니다.
CDN을 사용하면 인터넷에서 필요한 라이브러리를 바로 불러와 사용할 수 있어

파일을 따로 다운로드할 필요가 없고, 프로젝트 용량이 줄어들고 서버 부담이 줄어듭니다.

CDN은 라이브러리를 쉽게 불러와 쓸 수 있게 해주는 장소이고,

라이브러리는 웹 기능을 쉽게 추가해주는 도구입니다.

 

CDN 장점

  1. 프로젝트 용량 감소 : 파일을 다운로드하지 않아도 됩니다.
  2. 서버 부담 감소 : 외부 서버에서 리소스를 제공해 서버 부담이 줄어듭니다.
  3. 속도 향상 : 전 세계 여러 서버에 리소스를 저장해, 가까운 서버에서 빠르게 불러옵니다.

CDN 단점

  1. 외부 서버 의존 : CDN 서버에 문제가 생기면 리소스를 불러오지 못할 수 있습니다.
  2. 보안 우려 : 외부 서버를 이용하므로 보안에 주의가 필요합니다.

📌 CDN 제공 사이트

🌐 CdnJS

https://cdnjs.com

 

cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil

cdnjs.com

 

🌐 JSDelivr

https://www.jsdelivr.com

 

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

www.jsdelivr.com

 

🛠️ 자주 쓰이는 웹 라이브러리 목록

라이브러리 설명
CryptoJS 데이터를 안전하게 암호화하고 복호화하는 라이브러리
Dropzone 파일 업로드를 쉽게 구현하고, 드래그 앤 드롭 방식 지원
SweetAlert2 사용자 알림창을 커스터마이징하여 표시
Swiper 이미지, 텍스트 등의 콘텐츠를 슬라이드 형식으로 표시
Chart.js 데이터 시각화를 위한 다양한 차트 생성
interact.js 드래그, 리사이즈, 회전 등 인터랙티브 기능을 쉽게 구현

🔎 defer 외부 JavaScript 실행 순서 보장

외부 JS 파일이 CDN 라이브러리를 사용할 때, 라이브러리가 먼저 로드되어야 오류가 없습니다.
defer를 사용하면 HTML을 모두 읽고, CDN 로드 후 외부 JS 파일이 실행됩니다.

  • 작성 순서 : CDN 스크립트 ➡️ defer 스크립트
  • CDN은 즉시 로드되고, defer는 HTML 읽기 완료 후 실행됩니다.
<!-- CDN 라이브러리 (먼저 로드됨) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>

<!-- 외부 JavaScript (defer 적용) -->
<script defer src="./index.js"></script>

 

📝 CryptoJS (데이터 암호화)

데이터를 안전하게 암호화하고 복호화하는 라이브러리입니다.

텍스트를 암호화하여 데이터 무결성을 보장하거나 보호할 수 있습니다.

⚙️ CryptoJS 기본 형태

<!-- 1️⃣ JavaScript 활성화 -->
CryptoJS.해시함수명("암호화할 텍스트");
  • SHA 계열 : SHA1, SHA256, SHA512, SHA3
  • MD 계열 : MD5 (보안 취약성으로 인해 권장되지 않음)
  • RIPEMD 계열 : RIPEMD160

 

사용예시

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CryptoJS 암호화</title>
   
   <!-- 1️⃣CryptoJS 라이브러리 CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" 
           integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ==" 
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
   <h1>CryptoJS 암호화</h1>
   
   <script>
     // 2️⃣암호화할 텍스트 설정
     const textToEncrypt = "Hello World"; 

     // 3️⃣SHA3 암호화 적용
     const encryptedText = CryptoJS.SHA3(textToEncrypt).toString();

     // 4️⃣암호화된 결과를 콘솔에 출력
     console.log("암호화된 텍스트:", encryptedText); 
   </script>
 </body>
</html>

 

📝 Dropzone (파일 업로드)

드래그 앤 드롭 방식으로 파일 업로드를 쉽게 구현할 수 있는 라이브러리입니다.

사용자가 파일을 드래그하거나 클릭하여 쉽게 업로드할 수 있습니다.

⚙️ Dropzone 기본 형태

<!-- 1️⃣ HTML 요소 생성 -->
<div class="dropzone"></div>

<!-- 2️⃣ JavaScript 활성화 -->
Dropzone.autoDiscover = false;
new Dropzone('HTML요소선택자.dropzone', { 옵션 });

 

사용예시

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dropzone 파일 업로드</title>
   
   <!-- 1️⃣Dropzone 라이브러리 CDN -->
   <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
 </head>
 <body>
   <h1>Dropzone 파일 업로드</h1>
   
   <!-- 2️⃣Dropzone 영역: 파일 드래그 및 클릭 업로드 -->
   <div class="dropzone" id="myDropzone">
      파일을 여기에 드래그하거나 클릭하여 업로드하세요.
   </div>
   
   <script>
     // 3️⃣Dropzone 자동 탐지 기능 비활성화 (필수 설정)
     Dropzone.autoDiscover = false;

     // 4️⃣Dropzone 초기화
     new Dropzone("#myDropzone", {
       url: 'http://127.0.0.1:5500/upload', // 파일 업로드를 처리할 서버 URL
       method: 'post',                      // 업로드 방식 (POST)
       timeout: 200,                        // 업로드 제한 시간 (ms)
       uploadMultiple: false,               // 다중 파일 업로드 비활성화
     });
   </script>
 </body>
</html>

 

📝 SweetAlert2 (알림창)

커스터마이징 가능한 알림창을 쉽게 만들 수 있는 라이브러리입니다.

사용자에게 알림, 경고, 확인 창을 간단히 표시

⚙️ SweetAlert2 기본 형태

<!-- 1️⃣ JavaScript 활성화 -->
Swal.fire({ 옵션 });

 

사용예시

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SweetAlert2 알림창</title>
   
   <!-- 1️⃣SweetAlert2 라이브러리 CDN -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.5/dist/sweetalert2.all.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.5/dist/sweetalert2.min.css">
 </head>
 <body>
   <h1>SweetAlert2 알림창</h1>
   
   <script>
     // 2️⃣SweetAlert2를 사용해 알림창 표시
     Swal.fire({
       title: '안녕하세요!',                      // 알림창 제목
       text: '이것은 SweetAlert2 알림창입니다.',  // 알림창 내용
       icon: 'success',                          // 아이콘 유형 (success, error, warning 등)
       confirmButtonText: '확인',                // 확인 버튼 텍스트
       toast: true,                              // 토스트 형식의 작은 알림 활성화
       position: 'top-end'                       // 알림 위치 (top, center, bottom 등)
     });
   </script>
 </body>
</html>

 

📝 Swiper (슬라이더)

이미지, 텍스트 등의 콘텐츠를 슬라이드 형식으로 표시할 수 있는 라이브러리입니다.

사진 갤러리, 추천 콘텐츠 슬라이드, 배너 등 다양한 구현에 유용합니다.

⚙️ Swiper 기본 형태

<!-- 1️⃣ HTML 요소 생성 -->
<div class="swiper">
  슬라이드 개별 요소 HTML 코드 작성
</div>

<!-- 2️⃣ JavaScript 활성화 -->
new Swiper('HTML요소선택자.swiper', { 옵션 });

 

사용예시

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Swiper 슬라이더</title>
   
   <!-- 1️⃣Swiper 라이브러리 CDN -->
   <script src="https://cdn.jsdelivr.net/npm/swiper@11.1.14/swiper-bundle.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11.1.14/swiper-bundle.min.css">
 </head>
 <body>
   <h1>Swiper 슬라이더</h1>
   
   <!-- 2️⃣슬라이더 컨테이너(HTML 요소 추가) -->
   <div class="swiper">
      <!-- 슬라이더 콘텐츠 감싸는 래퍼 -->
      <div class="swiper-wrapper">
        <!-- 각각 슬라이드 (콘텐츠 넣을 공간) -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 페이지네이션 (슬라이드 위치 표시) -->
      <div class="swiper-pagination"></div>
      <!-- 이전/다음 버튼 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 스크롤바 -->
      <div class="swiper-scrollbar"></div>
   </div>

   <script>
     // 3️⃣Swiper 슬라이더 초기화
     const swiper = new Swiper('.swiper', {
       slidesPerView: 1,           // 한 번에 보이는 슬라이드 개수
       loop: true,                 // 슬라이드 반복 여부
       pagination: {               // 페이지네이션 설정
         el: '.swiper-pagination', // 페이지네이션 요소 선택자
         clickable: true           // 페이지네이션 클릭 가능 여부
       },
       navigation: {                     // 이전/다음 버튼 설정
         prevEl: '.swiper-button-prev',  // 이전 버튼 선택자
         nextEl: '.swiper-button-next'   // 다음 버튼 선택자
       },
       autoplay: {                      // 자동 재생 설정
         delay: 3000,                   // 슬라이드 간 시간 간격 (ms)
         disableOnInteraction: false    // 사용자가 조작해도 자동 재생 유지
       }
     });
   </script>
 </body>
</html>

 

📝 Chart.js (차트 생성)

데이터를 시각화하여 차트 형태로 표시할 수 있는 라이브러리입니다.

바 차트, 라인 차트 등 다양한 형식의 차트를 손쉽게 구현합니다.

⚙️ Chart.js 기본 형태

<!-- 1️⃣ HTML 요소 생성 -->
<canvas id="myChart"></canvas>

<!-- 2️⃣ JavaScript 활성화 -->
const 캔버스변수명 = document.getElementById('HTML요소선택자myChart').getContext('2d');
new Chart(캔버스변수명, { 옵션 });

 

사용예시

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Chart.js 차트</title>
   
   <!-- 1️⃣Chart.js 라이브러리 CDN -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
   <h1>Chart.js 차트</h1>
   
   <!-- 2️⃣차트 표시할 캔버스(HTML 요소 추가) -->
   <canvas id="myChart" width="400" height="200"></canvas>
   
   <script>
     // 3️⃣차트를 그릴 캔버스 요소 가져오기
     const ctx = document.getElementById('myChart').getContext('2d');
    
     // 4️⃣Chart.js를 사용해 바 차트 생성
     new Chart(ctx, {
       type: 'bar', // 차트 유형 (bar, line 등)
       data: {
         labels: ['Red', 'Blue', 'Yellow'], // x축에 표시될 레이블
         datasets: [{
           label: 'Votes',                  // 데이터 세트 라벨
           data: [12, 19, 3],               // y축에 표시될 데이터 값
           backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], // 각 바의 배경색
         }]
       },
       options: {
         responsive: true,   // 화면 크기에 맞게 차트 크기 조정
         plugins: {
           legend: {         // 차트의 범례 설정
             display: true,  // 범례 표시 여부
             position: 'top' // 범례 위치
           }
         }
       }
     });
   </script>
 </body>
</html>

 

📝 interact.js (인터랙티브 기능)

드래그, 리사이즈, 회전 등 다양한 인터랙티브 기능을 쉽게 구현할 수 있는 라이브러리입니다.

화면 내 요소를 드래그하거나 크기를 조절할 때 유용합니다.

⚙️ interact.js 기본 형태

<!-- 1️⃣ HTML 요소 생성 -->
<div id="draggable" style="width: 100px; height: 100px; background: lightblue;">
    드래그할 요소
</div>

<!-- 2️⃣ JavaScript 활성화 -->
interact('HTML요소선택자#draggable').draggable({ 옵션 });

 

사용예시

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>interact.js 인터랙티브</title>
   
   <!-- 1️⃣interact.js 라이브러리 CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.11/interact.min.js" 
           integrity="sha512-8hBiY/UwsVieg6BAQbtKG1HOFx8tJs1Iowlr8W1ju7ROpT9sY8JtbMY+xcDqDKGXKwkL7RA2Tkg4c5m3qNx7YA==" 
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
   <h1>interact.js 드래그 기능</h1>
   
   <!-- 2️⃣드래그 가능한 박스(HTML 요소 추가) -->
   <div id="draggable" style="width: 100px; height: 100px; background: lightblue;">
       Drag me
   </div>

   <script>
     // 3️⃣interact.js를 사용해 드래그 기능 활성화
     interact('#draggable').draggable({
       // 드래그 중 발생하는 이벤트 처리
       onmove: function (event) {
         const target = event.target;
        
         // 현재 위치에 드래그한 만큼의 이동 거리 추가
         const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
         const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

         // 요소의 위치를 이동한 거리만큼 업데이트
         target.style.transform = `translate(${x}px, ${y}px)`;

         // 새로운 위치 값을 data 속성에 저장하여 추후 참조 가능
         target.setAttribute('data-x', x);
         target.setAttribute('data-y', y);
       }
     });
   </script>
 </body>
</html>

 

728x90
반응형
저작자표시

'📌 Front End > └ JavaScript' 카테고리의 다른 글

[JavaScript] 비동기 데이터 통신(AJAX, Fetch) - Fetch 요청 옵션, 응답 속성  (3) 2024.11.14
[JavaScript] 프록시(Proxy) 객체, 핸들러 메서드 - 객체 보호, 함수 호출 제어, 생성자 제어, 값 제한, 읽기 전용  (0) 2024.11.13
[JavaScript] 자바스크립트 구조 분해 할당  (0) 2024.09.04
[JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce()  (1) 2024.08.22
[JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터  (0) 2024.08.21

관련글

티스토리툴바