티스토리 뷰

IT tech Coding/javascript

처음 겪어본 Failed to load resource: net::ERR_CERT_DATE_INVALID 오류에 대한 대처방법

Coding Life 2024. 5. 3. 11:36
반응형

아, 이거 처음 겪어본결과 3시간을 그냥 날려보냈습니다. 

혹시 이런거 처음 겪어보는 분들에게 도움이 되도록 해결과정을 chatGPT와 시름한 내용을 공유합니다. 누군가에게는 도움이 되지 않을까 싶은 마음과 또 겪으면 찾아봐야겠다는 의도로 작성했습니다.

갑자기 잘되던 
https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.css
script 참조가 안되면서 아래의 오류가 나온다.

Failed to load resource: net::ERR_CERT_DATE_INVALID
ChatGPT
net::ERR_CERT_DATE_INVALID 오류는 웹 리소스를 로드하려는 시도가 실패했을 때 발생하는 SSL/TLS 인증서 관련 문제를 나타냅니다. 이 오류는 웹서버의 인증서가 만료되었거나, 클라이언트 시스템의 날짜/시간 설정이 잘못되었을 때 주로 발생합니다.

문제 해결을 위한 몇 가지 방법은 다음과 같습니다:

클라이언트 시스템의 날짜 및 시간 확인: 사용 중인 컴퓨터나 장치의 날짜 및 시간 설정이 정확한지 확인하세요. 시스템 시간이 현재 날짜/시간과 크게 다르면 이 오류가 발생할 수 있습니다.
다른 브라우저에서 시도해 보기: 같은 URL을 다른 웹 브라우저에서 접속해 보세요. 때로는 특정 브라우저에서 SSL/TLS 관련 문제가 발생할 수 있습니다.
인증서 상태 확인: cdn.jsdelivr.net의 인증서 상태를 확인해보세요. 이는 보통 웹 브라우저를 사용하여 해당 사이트에 접속한 후, 주소창 옆의 자물쇠 아이콘을 클릭하고 인증서 정보를 보는 방식으로 확인할 수 있습니다. 인증서가 만료되었거나 문제가 있다면, 해당 CDN 서비스 제공업체에 문의할 필요가 있습니다.
HTTPS 프록시 또는 VPN 사용 중단: 네트워크에 HTTPS 트래픽을 검사하거나 변경할 수 있는 프록시 서버나 VPN이 사용되고 있다면, 이를 잠시 중단하고 다시 시도해 보세요.
CDN 제공업체 문의: 문제가 지속되면, cdn.jsdelivr.net의 운영자나 서비스 제공업체에 연락하여 문제를 보고하고 해결 방법을 문의하세요.
이 중 가장 먼저 시도해볼 수 있는 것은 시스템의 날짜와 시간을 확인하는 것입니다. 그리고 가능하다면, 서버 측에서 인증서를 갱신하도록 요청하거나 다른 CDN 서비스로의 전환을 고려할 수도 있습니다.

User
클라이언트 시스템의 날짜 및 시간 확인: 사용 중인 컴퓨터나 장치의 날짜 및 시간 설정이 정확한지 확인하세요. 시스템 시간이 현재 날짜/시간과 크게 다르면 이 오류가 발생할 수 있습니다.

이 부분을 어떻게 확인할 수 있나?
ChatGPT
클라이언트 시스템의 날짜 및 시간을 확인하는 방법은 사용 중인 운영체제에 따라 다릅니다. 여기에서는 Windows, macOS, 그리고 Linux 시스템에서 날짜 및 시간을 확인하고 조정하는 방법을 설명하겠습니다.

Windows
작업 표시줄의 시계 영역을 클릭합니다.
날짜/시간 조정을 클릭하거나 날짜 및 시간 설정으로 이동합니다.
날짜 및 시간 탭에서 현재 설정을 확인합니다.
시간이 정확하지 않은 경우, 시간 설정 변경 또는 인터넷 시간과 동기화를 클릭하여 시간을 자동으로 동기화하도록 설정할 수 있습니다.
macOS
화면 상단 메뉴의 시계를 클릭합니다.
날짜 및 시간 환경설정 열기를 선택합니다.
날짜 및 시간 탭에서 현재 날짜 및 시간을 확인합니다.
자동으로 날짜 및 시간 설정 체크박스를 선택하면, 네트워크 시간 서버를 통해 자동으로 시간이 동기화됩니다.
Linux
대부분의 Linux 배포판에서는 터미널을 열고 date 명령어를 입력하여 현재 시스템의 날짜 및 시간을 확인할 수 있습니다.
시간을 자동으로 동기화하려면, timedatectl 명령을 사용하여 시스템 시간 설정을 관리할 수 있습니다. 예를 들어, timedatectl set-ntp true 명령으로 NTP를 활성화할 수 있습니다.
시스템의 날짜 및 시간 설정이 정확한지 확인한 후에도 문제가 지속되면, 다른 해결책을 시도해 보시기 바랍니다.

User
위의 문제를 해결하는 방법으로 아래의 코드를 수정하면 되는가?

<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/session_header.php'); 


$root_dir = $_SERVER['DOCUMENT_ROOT'];
// 모바일 사용여부 확인하는 루틴
$mAgent = array("iPhone","iPod","Android","Blackberry", 
    "Opera Mini", "Windows ce", "Nokia", "sony" );

$chkMobile = false;
for($i=0; $i<sizeof($mAgent); $i++){
    if(stripos( $_SERVER['HTTP_USER_AGENT'], $mAgent[$i] )){
        $chkMobile = true;
// print '권영철';
        break;
    }
}



?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta property="og:type" content="(주) 대한">
<meta property="og:title" content="(주) 대한">
<meta property="og:url" content="dh2024.co.kr">
<meta property="og:description" content="정확한 업무처리 포탈!">
<meta property="og:image" content="<?$root_dir?>/img/miraethumbnail.jpg"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- 화면에 UI창 알람창 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.min.css" rel="stylesheet">

<script src="<?$root_dir?>/common.js"></script>
<script src="<?$root_dir?>/js/typingscript.js"></script>  <!-- typingscript.js 포함  글자 움직이면서 써지는 루틴 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js" > </script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">   <!--날짜 선택 창 UI 필요 -->

<!-- 최초화면에서 보여주는 상단메뉴 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.css">


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js" integrity="sha512-SIMGYRUjwY8+gKg7nn9EItdD8LCADSDfJNutF9TPrvEo86sQmFMh6MyralfIyhADlajSxqc7G0gs7+MwWF/ogQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.0.1/chartjs-plugin-annotation.min.js" integrity="sha512-Hn1w6YiiFw6p6S2lXv6yKeqTk0PLVzeCwWY9n32beuPjQ5HLcvz5l2QsP+KilEr1ws37rCTw3bZpvfvVIeTh0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.css" />
<script src="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.css"/>
 <script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>
 
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<script src="<?$root_dir?>/js/date.js"></script> 
<script src="<?$root_dir?>/js/index.js"></script> 
<script src="<?$root_dir?>/js/calinseung.js"></script> 

<link rel="stylesheet" href="<?$root_dir?>/css/style.css?v=3">
<link rel="stylesheet" href="<?$root_dir?>/css/eworks.css">
ChatGPT
보여주신 PHP 코드는 웹사이트의 기본 구성 요소를 포함하고 있으며, 링크된 자바스크립트 및 CSS 파일을 참조하여 페이지를 구성합니다. 그러나 이 코드 자체는 SSL/TLS 인증서 문제인 net::ERR_CERT_DATE_INVALID 오류를 직접적으로 해결하지 않습니다. 이 오류는 서버에서 제공하는 리소스의 인증서가 유효하지 않거나 만료된 경우 발생합니다.

net::ERR_CERT_DATE_INVALID 오류를 해결하기 위한 방법으로는 다음과 같은 접근이 필요합니다:

인증서 검증: 문제가 되는 CDN 서비스(https://cdn.jsdelivr.net)의 SSL 인증서가 유효한지 확인합니다. 인증서에 문제가 있다면, 해당 CDN의 운영자가 인증서를 갱신해야 합니다.
CDN 링크 변경: 만약 cdn.jsdelivr.net에서 제공하는 인증서 문제를 CDN 운영자가 빠르게 해결하지 못하는 경우, 해당 리소스를 다른 CDN 서비스로 변경할 수 있습니다. 예를 들어, 다른 버전의 Toastify 또는 다른 라이브러리를 사용하여 필요한 스타일과 기능을 유지할 수 있습니다.
로컬 리소스 사용: CDN을 사용하지 않고 웹 서버의 로컬 파일 시스템에 필요한 자바스크립트 및 CSS 파일을 저장하고 직접 참조하는 방법도 있습니다. 이 방법은 외부 리소스에 의존하지 않으므로 연결 문제나 인증서 문제에 영향을 받지 않습니다.
보안 설정 검토: 사용자의 브라우저 또는 네트워크에서 HTTPS 통신을 차단하거나 변경하는 보안 소프트웨어(방화벽, 안티바이러스, 프록시 서버 등)의 설정을 검토할 수 있습니다.
이러한 변경을 코드에 적용하려면, 특히 CDN 링크 변경이나 로컬 리소스 사용을 고려하는 것이 좋습니다. 예를 들어, toastify-js의 로컬 복사본을 사용하려면 해당 파일을 서버에 직접 업로드하고 HTML에서 로컬 경로로 참조를 변경하면 됩니다.

User
만약에 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

이를 직접 다운받아서 내 서버에 설치하려면?
ChatGPT
직접 다운로드하여 서버에 jQuery 파일을 설치하고자 할 때, 아래와 같은 단계를 따르시면 됩니다:

1. 파일 다운로드
웹 브라우저를 열고 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js 주소로 이동합니다.
페이지에 표시된 코드 전체를 복사하거나, 브라우저에서 파일을 직접 저장하는 기능을 사용합니다. 대부분의 브라우저에서는 페이지를 우클릭하고 "다른 이름으로 페이지 저장", "Save As", 또는 비슷한 옵션을 선택하여 .js 파일로 저장할 수 있습니다.
2. 파일 서버에 업로드
파일을 서버의 웹 디렉토리에 업로드합니다. FTP, SFTP, 또는 서버 관리 패널의 파일 관리자 등을 사용할 수 있습니다.
일반적으로 웹 사이트의 자산을 저장하는 public_html, www, 또는 html 폴더 내에 js라는 서브 폴더를 만들고 그곳에 파일을 저장하는 것이 좋습니다.
3. HTML 코드 수정
기존의 외부 CDN 링크 대신에 로컬 파일 경로를 사용하도록 HTML 코드를 수정합니다. 예를 들어, 파일을 js 폴더에 업로드한 경우 HTML에서 다음과 같이 스크립트 태그를 변경할 수 있습니다:

html
Copy code
<script src="/js/jquery.min.js"></script>
이렇게 하면 서버의 로컬 경로에서 jQuery 파일을 로드하게 되며, 외부 CDN에 의존하지 않게 됩니다. 이 방법은 인터넷 연결 문제나 CDN 서비스의 다운타임, SSL 인증서 문제 등 외부 요인으로부터 독립적이 될 수 있는 장점이 있습니다.

4. 사이트 테스트
변경 후에는 웹사이트가 올바르게 작동하는지 테스트하여, 모든 스크립트가 정상적으로 로드되고 기능하는지 확인합니다. 문제가 발생할 경우, 파일 경로가 정확한지, 서버에 파일이 올바르게 업로드되었는지 등을 다시 확인해야 합니다.

이 과정을 통해 외부 리소스의 의존도를 낮추고 웹 사이트의 안정성을 높일 수 있습니다.

User
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.min.css" rel="stylesheet">

위의 파일을 받으려면?
ChatGPT
https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.min.css 파일을 직접 다운로드하여 서버에 저장하려면 다음 단계를 따라하시면 됩니다:

1. 파일 다운로드
웹 브라우저를 열고https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.min.css주소로 이동합니다.
웹페이지에 표시된 CSS 코드를 전체 선택하여 복사하거나, 브라우저에서 파일을 직접 저장하는 기능을 사용합니다. 일반적으로 페이지를 우클릭하고 "다른 이름으로 페이지 저장", "Save As", 또는 비슷한 옵션을 선택하여 .css 파일로 저장할 수 있습니다.
2. 파일 서버에 업로드
다운로드한 CSS 파일을 서버의 웹 디렉토리로 업로드합니다. 이때 FTP, SFTP, 또는 서버 관리 패널의 파일 관리자 등을 사용할 수 있습니다.
웹 사이트의 자산을 저장하는 public_html, www, 또는 html 폴더 내에 css라는 서브 폴더를 만들고 그곳에 파일을 저장하는 것이 일반적입니다.
3. HTML 코드 수정
기존의 외부 CDN 링크 대신에 로컬 파일 경로를 사용하도록 HTML 코드를 수정합니다. 예를 들어, 파일을 css 폴더에 업로드한 경우 HTML에서 다음과 같이 링크 태그를 변경할 수 있습니다:

html
Copy code
<link href="/css/sweetalert2.min.css" rel="stylesheet">
이렇게 변경하면, 서버의 로컬 경로에서 SweetAlert2의 CSS 파일을 로드하게 되고, 외부 CDN에 의존하지 않게 됩니다.

4. 사이트 테스트
모든 변경 후에 웹사이트가 올바르게 작동하는지 테스트하여, 모든 스타일이 적용되고 기능하는지 확인합니다. 스타일 적용에 문제가 발생할 경우, 파일 경로가 정확한지, 서버에 파일이 올바르게 업로드되었는지 등을 다시 확인해야 합니다.

이 과정은 웹 사이트의 성능과 안정성을 향상시키고 외부 요인으로부터 독립적이게 만드는 좋은 방법입니다.

User
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" >
ChatGPT
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css 파일을 직접 다운로드하여 서버에 저장하는 과정을 단계별로 설명해드리겠습니다. 이 방법은 외부 CDN에 의존하지 않고, 웹사이트의 성능과 안정성을 개선하는 데 도움이 됩니다.

1. 파일 다운로드
웹 브라우저를 열고https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css주소로 이동합니다.
웹페이지에 표시된 CSS 코드를 전체 선택하여 복사하거나, 브라우저에서 파일을 직접 저장하는 기능을 사용합니다. 대부분의 브라우저에서는 페이지를 우클릭하고 "다른 이름으로 페이지 저장", "Save As", 또는 비슷한 옵션을 선택하여 .css 파일로 저장할 수 있습니다.
2. 파일 서버에 업로드
다운로드한 CSS 파일을 서버의 웹 디렉토리로 업로드합니다. 이때 FTP, SFTP, 또는 서버 관리 패널의 파일 관리자 등을 사용할 수 있습니다.
웹 사이트의 자산을 저장하는 public_html, www, 또는 html 폴더 내에 css라는 서브 폴더를 만들고 그곳에 파일을 저장하는 것이 일반적입니다.
3. HTML 코드 수정
기존의 외부 CDN 링크 대신에 로컬 파일 경로를 사용하도록 HTML 코드를 수정합니다. 예를 들어, 파일을 css 폴더에 업로드한 경우 HTML에서 다음과 같이 링크 태그를 변경할 수 있습니다:

html
Copy code
<link href="/css/bootstrap.min.css" rel="stylesheet">
이렇게 변경하면, 서버의 로컬 경로에서 Bootstrap의 CSS 파일을 로드하게 되고, 외부 CDN에 의존하지 않게 됩니다.

4. 사이트 테스트
모든 변경 후에 웹사이트가 올바르게 작동하는지 테스트하여, 모든 스타일이 적용되고 기능하는지 확인합니다. 스타일 적용에 문제가 발생할 경우, 파일 경로가 정확한지, 서버에 파일이 올바르게 업로드되었는지 등을 다시 확인해야 합니다.

이렇게 하면 외부 리소스의 의존성을 줄이고, 더 빠르고 안정적인 웹 사이트 운영이 가능해집니다.

User
<link href=" https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.min.css " rel="stylesheet"> 

위의 cdn말고 
cloudflare.com  CDN 얻을 수 있나?
ChatGPT
현재 SweetAlert2는 Cloudflare의 CDNJS에서도 제공되고 있습니다. Cloudflare를 통해 이 라이브러리의 CSS 파일을 로드하려면, 해당 URL을 찾고 사용하면 됩니다.

Cloudflare의 CDNJS 서비스에서 제공하는 SweetAlert2의 최신 버전 또는 특정 버전의 CSS 파일을 사용하려면, CDNJS 웹사이트를 방문하거나, Cloudflare CDNJS의 검색 기능을 사용하여 sweetalert2를 검색할 수 있습니다.

Cloudflare CDNJS 사용법
Cloudflare CDNJS 웹사이트에 접속합니다.
검색 창에 sweetalert2를 입력합니다.
결과 목록에서 원하는 버전의 파일을 찾습니다.
CSS 파일에 대한 링크를 찾아서 해당 링크를 복사합니다.
예를 들어, 일반적인 방식으로 해당 파일의 링크를 아래와 같이 사용할 수 있습니다:

html
Copy code
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.7.10/sweetalert2.min.css" rel="stylesheet">
위 코드는 sweetalert2 버전 11.7.10의 CSS 파일을 Cloudflare CDNJS를 통해 로드하는 예시입니다. 이 링크를 HTML 파일의 <head> 섹션에 추가하면 해당 스타일시트가 적용됩니다.

CDNJS에서 원하는 파일을 정확하게 찾는 방법은 자주 변경될 수 있으므로, 최신 정보와 정확한 파일 경로는 CDNJS의 공식 웹사이트에서 직접 확인하는 것이 좋습니다.

User
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css " >
위의 것도 변환해줘.
ChatGPT
Bootstrap의 CSS 파일을 Cloudflare의 CDNJS에서 로드하려면, 해당 서비스에서 제공하는 URL을 사용할 수 있습니다. Cloudflare CDNJS를 통해 Bootstrap의 CSS를 참조하는 방법은 매우 간단합니다.

Bootstrap CSS를 Cloudflare CDNJS에서 로드하는 방법
Cloudflare CDNJS 웹사이트에 접속합니다.
검색 창에 bootstrap를 입력합니다.
결과 목록에서 원하는 버전을 찾습니다.
CSS 파일에 대한 링크를 찾아서 해당 링크를 복사합니다.
Bootstrap 5.3.0의 CSS 파일을 Cloudflare CDNJS를 통해 로드하는 예시 링크는 다음과 같습니다:

html
Copy code
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
이 링크를 사용하여 HTML 문서의 <head> 섹션에 추가하세요. 이렇게 하면 Bootstrap의 스타일이 적용됩니다.

위 URL은 Bootstrap 5.3.0 버전에 해당하는 CSS 파일을 Cloudflare CDNJS를 통해 참조하는 방법을 보여주는 것이며, 사용하는 버전에 따라 URL의 버전 번호를 적절히 변경해야 합니다. 항상 최신 버전을 사용하거나, 특정 프로젝트 요구사항에 맞는 버전을 사용하는 것이 좋습니다.

User
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.10/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.js"></script>

위의 코드도 마찬가지
ChatGPT
위에서 언급한 라이브러리들을 Cloudflare CDNJS에서 참조하기 위해 각각의 최신 URL을 찾아볼 수 있습니다. 다음은 Cloudflare CDNJS를 통해 Popper.js, Bootstrap, SweetAlert2, 그리고 Toastify JS를 로드하는 방법입니다:

Popper.js
Cloudflare CDNJS에서 Popper.js를 검색합니다.
필요한 버전의 파일을 찾고 해당 링크를 복사합니다.
html
Copy code
<script src="https://cdnjs.cloudflare.com/ajax/libs/@popperjs/core/2.11.8/umd/popper.min.js"></script>
Bootstrap JavaScript
Cloudflare CDNJS에서 Bootstrap를 검색합니다.
필요한 JavaScript 파일의 링크를 찾습니다.
html
Copy code
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
SweetAlert2
Cloudflare CDNJS에서 SweetAlert2를 검색합니다.
해당 JavaScript 파일의 링크를 복사합니다.
html
Copy code
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.7.10/sweetalert2.all.min.js"></script>
Toastify JS
Cloudflare CDNJS에서 Toastify JS를 검색합니다.
원하는 버전의 JavaScript 파일을 찾아 링크를 복사합니다.
html
Copy code
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.12.0/toastify.min.js"></script>
위의 코드들을 사용하여 HTML 문서의 <head> 섹션 또는 필요한 위치에 추가하세요. 이렇게 변경하면 Cloudflare의 CDNJS를 통해 해당 자바스크립트 라이브러리들을 로드할 수 있습니다. 주의할 점은 각 라이브러리의 최신 버전과 호환성을 확인하고 필요에 따라 버전을 조정해야 한다는 것입니다. Cloudflare CDNJS 웹사이트에서 최신 버전 정보와 정확한 링크를 확인하세요.

User
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

위의 코드도 마찬가지
ChatGPT
Summernote의 CSS와 JavaScript 파일을 Cloudflare의 CDNJS에서 찾아 사용하고자 할 때, 다음과 같은 방법으로 진행할 수 있습니다.

Summernote CSS & JS 파일 Cloudflare CDNJS에서 로드하기
Cloudflare CDNJS 웹사이트에 접속합니다.
검색 창에 summernote를 입력합니다.
결과 목록에서 원하는 버전의 파일을 찾습니다.
CSS 파일과 JavaScript 파일에 대한 링크를 찾아 해당 링크를 복사합니다.
예를 들어, Summernote 버전 0.8.18의 CSS와 JS 파일을 Cloudflare CDNJS를 통해 로드하는 코드는 다음과 같을 수 있습니다:

html
Copy code
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-lite.min.js"></script>
위의 링크를 HTML 문서의 <head> 섹션 또는 필요한 위치에 추가하세요. 이렇게 하면 Cloudflare CDNJS를 통해 Summernote의 스타일시트와 스크립트를 로드할 수 있습니다. 변경하기 전에 각 라이브러리의 최신 버전과 호환성을 확인하고 필요에 따라 버전을 조정하는 것이 중요합니다. 항상 공식 CDNJS 웹사이트에서 최신 버전 정보와 정확한 링크를 확인하세요.

User
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
ChatGPT
Bootstrap Icons를 Cloudflare의 CDNJS를 사용하여 로드하려면, 해당 서비스에서 제공하는 URL을 찾아야 합니다. 이렇게 하면 외부 CDN에 의존하지 않고, 안정적으로 리소스를 관리할 수 있습니다.

Bootstrap Icons를 Cloudflare CDNJS에서 로드하는 방법
Cloudflare CDNJS 웹사이트에 접속합니다.
검색 창에 bootstrap-icons를 입력합니다.
결과 목록에서 원하는 버전을 찾습니다.
CSS 파일에 대한 링크를 찾아서 해당 링크를 복사합니다.
예를 들어, Bootstrap Icons의 버전 1.11.0의 CSS 파일을 Cloudflare CDNJS를 통해 로드하는 예시 링크는 다음과 같습니다:

html
Copy code
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
이 링크를 사용하여 HTML 문서의 <head> 섹션에 추가하세요. 이렇게 하면 Bootstrap의 아이콘들이 적용됩니다.

위 URL은 Bootstrap Icons 1.11.0 버전에 해당하는 CSS 파일을 Cloudflare CDNJS를 통해 참조하는 방법을 보여주는 것이며, 사용하는 버전에 따라 URL의 버전 번호를 적절히 변경해야 합니다. 항상 최신 버전을 사용하거나, 특정 프로젝트 요구사항에 맞는 버전을 사용하는 것이 좋습니다. Cloudflare CDNJS에서 원하는 파일을 정확하게 찾는 방법은 자주 변경될 수 있으므로, 최신 정보와 정확한 파일 경로는 CDNJS의 공식 웹사이트에서 직접 확인하는 것이 좋습니다.

User

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.css">
ChatGPT
Toastify JS의 CSS 파일을 Cloudflare의 CDNJS에서 사용하려면, 해당 서비스에서 제공하는 URL을 찾아야 합니다. 이 과정을 통해 외부 CDN에 의존하지 않고 리소스를 안정적으로 관리할 수 있습니다.

Toastify JS CSS 파일을 Cloudflare CDNJS에서 로드하는 방법
Cloudflare CDNJS 웹사이트에 접속합니다.
검색 창에 toastify-js를 입력합니다.
결과 목록에서 원하는 버전을 찾습니다.
CSS 파일에 대한 링크를 찾아서 해당 링크를 복사합니다.
예를 들어, Toastify JS의 CSS 파일을 Cloudflare CDNJS를 통해 로드하는 방법의 예시 링크는 다음과 같을 수 있습니다:

html
Copy code
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.12.0/toastify.min.css" rel="stylesheet">
이 링크를 사용하여 HTML 문서의 <head> 섹션에 추가하세요. 이렇게 하면 Toastify JS의 스타일시트를 로드하게 됩니다.

항상 공식 CDNJS 웹사이트에서 최신 버전 정보와 정확한 링크를 확인하세요. 사용하는 버전에 따라 URL의 버전 번호를 적절히 변경하는 것이 중요합니다.

User
<script src="https://cdnjs.cloudflare.com/ajax/libs/@popperjs/core/2.11.8/umd/popper.min.js"></script>

위의 코드는 안되는 것 같다.
다른 cdn 없을까?
ChatGPT
만약 Cloudflare CDNJS에서 @popperjs/core 버전 2.11.8의 URL이 작동하지 않는 경우, 다른 대체 CDN을 사용해 볼 수 있습니다. 대체 CDN으로는 다음과 같은 옵션이 있습니다:

jsDelivr: 다른 많은 라이브러리들과 마찬가지로 Popper.js도 jsDelivr를 통해 제공됩니다. 여기에 Popper.js의 특정 버전을 참조하는 방법입니다:
html
Copy code
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
UNPKG: npm 패키지를 직접적으로 CDN으로 제공하는 UNPKG도 사용할 수 있습니다. Popper.js를 UNPKG에서 로드하는 방법은 다음과 같습니다:
html
Copy code
<script src="https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
위의 코드 중 하나를 HTML 문서 내에 삽입하면, Popper.js를 성공적으로 로드할 수 있습니다. CDNJS 링크가 작동하지 않을 때는 이와 같은 대체 CDN 서비스를 활용하는 것이 좋습니다. 또한, 항상 최신 버전을 확인하고, 필요에 따라 버전을 조정하세요.

반응형
저작자표시 비영리 변경금지

'IT tech Coding > javascript' 카테고리의 다른 글

Uncaught TypeError: Cannot read properties of null  (0) 2024.06.15
부트스트랩의 title 기능을 이용해서 td 요소에도 title 기능을 이용해서 좀 멋진 title을 만들고 싶다.  (0) 2024.05.16
자바스크립트, 특정 요소만, 특정페이지만 인쇄하기  (0) 2024.05.01
input에서 엔터치면 검색버튼 효과 만들기  (0) 2024.02.20
화면의 테이블을 csv로 저장시 한글깨짐 주의할 내용  (0) 2023.08.16
댓글