오늘은 Vue2를 기본적으로알아보는 수업을 끝내고 jQery(이하 제이쿼리)에 대해서 배우겠다.
제이쿼리는 웹 개발에서 오랫동안 사용되어온 자바스크립트 라이브러리로, HTML문서 탐색, 문서 조작, 이벤트 처리, 애니메이션 등을 단순화하고 개발자들에게 편의성을 제공한다. 그러나 최근 몇 년간 웹 개발의 추세가 변하면서 제이쿼리의 인기와 사용 빈도가 점차 감소하고 있다.
그 이유로는 주요한 이유 중 하나로 자바스크립트 언어 자체의 발전이다. 최근 웹 브라우저들은 웹 표준을 준수하고 웹 API를 널리 지원하며, 웹 개발에 필요한 많은 기능들이 내장되어 있습니다. 이로 인해 웹 개발자들은 제이쿼리를 사용하지 않고도 순수한 자바스크립트로 웹 애플리케이션을 개발할 수 있게 되었다.
또 다른 이유는 프론트엔드 개발의 패러다임 변화이다. 최근의 웹 개발은 주로 리액트, 앵귤러, 뷰 등의 모던자바스크립트 프레임워크와 라이브러리를 활용하는 추세이다. 이들 프레임워크와 라이브러리는 가상 DOM,컴포넌트 기반개발, 상태 관리 등의 혁신적인 기술을 제공하여 제이쿼리보다 더 효율적이고 유지보수가 쉬운 웹 애플리케이션을 구축할 수 있게 해주고 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/hello.jsp</title>
<script src="
https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
"></script>
</head>
<body>
<div class="container">
<input type="text" id="inputMsg" placeholder = "문자열 입력..."/>
<button id="sendBtn">전송</button>
<p id="result"></p>
</div>
<script>
//위의 input 요소에 문자열을 입력하고 전송버튼을 누르면 입력한 문자열을 p 요소의 innerText에 출력되도록
//출력되도록 프로그래밍해보세요
document.querySelector("#sendBtn").addEventListener("click", ()=>{
const msg = document.querySelector("#inputMsg").value;
document.querySelector("#result").innerText=msg;
});
</script>
</body>
</html>바닐라js로 input 요소에 문자열을 입력하고 전송버튼을 누르면 입력한 문자열을 p 요소의 innerText에 출력되도록 프로그래밍 해보았다.
제이쿼리는 $로 시작한다. $( )는 function$( ){ }와 비슷하다.
$("#sednBtn").on("click",()=>{
const msg = $("#inputMsg").val();
$("#result").text(msg);
});위에 바닐라 js로 작성한 코드와 제이쿼리를 사용해 동일한 기능을 제공하는 코드이다.
제이쿼리는 바닐라js와달리 제이쿼리의 기능을 담긴 배열을 return해준다.
.on은 이벤트 등록할때 사용. .val은 value에 관한 동작 .text는 innertText에 관련된 동작.
경우에 따라서 어떠한 동작은 체인 형태로 여러개가 가능하다.
$().action().action2().action3()....
제이쿼리를 동작하고나서 다시 리턴해주는 것이 제이쿼리이기 때문에 뒤에 동작을 더 추가할 수 있다.
$(".my-class").text("김구라").css("color","red")
페이지로딩 없이 이미지 업로드해보기
이미지를 선택해서 업로드 버튼을 누르면 페이지 전환없이 이미지를 업로드하고 업로드된 파일의 정보를 응답(json)받아서 id가 imageWrapper인 div의 자식요소에 img요소를 추가해서 업로드된 이미지가 바로 보이도록 프로그래밍
<h3>이미지 업로드 폼</h3>
<form action="${pageContext.request.contextPath }/image/upload" method="post"
enctype="multipart/form-data" id="uploadForm">
이미지<input type="file" name="image" accept=".jpg, .jpeg, .JPG, .JPEG, .gif, png, .PNG"/>
<button type="submit">업로드</button>
</form>Controller에서 이미지를 받아서
//이미지 업로드 요청처리
@ResponseBody
@RequestMapping(method= {RequestMethod.POST}, value="/image/upload")
public Map<String, Object> imageUpload(MultipartFile image, HttpServletRequest request) {
String orgFileName=image.getOriginalFilename();
String realPath=request.getServletContext().getRealPath("/resources/upload");
String filePath=realPath+File.separator;
File upload=new File(filePath);
if(!upload.exists()) {//만일 디렉토리가 존재하지 않으면
upload.mkdir(); //만들어 준다.
}
//저장할 파일 명을 구성한다.
String saveFileName=
System.currentTimeMillis()+orgFileName;
try {
//임시 폴더에 저장된 업로드된 파일을 원하는곳에 원하는 이름으로 이동시키기(전송하기)
image.transferTo(new File(filePath+saveFileName));
System.out.println(filePath+saveFileName);
}catch(Exception e) {
e.printStackTrace();
}
//Map객체에
Map<String, Object> map = new HashMap<>();
//"imagePath"라는 키값으로 업로드된 이미지를 요청할 수 있는 경로를 담아서
map.put("imagePath", "/resources/upload/"+saveFileName);
//리턴해주면 {"imagePath":"xxx"}형식의 json문자열이 응답된다.
return map;
}insert 폼에 ajax를 이용하여 페이지 로딩없이 구현
<h3>이미지 업로드폼</h3>
<form action="${pageContext.request.contextPath }/image/upload" method="post" enctype="multipart/form-data" id="uploadForm">
이미지 <input type="file" name="image" accept=".jpg, .jpeg, .JPG, .JPEG, .gif, .png, .PNG">
<button type="submit">업로드</button>
</form>
<br>
<div id="imageWrapper"></div>
<script src="${pageContext.request.contextPath }/resources/js/gura_util.js"></script>
<script>
document.querySelector("#uploadForm").addEventListener("submit", (e)=>{
//폼 전송 막기
e.preventDefault();
//gura_util.js 에 있는 함수를 호출하면서 폼의 참조값 전달
/*
ajaxFormPromise(e.target)
.then(res=>res.json())
.then(data=>{
});
*/
//만일 gura_util 을 사용하지 않는다면
//서버에 전송할 data 를 구성한다.
let data=new FormData(e.target);
// fetch() 함수가 리턴하는 Promise 객체를
fetch("${pageContext.request.contextPath }/image/upload",{
method:"post",
body:data
})
.then(res=>res.json())
.then(data=>{
console.log(data);
//data 는 {imagePath:"/resources/upload/xxx"} 형식의 object 이다.
const imgString=`<img src="${pageContext.request.contextPath }\${data.imagePath}">`;
// img 요소를 표현하고 있는 문자열을 HTML 형식으로 해석이 되도록 대입해준다.
document.querySelector("#imageWrapper").innerHTML=imgString;
});
});
</script>
'수업내용' 카테고리의 다른 글
| 20230627 수업내용🤣🤣🤣 (0) | 2023.06.27 |
|---|---|
| 20230626 수업내용🤦♂️🤦♂️🤦♂️ (0) | 2023.06.26 |
| 20230622 수업내용🤦♂️🤦♂️🤦♂️ (0) | 2023.06.23 |
| 20230620 수업내용😢😢😢 (0) | 2023.06.20 |
| 20230619 수업내용🙌🙌🙌 (0) | 2023.06.19 |
댓글