jQuery(간단히 살펴보기)

빠르고 작지만 기능이 풍부한 자바스크립트 라이브러리
손쉬운 DOM 조작, 이벤트 핸들링, 애니메이션, Ajax 작업
API 크로스 브라우징 지원

 

최근 경향

브라우저와 Javascript가 발전하면서 클라이언트 단에서 렌더링 + 서버는 렌더링에 필요한 데이터만 제공(REST API / GraphQL)

jQuery의 가장 큰 장점은 DOM 조작이 쉽고 크로스 브라우징 이슈가 적다는 것이었는데 최근엔 DOM을 직접 조작하기보다 상태 관리 라이브러리/프레임워크를 통해 컴포넌트 단위의 상태(state)에 따라 DOM을 렌더링하는 추세

간단히 살펴보기

jQuery 작동 방식

파일 다운로드

jQuery 파일을 다운받아 HTML 파일 위치와 같은 폴더에 저장한다. 압축 버전은 성능 향상에 좋고 비압축 버전은 디버깅에 주로 쓰인다. 압축 파일로 디버깅을 하려면 소스맵 파일을 다운받으면 된다. 파일명에 버전 숫자가 포함돼있다면 jquery.js로 고친다.

CDN

서버에 jQuery를 호스팅하기에 성능상 좋다. 웹페이지 방문자가 이미 같은 CDN에서 jQuery를 다운받은 상황이면 다시 다운받을 필요 없다는 게 장점이다.   

<a href="http://jquery.com">jQuery</a>
<script src="jquery.js"></script>
<script>
  //코드
</script>

NPM/YARN으로 다운

npm install jquery
yarn add jquery

 

문서가 준비되면 코드 실행하기

HTML 로딩이 끝난 후 + 화면의 모든 요소가 브라우저의 메모리에 올라간 다음 코드가 돌아가는지 확인하기 위해 onload 함수로 작동 여부를 테스트한다. 주로 이미지를 조작할 때 사용한다. (JS 내장 이벤트)

window.onload = function(){
	alert("welcome");
};

웹페이지의 이미지가 모두 다운로드를 마칠 때까지 코드가 작동하지 않는다면? HTML 파싱+DOM 트리가 생성된 직후 코드를 실행하도록 ready event를 사용한다. document는 window의 자식 객체지만 window.onload보다 더 빠르게 실행되고 중복 사용해도 선언 순서대로 실행된다.(jQuey 전용 이벤트)

$(document).ready(function(){
	//코드
});

jQuery는 jQuery라 부르는 window 객체와 $를 통해 속성과 메서드를 노출한다. 

event.preventDefault();를 사용하면 이벤트의 기본 동작을 차단할 수 있다.

<a href="http://jquery.com">jQuery</a>
<script src="jquery.js"></script>
<script>
//dom 트리가 생성된 직후 코드가 실행되도록 ready event 안에 jQuery 코드를 작성한다
  $(document).ready(function(){ 
  	$("a").click(function(event){
    	alert("클릭해도 jquery.com으로 넘어가지 않습니다");
        event.preventDefault();
        });
     });
</script>

 

HTML 클래스 추가, 삭제하기

<style>
a.test{
	font-weight: bold;
}
</style>

$("a").addClass("test"); //추가
$("a").removeClass("test"); //삭제

 

특별한 효과

a 링크를 클릭했을 때 해당 주소로 이동하지 않고 링크가 천천히 사라진다.

$("a").click(function(event){
  event.preventDefault();
  $(this).hide("slow");
});

 

콜백 함수

다른 함수의 인자로 쓰여 부모 함수가 완료된 후 실행되는 함수. 부모 함수가 완료될 때까지 브라우저는 다른 함수나 작업을 수행할 수 있다. 콜백 함수를 부모 함수로 넘기는 법을 아는 게 중요하다.

인자가 없는 콜백 함수

$.get()이 myhtmlpage.html 페이지를 받고 나면 myCallBack() 함수를 실행한다.

이때 myCallBack은 문자열이 아니라 변수로 쓰인 () 없는 함수명.

$.get("myhtmlpage.html", myCallBack);

 

인자가 있는 콜백 함수

myCallBack(param1, param2)를 즉시 실행하여 myCallBack()의 반환 값을 $.get()의 두 번째 매개변수로 넘겨주기 때문에 이 코드는 잘못됐다. 함수일지 아닐지도 모르는 myCallBack(param1, param2)의 반환 값이 아니라 myCallBack() 함수 자체를 인자와 함께 넘기고 싶은 것이므로 두 번째처럼 고쳐야 한다. 

잘못된 식

$.get("myhtmlpage.html", myCallBack(param1, param2));

옳은 식

매개변수와 함께 myCallBack() 함수 실행을 지연하려면 익명 함수를 래퍼 함수로 사용할 수 있다. 익명 함수는 myCallBack()을 매개변수 값과 함께 호출하는 일만 한다. $.get()가 myhtmlpage.html을 가져오고 나면 myCallBack(param1, param2) 함수를 실행하는 익명 함수가 실행된다.

$.get("myhtmlpage.html", function(){
	myCallBack(param1, param2);
});

 

 

Reference

https://jquery.com/