제이쿼리(J-Query)
제이쿼리란?
쿼리는 사전적으로 '질의한다'는 의미를 가진다. 그리고 j는 자바스크립트를 의미한다고 하면 제이쿼리는
"자바스크립트에게 질의한다"는 의미를 가진다.
즉, 자바스크립트에게 무언가를 요청하는 오픈소스 기반의 자바스크립트 라이브러리인 것이다.
제이쿼리는 결국 자바스크립트를 보다 쉽게 사용하기 위한 라이브러리라고 생각하면 된다.
CDN방식은 실시간으로 원격(=클라우드)에 있는 소스를 가져와서 사용할 수 있도록 해주는데, J-Query는 이러한 CDN 방식을 채택하고 있기 때문에 굳이 로컬에 다운로드하지 않고도 사용할 수 있다.
여기서 제이쿼리의 시작 문법인 "$"(레퍼)는 사전적으로 '감싸다'라는 의미를 가지고 있는데, 이는 즉슨 제이쿼리가 자바스크립트를 감싸고 있는 일종의 틀(=라이브러리)라는 것이다.
제이쿼리 문법
-- $로 시작한다. (JQeury 의미)
-- 기본 문법 구조
$(제어대상).method1().method2()
여기서 method1().method2()와 같이 메소드를 연속적으로 사용하는 형태를 '체인'이라고 한다.
즉, 제이쿼리는 자바스크립트를 사용자가 편리하게 사용할 수 있도록 자바스크립트의 기능을 개선해둔 것이라고도 볼 수 있다.
제이쿼리 예시 코드
comjquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>제이쿼리</title>
</head>
<body>
<p id="pp">Hello J-Query</p>
<button id="red" onclick="fn_click('red')">red</button>
<button id="blue" onclick="fn_click('blue')">blue</button>
<script src="comjquery.js"></script>
</body>
</html>comjquery.js
// 디폴트 컬러 설정
$(document).ready(function () { // 여기서 ready는 자바스크립트의 onload 함수와 동일
$("#pp").css("color", "green");
});
// 버튼 클릭 시 글자 색상 변경
function fn_click(color) {
$("#pp").css("color", color);
}그런데 만약 '$'를 제이쿼리 이 외에도 사용해야한다면 어떨까? $는 제이쿼리를 시작하는 문법이라고 앞서 설명했다. 이 말인 즉슨 $를 붙이고 코드를 쓴다면 제이쿼리의 목적이 아니지만 컴퓨터는 제이쿼리로 인식을 할 것이다.
이 경우, 어떻게 분리를 할 수 있을까?
안전하게 제이쿼리 사용하기
가장 간단한 방법은 바로 $ 대신 jQuery를 명시해주는 것이다.
그런데 매번 이렇게 사용하기에는 번거롭다.
따라서 콜백으로 $를 전달하면 보다 안전하게 제이쿼리를 사용할 수 있다.
function($){
실행코드
}(jQuery)와 같이 전달인자로 $=jQuery를 명시해준다면 다른 외부의 언어와 혼용해서 사용할 때 $가 jQuery임을 명시해줄 수 있다
다만 이러한 경우는 극히 드물고, 무엇보다 자바스크립트 안에서만 사용한다면 대부분의 경우, $는 jQuery를 의미한다.
제이쿼리의 이벤트
이벤트란?
-- 시스템에서 일어나는 사건을 의미
-- JS나 제이쿼리에게 이벤트란 브라우저에 일어나는 사건을 의미(클릭, 마우스 이동, 타이핑, 페이지 로딩 등)
-- 이벤트 발생 시 작동할 로직을 시스템에게 알려두면 이벤트 발생 시 로직이 호출
제이쿼리 이벤트
-- 크로스 브라우징 문제를 해결
-- bind로 이벤트 핸들러 설치, unbind로 제거
-- trigger로 이벤트 핸들러 강제로 실행
-- click, ready와 같이 다양한 이벤트 헬퍼 제공
-- live를 이용하면 현재 존재하지 않는 엘리먼트에 이벤트 핸들러를 설치 가능
AJAX란
Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법
API와 제이쿼리 AJAX
-- 프론트엔드는 백엔드에 정보를 요청 시 특별한 규칙에 맞아야 한다.
-- 이러한 사용 규칙을 제공하는 것이 API
-- 오픈 API는 누군가가 백엔드 환경을 미리 만들어놓고 주소와 사용 규칙을 공개한 APi
-- 오픈 api에는 지도, 결제, 인공지능 같은 고급 기능까지 공개하는 소스도 있음
AJAX로 API 데이터 연결해서 가져오기
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>AJAX로 도서 검색 데이터 가져오기</title>
</head>
<body>
<h1>이미지 검색</h1>
<input id="book" type="text" placeholder="검색할 이미지를 입력해주세요" />
<button id="submit">검색</button>
<script>
const query = document.getElementById("book").value.trim();
$("#submit").click(function (query) {
$.ajax({
url:
"https://dapi.kakao.com/v2/search/image?query=" + $("#book").val(),
method: "GET",
headers: {
Authorization: "KakaoAK 8ab482f16b64c0ceecceee477aba4634",
},
success: function (response) {
console.log("성공: ", response);
for (let i = 0; i < response.meta.total_count; i++) {
$("body").append(
"<br><span>" +
response.documents[i].display_sitename +
"</span><br>"
);
$("body").append(
"<img src= '" + response.documents[i].thumbnail_url + "'/><br>"
);
}
},
error: function (error) {
console.log("실패: ", error);
},
});
});
</script>
</body>AJAX 대표 메서드
<p style="background-color: yellow">I would like to say:</p>- appned(): 대상 태그의 자식 요소로 삽입
<script>
$("p").append("<strong>Hello</strong>");
</script>append 적용 후
- after(): 대상 태그 하위에 삽입
<script>
$("p").after("<strong>Hello</strong>");
</script>after 적용 후
- wrap(): 대상 태그를 감싸는 상위 태그 Element 삽입
<script>
$("p").wrap("<div><div><p></p></div></div>");
</script>wrap 적용 후
- remove(): 대상 태그를 감싸는 상위 태그 Element 삽입
<p>You</p>
<button>Call Remove</button>
<script>
$("button").click(function () {
$("p").remove();
});
</script>remove 적용 전
remove 적용 후
그 외 더 다양한 메소드가 많으니 아래 사이트 참고
: https://api.jquery.com/category/ajax/
