제이쿼리(jQuery) 란?
HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 자바스크립트 라이브러리다.
jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다.
따라서 jQuery를 사용하면 웹 페이지에 쉽게 다양한 연출을 구현할 수 있다.
jQuery 알아가기
1) 구조
- .ready(handler) : DOM이 로딩되면 실행되는 이벤트, 로드 직후 실행한다.
— 대표 코드
$(document).ready(handler)
$(handler) - $(element) : element를 인수로 전달하여 객체로 사용한다.
- 이벤트 : 호출되는 시점에 해당 기능을 수행하고 호출되지 않으면 실행되지 않는다. 모든 함수가 event와 연결된 형태를 가진다.
— 대표적인 이벤트 종류
click: element를 마우스로 눌렀다가 뗄 때 발생
hover: element에 마우스가 진입하고 벗어날 때 발생
submit: form 내용을 전송할 때 발생
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(".div").css("background-color","red");
$(".div").html("안녕하세요!");
$(".div").click(function() {
alert("안녕하세요!");
});
});
</script>
</head>
<body>
<div class="div"></div>
</body>
</html>2) Ajax(Asynchronous JavaScript And XML)
- url: 서버에 매핑 되어있는 주소 호출한다. 해당 주소로 요청을 보낸다.
- type
- get: 데이터를 Body에 담지 않고 쿼리스트링을 통해 전송한다. 서버로부터 정보를 조회할 때 사용한다.
- post: 전송해야 될 데이터를 Body에 담아서 전송한다. 따라서 내용이 보이지 않고, 대용량 데이터를 보낼 수 있다. - data: 서버에 전송할 객체 또는 문자열이다.
- dataType: 서버에서 반환되는 데이터 형식을 지정한다.
— 지정 가능한 값
xml: XML 형식 문서
html: HTML 텍스트 데이터
json: JSON 형식 데이터로 평가하고 javascript 객체로 변환
text: 일반적인 텍스트 데이터 - success: ajax 통신이 성공했을 때 호출되는 이벤트로 리턴된 데이터를 받는다.
- error: ajax 통신이 실패했을 때 호출되는 이벤트이다.
$.ajax({
url:"/list.do",
type:"GET",
success:function(data) {
alert("리스트 조회 성공");
}, error: function(request, status, error) {
if(request.status != '0') {
alert("code: " + request.status + "\r\nmessage: " + request.responseText + "\r\nerror: " + error);
}
}
});jQuery 장점
- 누구나 쉽게 구현할 수 있고, 레퍼런스가 많아서 접근성이 좋다.
- DOM element 조작이 쉽고 간편하다.
- css만으로 처리가 어려울 때 스타일 적용이 용이하다.
- 애니메이션 구현 등 다양한 기능을 제공한다.
- Ajax 애플리케이션을 쉽게 개발할 수 있다.
그런데 왜?
2012년 이후로 jQuery 인기도가 하락세를 타고 있다고 한다. jQuery와 react를 비교하는 포스팅도 종종 눈에 띄곤 한다. 왜일까?
react를 예를 들어 비교하자면, react는 DOM과 직접 작동하는 jQuery와 달리 Virtual DOM을 사용한다. 이것은 데이터가 많을 때 jQuery를 사용하면 DOM 조작이 직접 발생하여 성능이 느려지는 것을 의미한다.
또한 jQuery에서는 클라이언트 사이드 내에서는 작업 공간을 분리하지 않고 코드를 작성하는 경우가 많기 때문에 규모가 큰 환경에서 유지보수가 힘들어진다. (알고 싶지 않았다.)
그러나 jQuery의 장점이 대체 불가라는 것도 사실이다. 개인적으로 내가 은퇴할 때 혹은 그 이후로도 생명을 유지할 것이라 생각한다.
추후에 react에 대해서 포스팅을 할 예정인데 그 때 더 자세한 이야기를 해보도록 해야겠다.
# References
1] https://ko.wikipedia.org/wiki/JQuery
2]http://wiki.hash.kr/index.php/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC
3] https://mygumi.tistory.com/204
4] https://medium.com/@hsoh871020/medium%EC%97%90-%EC%BD%94%EB%93%9C-%EC%9D%B4%EC%81%98%EA%B2%8C-%EB%84%A3%EA%B8%B0-gist-8490505f1ea1
'개발 Note > JAVASCIPRT' 카테고리의 다른 글
| [JAVASCRIPT] - vue.js로 차트 만들기(2) (0) | 2022.04.24 |
|---|---|
| [JAVASCRIPT] - vue.js로 차트 만들기(1) (0) | 2022.04.17 |
| [JAVASCRIPT] promise와 callback (0) | 2022.04.12 |
| [JAVASCRIPT] React (0) | 2022.04.01 |
