I T H

[스프링프로젝트연습 9] 스프링 프로젝트 구현 - jQuery 연동 본문

Spring Basic

[스프링프로젝트연습 9] 스프링 프로젝트 구현 - jQuery 연동

thdev 2024. 1. 22. 14:34

1. 컨트롤러 호출을 통한 페이지 접속까지 테스트를 완료한 이후 제이쿼리를 연동해보고자 한다.

2. 제이쿼리 라이브러리는 다운로드하여 사용하는 방법과 CDN (URL호출) 방법으로 사용한다.

 

- CDN : 제이쿼리가 다른 서버에 올려져 있는 네트워크 상의 파일을 연결시켜 사용하는 방식

 

해당 문서에서는 제이쿼리 라이브러리를 적용함으로써 화면 내 버튼 이벤트 등을 처리하는 테스트 방법에 대해 설명한다.

 

1.CDN 방법

[ JQuery CDN 적용 버전 정보 ]

 

https://releases.jquery.com/ 

 

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

 

 

현재 기준으로 최신 버전인 3.7.0 버전을 사용

 

테스트 구축 시에는 압축되지 않은 파일인 uncompressed 버전을 사용

 

Uncompressed 링크를 클릭하면 아래와 같이 복사할 CDN 정보가 팝업으로 출력됨.

해당 정보를 복사하여 JSP 파일 내 <head> 태그 안에 삽입함.

 

 

라이브러리 사용 테스트를 위해 버튼 1개를 화면에 출력하고 해당 버튼에 클릭 이벤트를 적용하여 버튼 클릭시 알럿 메시지를 출력해 보는 것으로 함.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.js" 
	integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" 
	crossorigin="anonymous"></script>
</head>
<body>
	<h2>Hello Home!!!</h2>
	<button id="test">button</button>
</body>
<script type="text/javascript">
	$("#test").on("click", function(){
		alert("onClick이벤트발생")
	});
</script>
</html>

 

 

제이쿼리가 적상 작동 되는지 버튼 클릭시 이벤트 적용 유무 확인.

 

 

 

2. 다운로드 방식

이번에는 다운로드 방식으로 해보겠다.아래 링크로 들어가면 아래와 같은 화면이 뜸.

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 

Download jQuery 클릭

 

 

원하는 버전을 클릭한다.

 

 

다른이름으로 저장 클릭함.

 

원하는 폴더에 붙여넣어 준다.

 

이제 해당 경로를 <head> 사이에 적어주면된다.

 

다운로드 방식으로 했을경우에도 정상 작동 되는것을 볼수있다.

 

 

'Spring Basic' 카테고리의 다른 글

[스프링프로젝트연습 11] 스프링프로젝트 구현 - ajax사용/CRUD - INSERT  (0) 2024.01.22
[스프링프로젝트연습 10] 스프링 프로젝트 구현 - ajax 사용법  (0) 2024.01.22
[스프링프로젝트연습 7] 스프링 프로젝트 구현 - Log4j2 연동  (0) 2024.01.22
[스프링프로젝트연습 6] 스프링 프로젝트구현 - SVN 연동  (0) 2024.01.22
[스프링프로젝트연습 5] 스프링 프로젝트 구현 - DB연동  (0) 2024.01.22
'Spring Basic' Related Articles more