Article

jQuery CDN으로 최신 및 특정 버전 로드하기

2018. 8. 27.

프로젝트에 jQuery를 포함시킬 때 매번 파일을 다운로드하고 관리하는 것은 번거롭습니다. CDN(Content Delivery Network)을 활용하면 npm이나 yarn 같은 패키지 관리자 없이도 간단하게 jQuery를 로드할 수 있습니다.

최신 버전 자동 로드

항상 최신 버전의 jQuery를 자동으로 가져오는 가장 간단한 방법입니다:

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

프로토콜 상대 URL(protocol-relative URL)을 사용할 수도 있습니다:

<script src="//code.jquery.com/jquery-latest.min.js"></script>

주의: 최신 버전 자동 로드는 개발 단계에 편리하지만, 예상치 못한 업데이트로 인한 호환성 문제가 발생할 수 있으므로 프로덕션 환경에서는 피해야 합니다.

특정 버전 고정하기

프로덕션 환경에서는 버전을 명시적으로 지정하여 안정성을 확보해야 합니다.

jQuery 3.x 계열 (최신)

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

jQuery 2.x, 1.x 계열 (레거시)

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

Google Hosted Libraries 활용

Google이 제공하는 CDN도 좋은 대안입니다:

<!-- 최신 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.min.js"></script>

<!-- 특정 버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

CDN 장애에 대비한 Fallback

CDN이 다운될 경우를 대비하여 로컬 파일로 폴백하는 패턴:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    if (!window.jQuery) {
        var script = document.createElement('script');
        script.src = '/js/jquery-3.6.0.min.js';
        document.head.appendChild(script);
    }
</script>

또는 더 간단한 방식:

<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>

환경별 권장 전략

마치며

CDN을 올바르게 활용하면 jQuery 의존성을 간단히 관리할 수 있습니다. 개발 환경에서는 최신 버전으로 유연하게, 프로덕션에서는 특정 버전으로 안정적으로 운영하는 것이 핵심입니다. Fallback 패턴까지 적용하면 CDN 장애 상황에서도 서비스 중단을 방지할 수 있습니다.