쯔이's Dev

JS(10). jQuery (1)정의 본문

JS

JS(10). jQuery (1)정의

jjhim531 2025. 1. 10. 21:25
반응형

* jQuery란?

    • JavaScript 기반 라이브러리로 복잡한 JavaScript 구문을 간소화해준다.
    • 주요 장점
      1. DOM 조작: HTML 요소를 쉽게 선택, 수정, 추가, 삭제 가능.
      2. AJAX 지원: 서버와 비동기 통신을 간단하게 구현.
      3. 확장 플러그인 제공: 슬라이드, 차트, 캘린더 등 다양한 기능 제공.
      4. 코드 간결화: 복잡한 JavaScript 코드도 몇 줄로 간소화

* jQuery 라이브러리 연결 방법:

  • 오프라인 방식: jQuery 파일을 다운로드하여 로컬에서 경로를 지정.
  • CDN 방식: CDN URL을 통해 외부에서 jQuery 라이브러리를 불러옴.
    • CDN 방식에서는 보안을 강화하기 위해 `integrity`와 `crossorigin` 속성을 함께 사용하는 것이 권장된다. 이는 CDN 서버에서 제공되는 파일이 손상되거나 위조되지 않았는지 확인하는 데 도움을 준다.
<!-- CDN 방식 -->
<script 
  src="https://code.jquery.com/jquery-3.7.1.min.js" 
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
  crossorigin="anonymous">
</script>

<!-- 오프라인 방식 -->
<script src="/path/to/jquery-3.7.1.min.js"></script>

* jQuery 코드 연결:

  • HTML <head> 태그 내에서 <script> 태그를 사용해 jQuery 파일을 추가.
  • 코드에 이미 CDN 방식으로 최신 버전의 jQuery와 jQuery UI 라이브러리가 연결되어 있음.

 

 

>> CDN(Content Delivery Network) 방식 

웹 콘텐츠(예: JavaScript, CSS 파일 등)를 전 세계에 분산된 서버 네트워크를 통해 사용자에게 제공하는 방식이다.

사용자와 가장 가까운 서버에서 파일을 제공하여 빠르고 안정적인 액세스를 지원한다.

CDN 방식은 빠른 로드 속도와 최신 버전 유지 등의 장점을 제공하지만, 보안 위협을 방지하기 위해 `integrity`와 `crossorigin` 속성을 함께 사용하는 것이 중요하다.

1. integrity

- 파일의 무결성을 확인하기 위한 속성.

- CDN 서버에서 제공된 파일이 변조되지 않았는지 확인하기 위해 SHA256 해시값을 사용.

- 브라우저가 파일을 다운로드한 후 해시값을 계산하고 `integrity` 속성 값과 비교.

- 해시값이 다를 경우, 브라우저는 파일을 실행하지 않음.

<script 
    src="https://code.jquery.com/jquery-3.7.1.min.js" 
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
    crossorigin="anonymous"></script>


sha256: 파일의 해시값을 계산하는 알고리즘(여기서는 SHA-256).
/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=: 실제 파일의 해시값.

2. crossorigin

- CORS(Cross-Origin Resource Sharing) 정책 설정.

- 필요성 : 외부 리소스를 로드할 때, 무결성 검사를 활성화하려면 crossorigin 속성을 설정해야 한다.

- CDN 리소스가 다른 도메인에서 제공되는 경우, 인증 정보를 포함하지 않도록 설정하기 위해 `anonymous`를 사용.

  • anonymous: 인증 정보를 포함하지 않는 요청.
  • use-credentials: 인증 정보를 포함하는 요청(예: 쿠키, HTTP 인증).

 

CDN 방식의 개념

  • 중앙 서버 대신 분산된 서버 네트워크 사용:
    • 파일이 전 세계 여러 지역의 CDN 서버에 저장된다.
    • 사용자는 가장 가까운 서버에서 파일을 다운로드받아 빠르고 안정적인 액세스를 제공한다.
  • jQuery에서 CDN 활용:
    • jQuery 같은 JavaScript 라이브러리를 웹사이트에 포함할 때, 직접 다운로드하지 않고 CDN 서버의 URL을 통해 불러온다.
    • 예시 - code.jquery.com CDN 서버에서 jQuery 라이브러리를 불러온다.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

* 장점

  1. 빠른 로드 속도: 사용자와 가까운 CDN 서버에서 리소스를 제공.
  2. 자원 관리: 로컬 서버에 파일을 저장할 필요 없음.
  3. 캐싱 효과: 브라우저가 CDN 파일을 캐싱해 재사용 가능.
  4. 최신 버전 유지: 항상 최신 라이브러리 제공.
  5. 안정성: 분산된 서버 네트워크로 고가용성 보장.

* 단점

  1. 인터넷 연결 의존: 인터넷이 없으면 파일을 로드할 수 없음.
  2. 외부 서버 의존성: CDN 서버가 문제가 발생하면 영향을 받음.
  3. 보안 문제: 신뢰할 수 없는 CDN URL 사용 시 악성 코드 위험.

CDN 방식과 오프라인 방식 비교

속도 빠름 (가까운 서버 제공) 로컬 서버 속도에 의존
유지보수 최신 버전 자동 제공 수동 업데이트 필요
의존성 인터넷 연결 필수 로컬 파일로 작동 가능
설치 용이성 간단 (URL 복사 및 붙여넣기) 파일 다운로드 및 저장 필요
보안 integrity와 crossorigin으로 위조 방지 가능 추가 설정 필요 없음
캐싱 효과 높음 (공통 캐싱 효과 발생) 개별 관리

 

728x90
반응형

'JS' 카테고리의 다른 글

JS(9). 이벤트핸들러 (3)접근, 제거  (1) 2025.01.08
JS(9). 이벤트핸들러 (2)함수 종류  (0) 2025.01.07
JS(9). 이벤트핸들러 (1)모델 종류  (0) 2025.01.06
JS(7). DOM(2). DOM 요소 선택방법  (0) 2025.01.02
JS(6). 클로저  (2) 2024.12.27
'JS' Related Articles more