Wrapper

jQuery() 또는 $() 로 엘리먼트와 css 선택자로 원하는 요소를 선택하고 동작시킬 메소드를 정해주는 문법을 '감싸주다'라는 의미의 레퍼(Wrapper)라고 합니다. 다음과 같은 형식의 문법을 갖고 있습니다.

jQuery(element .classname #id, [context])

이때 css 선택자는 문자열 형태로 전달됩니다. 또한 선택자는 ,(comma)를 통해서 여러 개를 전달할 수도 있고 여러 선택자를 조합해서 선택할 수도 있습니다.

context(맥락)에서 this는 이벤트를 발생시킨 엘리먼트를 의미합니다. []로 감싼 것은 선택적으로 전달하면 된다는 뜻입니다. 해도 되고 안해도 됩니다.

(function($){
	$('ul.foo').click(fucntion(){
         $('li', this).css('background-color', 'red')
	})
})(jQuery)

jQuery 메소스를 $로 대체할 수 있지만, 다른 라이브러리와 $ 문자를 사용하는 것에서 충돌이 날 수도 있습니다. 따라서 함수를 선언해서 내부 스코프에서 $로 매개변수를 jQuery 메소드를 받아서 사용하는 방식을 적용했습니다. 위처럼 만들어주면 함수를 선언하는 동시에 매개변수를 전달했기 때문에 호출까지 바로 실행되게 됩니다.

Chain

제이쿼리의 메소드들은 동작이 끝난 후, 자기 자신을 return한다는 규칙이 있기 때문에 한번 선택자로 선택한 대상에 대해 연속적으로 제어할 수 있습니다. 이를 '체인'이라고 부릅니다. 이를 통해서 써야하는 코드양을 줄이고, 시각적으로 코드의 맥락을 파악하기 좋습니다.

이벤트

시스템(웹 브라우저)에서 클릭, 마우스 이동, 타이핑, 렌더링 등의 사건 발생합니다. 이걸 이벤트라고 부르고, 특정 이벤트가 발생했을 때 동작시킬 함수을 정해두면 제이쿼리가 감지하여 해당 함수를 호출시킵니다.

제이쿼리에서는 Internet Explore, Chrome, FireFox 같은 다양한 웹 브라우저의 종류를 신경 쓸 필요 없이 동일하게 알아서 동작시켜줍니다. 이를 '크로스 브라우징' 이슈를 해결해준다고 합니다.

제이쿼리에서 제공하는모든 선택자와 메소드를 외우는 개발자는 없습니다. 어떤 기능이 있는지만 인지하고 필요할 때마다 찾아서 응용할 수 있는 능력이 가장 중요합니다.

오늘의 개발지식

서버란?

서버, server는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 프로그램 또는 장치를 의미합니다.

ajax

ajax는 비동기 통신 자바스크립트 기술입니다. 일단 서버는 데이터를 요구하면 데이터를 보내주는 프로그램입니다. 서버에서 데이터를 요청하고 받는 통신을 하고 싶다면, 데이터 서버의 URL과 get, post 등의 요청방식을 알아야 합니다. 근데 일반적인 통신을 하고 데이터를 받아올 때마다, 웹 페이지가 깜빡깜빡하면서 새로고침됩니다. 그러면 사용자가 피로감을 느끼고 화면이 보기에 예쁘지도 않죠. 따라서 새로고침 없이 부드럽게 데이터를 주고 받는 것이 ajax입니다.

비동기 : 여러가지 일이 동시적으로 발생한다는 의미로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미입니다.

jQuery ajax 메소드

$.ajax({
  	url, // 서버에 접근하는 url 
	data, // 클라이언트에서 서버로 데이터를 전송할 데이터
  	dataType, // 서버에서 받아오는 데이터의 형식
  	success, // 성공했을 때, 호출할 콜백 함수
  	type // 데이터 전송 방식(get, post)
})

axios

ajax 통신을 쉽게 하게 해주는 라이브러리입니다.

참조링크

jQuery 생활코딩
서버 위키백과