JavaScript와 jQuery의 차이

JavaScript

자바스크립트 이전 웹 페이지는 정적이었다. 그래서 미리 어떻게 표시될지 정해진 텍스트를 그대로 표시만했다. 웹 브라우저가 표시 중인 내용을 변경하는 유일한 방법은 새로운 URL을 웹 서버에 요청해서 새 문서를 받아오는 방법뿐이었다.

이 과정은 아주 느릴 뿐만 아니라, 자원도 낭비한다. 전화번호를 폼에 입력하면 데이터를 서버에 보내서 전화번호에 입력한 모든 문자가 숫자인지를 확인한 다음, 그렇지 않은 경우 서버가 오류 메시지가 들어 있는 페이지를 돌려보낼 것이다. 

 

1993년 마크 앤드리슨은 GUI를 제공하는 모자익 웹브라우저를 만들었고, 이 브라우저는 일반 소비자를 대상으로 하는 인터넷의 증가에 기름을 부었다. 그는 넷스케이프라는 회사를 창립하고 1994년 넷스케이프 내비게이터 브라우저를 출시했다. 더 대화형의 웹 페이지가 필요하다는 사실을 인식하고 넷스케이프에서는 1995년 자바스크립트라는 프로그래밍 언어를 소개했다. 자바스크립트는 그 후 에크마 인터내셔널이라는 표준 위원회에 의해  ECMA-262로 표준화됐다.

그래서 자바스크립트가 에크마스크립트라고도 알려져있고, 줄여서 EC라고도 부른다.

 

자바스크립트를 사용하면 서버가 아니라(브라우저가 실행 중인) 여러분의 컴퓨터에서 실행될 수 있는 실제 프로그램을 웹 페이지에 포함시킬 수 있다. 이 프로그램은 DOM을 변경하고 직접 웹 서버와 통신할 수 있다. 

 

자바스크립트가 포함된 웹 브라우저와 웹 서버의 상호작용

 

자바스크립트와 서버의 상호작용은 비동기 자바스크립트와 XML(Asynchronous JavaScript and XML) 즉 AJAX를 통해 이루어진다. 이 이름을 분석해보자. 브라우저가 서버의 으답이 언제 일어날지에 대해(그리고 응답이 돌아올지 돌아오지 않을지에 대해서도) 아무 제어를 하지 않는다는 뜻이다. '자바스크립트'라는 말은 이 상호작용이 자바스크립트의 제어하에 이뤄진다는 뜻이다. 마지막으로, 서버와 자바스크립트 프로그램 사이를 오가는 데이터 형식으로 처음에는 XML을 사용했다.

 

자바스크립트 예제코드

...

<script>
	window.onload = function() {
    	var big = document.getElementsByTagName('big');
        big[0].style.background = "green";
    }
</script>

....

 

 

 

jQuery

위의 예시에서 본 DOM 함수는 두 가지 문제가 있다. 

1. DOM 함수 동작이 브라우저마다 다를 수 있다.
2. DOM 함수를 사용하기가 상당히 불편하다. DOM 함수는 그다지 사용자 친화적인 인터페이스를 제공하지 않는다.

jQuery는 이 두가지 문제를 해결해준다. jQuery는 미국 소프트웨어 엔지니어인 존 레식이 2006년 만든 라이브러리다. jQuery는 브라우저 사이의 불일치를 부드럽게 메꿔주기 때문에 jQuery를 사용하는 프로그래머가 직접 브라우저 간의 차이를 다룰 필요가 없다. 그리고 훨씬 더 사용하기 쉬운 DOM 조작 인터페이스를 제공한다.

jQuery 라이브러리는 셀렉터와 액션을 조합한다. 아래의 예시는 위의 자바스크립트 예시와 똑같은 일을 하지만 더 프로그래밍하기 편한 방식을 쓴다.

 

...

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>

<script>
	$(function(){
    	$('big').css('background', 'green');
        
        //$('big') : 셀렉터
        //.css('background', 'green') : 액션
    });
</script>

...