저는 지난 포스팅에서 자바스크립트에 익숙하지 않다면서 ‘객체, 함수, 변수, 할당’이라는 용어를 사용했습니다. 솔직히 말해 저 용어들의 정확한 정의를 아직 모릅니다.  ’나중에 언젠가는 이해하게 되겠지’라는 막연한 기대를 하고 있을 뿐이예요. 기초부터 튼튼히 배우고 싶은 분들은 책을 찾아 보세요.(저도 책을 찾아 볼께요) 하지만 저런 용어들을 몰라도 jQuery를 시작할 수 있다는 이야기를 하고 싶습니다. 일단 흥미가 생겨야 책을 볼 욕심도 날테니까요. 저는 HTML/CSS를 처음 배울 때에도 ‘요소, 선택자, 속성, 값’이 무엇을 의미하는지 몰랐습니다. 기초는 나중에 배우기로 하구요. 간단하게 지난 포스팅을 복습해 볼께요.

• jQuery 최신 버전 라이브러리를 다운받아 서버에 올리거나 또는 CDN 서버에 있는 최신 버전 jQuery 라이브러리를 직접 링크할 수 있다.
• jQuery 라이브러리는 문서 body가 닫히기 직전에 삽입하는 것이 사용자의 체감 성능(속도)을 높이는데 도움이 된다.
• 웹 브라우저가 jQuery 라이브러리를 모두 해석한 후에 직접 작성한 jQuery 코드를 해석할 수 있도록 라이브러리 참조 코드 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 를 먼저 작성한다.
• 직접 작성할 jQuery 코드는 웹 브라우저가 HTML을 모두 해석한 이후에 실행하도록 준비 $(‘document’).ready(function(){ … }) 또는 $(function(){ … }) 한다.
• 달러($) 기호 사용 때문에 다른 라이브러리와 충돌할 우려가 있다면 jQuery.noConflict(); 를 선언해서 충돌을 방지할 수 있다.
• 코드를 작성하는 보통의 순서는 ‘HTML 요소를 선택하고, 이벤트를 설정하고, 동작을 실행하기’ 이다.
• $(‘…’) 괄호 안에 CSS 선택자를 넣어서 HTML 요소를 선택할 수 있다. HTML 요소, ID, CLASS를 포함할 수 있고 문자열(string)로 해석해야 하기 때문에 따옴표를 빼먹으면 안된다. JS 변수를 넣을 때는 따옴표를 사용하지 않는다.
• 점(.)을 찍어서 선택한 객체(요소)와 이벤트(클릭 등)를 연결할 수 있다. 이를 메소드 체이닝이라고 하는데 용어 설명은 생락할께요.(궁금하면 책을 ^^)

지난 포스팅에서 확실하게 기억하고 넘어가야 할 것은 jQuery의 일반적인 코드 작성 순서입니다. 아래와 같은 패턴이 자주 등장하므로 익혀 두는게 좋겠습니다.

// 한 줄로 작성하면…
$(‘선택한요소에‘).이벤트가발생하면(기능을(){실행한다});

// 코드 가독성을 위해 여러 줄로 작성하면…
$(‘선택한요소에‘).이벤트가발생하면(기능을(){ 
    실행한다
});

// 실제 코드는…
$(‘button.red‘).click(function(){ // 선택한 요소에 이벤트가 발생하면 기능을
    $(‘body’).css(‘background’,'red’); // 실행한다
});

오늘 학습 목표는 ‘콘텐츠 로테이션’ 기능입니다. 일단 다음과 같은 HTML을 작성해 봅니다.

<ul class="rotation">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
    <li>#4</li>
</ul>
<button type="button" class="prev">PREV</button>
<button type="button" class="next">NEXT</button>

li 항목 4개를 모두 노출하지 않고 첫 번째 li 항목만 화면에 보이도록 설정할 예정입니다. 그리고 PREV/NEXT 가운데 어떤 버튼을 누르는지에 따라서 정방향 또는 역방향의 li 항목을 로테이션 형식으로 표시합니다. 저는 다음과 같은 순서로 코드를 작성할 계획을 세웁니다.

1. 첫 번째 li를 제외한 나머지 li를 감춘다.
2. .prev 버튼을 누르면; 마지막 li 항목의 위치를 첫 번째로 옮기고; 모든 li를 감춘 다음 첫 번째 li만 표시한다.
3. .next 버튼을 누르면; 첫 번째 li 항목의 위치를 마지막으로 옮기고; 모든 li를 감춘 다음 첫 번째 li만 표시한다.

얻고자 하는 표현은 다음과 같습니다.

생각을 코드로 옮기면 다음과 같습니다. 코드가 낮설더라도 두려워 할 필요는 없으니 일단 주석 위주로 봐주세요. 코드 해설은 아래에서 추가할께요.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){ // HTML 문서가 완전히 해석되면 포함한 코드를 실행한다.
$(‘.rotation>li:gt(0)’).hide(); // 첫 번째 li를 제외한 나머지 li를 감춘다.
$(‘.prev’).click(function(){ // .prev 버튼을 누르면
$(‘.rotation>li:last’).prependTo(‘.rotation’); // 마지막 li를 첫 번째로 옮기고
$(‘.rotation>li’).hide().eq(0).show(); // 모든 li를 감추고 첫 번째 li만 표시한다.
});
$(‘.next’).click(function(){ // .next 버튼을 누르면
$(‘.rotation>li:first’).appendTo(‘.rotation’); // 첫 번째 li를 마지막으로 옮기고
$(‘.rotation>li’).hide().eq(0).show(); // 모든 li를 감추고 첫 번째 li만 표시한다.
});
});
</script>

그런데 이 코드에는 반복이 존재합니다.  .prev .next 버튼을 눌렀을 때 ’모든 li를 감춘 다음 첫 번째 li만 표시한다’ $(‘.rotation>li’).hide().eq(0).show(); 부분을 똑같이 반복하죠. 개발자라면 본능적으로 이렇게 반복하는 코드가 나올 때 간결하게 만들어야 합니다. 반복되는 동작을 onlyFirst() 라는 함수에 담겠습니다. onlyFirst() 라는 함수에는 ‘모든 li를 감춘 다음 첫 번째 li만 표시한다’ 라는 명령이 포함되어 있고 이 함수를 어디선가 호출하기 전까지는 스스로 실행하지 않습니다. 함수는 한번 만들어 두면 어디서 몇 번이든 호출할 수 있습니다. 그래서 바꾼 코드는 다음과 같습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘.rotation>li:gt(0)’).hide();
function onlyFirst(){ // onlyFirst라는 함수를 선언하고 호출하기 전까지 실행하지 않는다.
$(‘.rotation>li’).hide().eq(0).show(); // 모든 li를 감춘 다음 첫 번째 li만 표시한다.
}
$(‘.prev’).click(function(){
$(‘.rotation>li:last’).prependTo(‘.rotation’);
onlyFirst(); // onlyFirst 함수를 호출한다.
});
$(‘.next’).click(function(){
$(‘.rotation>li:first’).appendTo(‘.rotation’);
onlyFirst(); // onlyFirst 함수를 호출한다.
});
});
</script>

jQuery 초보인 분을 위해 낮설 수도 있는 코드를 해설해 드리겠습니다. HTML이나 CSS에서 다양한 요소, 속성, 값, 선택자 사용법을 기억해 두어야 많은 표현이 가능한데요. jQuery도 똑같습니다. 많은 메소드를 알아두면 표현 능력이 향상되겠죠.

• $(‘.rotation>li:gt(0)’).hide(); // .rotation 요소의 자식 li를 찾아 숨깁니다. 그런데 조건이 있습니다. 첫 번째 li를 제외한 모든 li를 찾습니다. :gt() 라는 선택자는 CSS에는 존재하지 않는 선택자입니다. jQuery에서 확장한 Greater Than 선택자 입니다. JS에서는 특별한 경우를 제외하고 순서(index)를 0부터 세기 때문에 li:gt(0)은 곧 ‘첫 번째 li보다 큰 li를 선택’하는 것입니다. 결과는 #2, #3, #4 항목을 선택해서 .hide() 숨깁니다. :gt() 선택자는 반대의 개념인 :lt() 선택자도 있습니다. Less Than 이겠죠.
• function onlyFirst() { … } // 반복하는 기능을 이 함수에 담아두면 필요할 때 호출(재 사용)할 수 있습니다. 모든 li를 숨긴 다음 첫 번째 li만 표시하는 기능을 담으려고 합니다.
• $(‘.rotation>li’).hide().eq(0).show(); // .rotation 요소의 자식 li를 모두 찾아내어 숨깁니다. .eq() 메소드를 이용하여 index가 (0)인 li를 선택해서 .show() 보여줍니다. .show() 메소드는 .hide()의 반대 동작입니다.
• $(‘.prev’).click(function(){ … }); // .prev 요소를 선택하고 선택한 요소에 .click() 이벤트가 발생하면 function(){ … } 함수를 실행합니다.
• $(‘.next’).click(function(){ … }); // .next 요소를 선택하고 선택한 요소에 .click() 이벤트가 발생하면 function(){ … } 함수를 실행합니다.
• $(‘.rotation>li:last’).prependTo(‘.rotation’); // .rotation 요소의 자식 li 중에서 마지막 li:last를 선택합니다. :last 가상 선택자는 CSS에는 존재하지 않는 jQuery에서 확장한 선택자입니다. :first는 :last와 반대 개념입니다. .prependTo() 메소드는 선택한 마지막 li를 잘라낸 다음 .rotation 요소의 첫 번째 자식 위치로 붙여 넣습니다. 반대의 개념으로 .appendTo() 메소드는 선택한 요소를 지정한 요소의 마지막 자식 위치로 옮깁니다.
• onlyFirst(); // onlyFirst() 함수를 호출합니다.

당장 뭔가 할 수 있다는 것을 보여주면서 jQuery 학습 동기를 유발하면 좋겠다고 생각했습니다. 구미가 좀 당기시는지 모르겠네요.