[로드 투 정글] 2. 입학 시험(3) - 프론트엔드(JQuery, AJAX)

자바스크립트를 훨씬 더 편하게, JQuery

JQuery는 자바스크립트를 훨씬 더 편하게 쓸 수 있게 만들어주는 라이브러리인데요. JQuery는 뭔가 새로운 기능을 제공해 준다기보다는 기존의 기능을 개선해 준다는 관점에서 보면 편할 것 같습니다.

 

하나 예를 들어 볼까요? 어떤 아이디를 가진 요소를 선택해야 할 때 기존 자바스크립트에서는 document.getElementById('아이디')를 이용해 가져올 수 있는데요. JQuery에서는 $('#아이디')를 통해 간단하게 가져올 수 있습니다.

 

그리고 해당 요소의 텍스트나 값, 스타일을 편리하게 변경할 수도 있고, 이벤트 처리도 보다 쉽게 할 수 있습니다. 그리고 아래에서 설명할 AJAX 사용에 있어서도 매우 간단하게 요청할 수 있게 도와줍니다.

 

정리하자면 JQuery는 자바스크립트의 편의성을 업그레이드해 주는 자바스크립트 라이브러리라고 할 수 있습니다. 

 

 

서버와의 연결고리, AJAX

AJAX(Asynchronous JavaScript And XML)는 페이지를 새로고침하지 않고 서버와 데이터를 주고받을 수 있게 해 주는 기술인데요. 비동기적으로 서버에 요청을 보내기 때문에 우리는 우리가 머물고 있는 웹페이지에 그대로 머물 수 있습니다. 그리고 마찬가지로 새로고침 없이 서버의 응답을 받아 웹페이지에 바로 반영할 수도 있죠.

 

데이터 처리의 핵심 기능들인 CRUD 또한 AJAX로부터 시작합니다. 사용자가 보낼 정보를 JSON이라는 키-값 쌍으로 이루어진 데이터 양식에 담아 서버와 약속한 URL을 적어 서버로 요청을 보내면, 서버의 해당 URL에 대응하는 창구에서 이를 받아 처리를 시작하게 되지요. 참고로 이 과정을 API 요청이라고도 합니다.

 

JQuery를 사용한 AJAX 요청 기본 코드는 다음과 같습니다. data에 보내는 것이 바로 JSON인데요. 중괄호 안에 키-값 쌍을 담아내는 것을 볼 수 있습니다. 만약 보낼 데이터가 없다면 중괄호를 비워도 상관없습니다.

$.ajax({
	method: "GET", // 또는 "POST"
	url: "url주소",
	data: {
		키1 : 값1,
		키2 : 값2
	}
}).done(function(resp){
	console.log(resp);
});

 

 

마치면서

이 글을 끝으로 클라이언트(웹페이지에 방문하는 사용자) 쪽에서 사용되는 기술들에 대한 전체적인 밑그림을 다 그려보았습니다. 다음 포스트에서는 이제 서버를 구축해주는 Flask에 대해 알아볼 예정인데요. 서버를 구축한다고 해서 겁먹을 필요는 없습니다.

 

AJAX의 예제 코드를 보시면 아시겠지만 정해진 틀이 있는 것을 알 수 있는데요. Flask도 마찬가지로 정해진 틀이 있고, 이 틀만 배워서 익힌다면 손쉽게 서버를 구축하고 CRUD를 처리하는 자신을 발견할 수 있을 것입니다. 그럼 다음 시간에 뵙겠습니다.