[jQuery] jQuery CDN을 통한 라이브러리 기능 및 동작 테스트

22 Dec 2023

jQuery

jQuery는 웹 개발자들 사이에서 널리 사용되는 JavaScript 라이브러리 중 하나로, HTML 문서의 구조화, 이벤트 처리, 애니메이션 등의 기능을 간편하게 구현할 수 있게 해줍니다. 이번 글에서는 jQuery를 CDN을 통해 가져와서 기본적인 기능과 동작을 테스트하는 방법에 대해 알아보겠습니다.

CDN을 이용한 jQuery 라이브러리 추가

CDN(Content Delivery Network)을 이용하면 웹 사이트에서 jQuery 라이브러리를 직접 다운로드하고 호스팅할 필요 없이 외부 서버에서 제공되는 jQuery 파일을 로드할 수 있습니다. 이를 통해 빠른 속도와 캐싱 기능 등을 활용할 수 있습니다.

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

위와 같이 웹 페이지의 <head> 태그 내에 jQuery CDN을 로드하는 스크립트를 추가합니다.

기본적인 jQuery 동작 테스트

간단한 HTML 문서를 작성하고, 해당 문서에서 jQuery를 사용하여 기본적인 동작을 테스트해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Test</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="click-me">Click Me</button>
  <p id="message"></p>

  <script>
    $(document).ready(function(){
      $("#click-me").click(function(){
        $("#message").text("버튼을 클릭했습니다.");
      });
    });
  </script>
</body>
</html>

위 코드는 버튼을 클릭했을 때 해당 메시지가 출력되도록 하는 간단한 jQuery 테스트 예제입니다.

결론

이제 jQuery 라이브러리를 CDN을 통해 가져와서 기본적인 기능 및 동작을 테스트하는 방법에 대해 알아보았습니다. jQuery를 사용하여 다양한 웹 프로젝트를 보다 효율적으로 구현할 수 있으니, 필요에 따라 적극적으로 활용해보시기를 권장합니다.

참고: jQuery 공식 웹사이트