[jQuery] 제이쿼리 추가하기

소요 시간: 3분 조회수: 128

jQuery는 강력한 JavaScript 라이브러리로, HTML 문서 탐색, 이벤트 처리, 애니메이션, Ajax 상호 작용 등을 간편하게 구현할 수 있게 해줍니다. 이 블로그 글에서는 jQuery를 웹 프로젝트에 추가하는 여러 가지 방법을 전문가의 시각에서 상세히 설명합니다. 이 글을 통해 웹 개발에 jQuery를 도입하는 방법을 명확히 이해할 수 있을 것입니다.


1. CDN(Content Delivery Network) 사용

CDN을 사용하면 jQuery 라이브러리를 외부 서버에서 불러와 사용할 수 있습니다. 이 방법은 빠르고 간편하며, 전 세계 많은 사람들이 사용하기 때문에 브라우저 캐싱이 잘 되어 성능이 향상될 수 있습니다.

HTML 헤드에 추가

아래 코드를 HTML 문서의 <head> 태그 안에 추가합니다. 이 예제는 최신 안정 버전의 jQuery를 로드합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <!-- jQuery를 CDN에서 불러오기 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function() {
            // jQuery 코드를 여기에 작성
        });
    </script>
</body>
</html>

로컬 백업 설정

CDN 서버가 다운될 경우를 대비해 로컬 백업을 설정할 수 있습니다. 아래와 같이 <script> 태그를 사용하여 먼저 CDN에서 jQuery를 로드하고, 실패할 경우 로컬 파일을 로드하도록 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <!-- CDN에서 jQuery를 불러오고 실패 시 로컬 파일 사용 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="js/jquery-3.6.0.min.js"></script>');
    </script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function() {
            // jQuery 코드를 여기에 작성
        });
    </script>
</body>
</html>


2. jQuery 파일 다운로드 및 로컬 호스팅

jQuery 공식 사이트에서 라이브러리를 다운로드하여 직접 서버에 호스팅할 수도 있습니다.

다운로드

  1. jQuery 공식 다운로드 페이지에 접속합니다.
  2. 필요한 버전의 jQuery를 다운로드합니다.

HTML 파일에 추가

다운로드한 파일을 웹 서버의 적절한 위치에 저장한 후, HTML 파일에서 해당 파일을 불러옵니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <!-- 로컬 호스팅된 jQuery 파일 불러오기 -->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function() {
            // jQuery 코드를 여기에 작성
        });
    </script>
</body>
</html>


3. 패키지 매니저 사용

npm이나 Yarn과 같은 패키지 매니저를 사용하여 jQuery를 프로젝트에 추가할 수도 있습니다. 이 방법은 주로 Node.js 기반 프로젝트에서 사용됩니다.

npm 사용

npm을 사용하여 jQuery를 설치합니다.

npm install jquery

설치 후, 번들러(예: Webpack)를 사용하여 jQuery를 불러옵니다.

// JavaScript 파일에서 jQuery를 불러오기

import $ from 'jquery';



$(document).ready(function() {

    // jQuery 코드를 여기에 작성

});

Yarn 사용

Yarn을 사용하여 jQuery를 설치합니다.

yarn add jquery

설치 후, 번들러를 사용하여 jQuery를 불러옵니다.

// JavaScript 파일에서 jQuery를 불러오기

import $ from 'jquery';



$(document).ready(function() {

    // jQuery 코드를 여기에 작성

});


결론

프로젝트의 규모와 필요에 따라 적합한 방법을 선택하면 됩니다. 간단한 HTML 페이지에서는 CDN을 사용하는 것이 가장 빠르고 간편합니다. 대규모 프로젝트나 빌드 프로세스가 포함된 프로젝트에서는 npm 또는 Yarn과 같은 패키지 매니저를 사용하는 것이 더 적합할 수 있습니다.

인기글

제이쿼리 리스트