2014년 6월 13일 금요일

3.1장 이벤트 / 정리

이벤트가 뭘까?? 개업을 하면 이벤트 업체에서 이벤트 하는데 그런 이벤트인가??
흠.... 넓은 의미로 보면 맞는거 같기도하고...;;

이벤트를 쉽게 설명하자면 이런 것이다.
면접자가 면접을 갔는데, 면접관이 당신의 이름을 부르면 네~! 라고 대답하지 않겠는가?
여기서 면접관이 당신을 부르는 행위(?) 이것이 이벤트다.

사용자가 어떤 행위를 했을 때만 작동하는 것을 이벤트라 한다.
대표적인 것이 마우스 클릭 이벤트가 되겠다. 4가지 이벤트를 살펴보자.
역시 이부분도 소스 코드를 보고 따라 해보는 것이 좋다.

1. click - 클릭 되었을 때 

jQueryObject.click(이벤트 핸들러);

$('#me').click(function()) {
     $('#me').text('클릭되었습니다.');
});

2. mouseenter/mouseleave - 마우스 포인터가 위에 있을 때/벗어났을 때

jQueryObject.mouseenter(이벤트 핸들러);
jQueryObject.mouseleave(이벤트 핸들러);

$(function(){
    $('#div1').mouseenter(function()){
          $('#div1').text('마우스 포인터가 위에 있습니다.');
    });
    $('#div1').mouseleave(function()){
          $('#div1').text('마우스 포인터가 벗어났습니다.');
    });
});

3. hover - mouseenter와 mouseleave를 한꺼번에

jQueryObject.hover(mouseenter이벤트 핸들러 ,mouseleave이벤트 핸들러);

$(function(){
    $('#div1').hover(function()) {
          $('#div1').text('마우스 포인터가 위에 있습니다.');
    }, function() { //콤마에 주의 하자
          $('#div1').text('마우스 포인터가 벗어났습니다.');
    });
});

4. focus/blur - 포커스를 얻었을 때 / 벗어났을 때

jQueryObject.focus(이벤트 핸들러);
jQueryObject.blur(이벤트 핸들러);

$(function(){
    $('#div1').focus(function()){
          $('#input1').addClass('active');
    });
    $('#div1').blur(function()){
          $('#input1').removeClass('active');
    });
});


이벤트와 This

이벤트를 사용함에 있어서 중요 사항이 있다. 
이벤트 핸들러 안에는 this라는 변수를 사용할 수 있다. 
어떤 경우에 this를 사용할까?
클릭 이벤트에서 같은 결과가 나와야 하는 경우를 생각해보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
</body>
</html>


이런 HTML 이 있고, 

$(function(){
var elements = $('.clickTest');
elements.click(function(){
elements.text('클릭되었습니다');
});
});

이런 스크립트가 있다고 해보자.

위의 소스의 경우에는 하나를 클릭해도 전부 바뀐다. 
이런 비극을 막기 위해서는 뭐 각자 고유 ID를 부여하는 것도 한 방법이지만...
만약 클릭해야할 곳이 100개 1000개라면??
각자 다른 이름을 지어줄텐가?? 그럼 상사에게 욕을 시원하게 먹을 것이다.
이때 필요한게 this다. 

클릭하는 바로 그 놈(this)만 인식할 때 쓰는거다.

쓰는법은 다음과 같다.

$(function(){
$('.clickTest').click(function(){
$(this).text('클릭되었습니다');
});
});

each 메소드 - 각각에 대하여 처리하기

소스 코드를 보자. <body> 부분만 따왔다.

<body>
<div class="animal">cat</div>
<div class="animal">dog</div>
<div class="animal">turtle</div>
<div class="animal">tiger</div>
</body>

$(function(){
$('.animal').each(function(){
var name = $(this).text();
alert(name);
});
});

위의 소스를 실행하면 같은 다이얼 로그가 4번 표시 된다.
스크립트에 위치한 this는 이벤트가 발생한 요소가 아니라 [현재 처리 중인 요소]를 뜻한다.

어휴~ 3장은 워낙 내용이 많아서 2개로 나누어서 정말 요약만 한거 같다 ㅡㅡ;;
자세한 것은 역시 책을 보는 것을 강추한다 ㅎㅎ;;

4장에서는 실제로 뭔가를 만들어 볼까한다. 
앞에 내용을 집약(?)해서 만들어 보는 것이니 길어질 가능성이 농후하다. 
그럼 3장 진짜 끝~!


2014년 6월 12일 목요일

3장 그것에 무언가를 하기 (기본 그 두번째)

이번 장은 메소드와 몇몇 변화시키는 것들을 나열해볼려고 한다.
2장에서는 무언가를 가져오기로 원본을 가져오는 것을 알았다.
3장은 가져온 원본은 다르게 변화시키는 법이다.
내용이 기니 여기에 다 쓸 순 없고, 쓰는 법과 명령어 정도만 나열하겠다.
소스는 http://www.jpub.kr/ 에서 다운 받으면 된다.
소스를 다운받아 직접 실행시켜보고 바꿔보고 하면서 익히는 것이 더 빠를 것이다.

그 전에 메소드가 무엇인지 알아보자.
[그것에 무언가를 하기]는 [제이쿼리 객체가 갖고 있는 메소드를 실행하기]로 말할수 있다.
간단히 메소드란 준비되어 있는 기능을 뜻한다.

1. 스타일 변경하기 

css - 스타일시트나 스타일 속성에서 스타일 변경을 실행하는 매소드

jQueryObject.css('프로퍼티명', '값');

show/hide - 요소의 표시/비표시를 변경하기 위한 메소드

jQueryObject.show();
jQueryObject.hide();

width/height - 요소의 폭/높이를 지정하는 메소드

jQueryObject.width(값);
jQueryObject.height(값);

2. 애니메이션 시키기

fadein/fadeout - 점점 보이거나 점점 흐려지며 안보이는 기능

jQueryObject.fadeIn();
jQueryObject.fadeOut();

slideDown/slideUp -슬라이드 애니메이션이 발생하는 메소드

jQueryObject.slideDown();
jQueryObject.slideUp();

fadein/fadeout/slideDown/slideUp 의 스피드 지정하기(4가지 방법 동일)

jQueryObject.fadeIn(1000); //1000 밀리초(공백으로 두면 기본 400 밀리초)
jQueryObject.fadeIn('slow');
jQueryObject.fadeIn('fast');

animate - 커스텀 애니메이션(사용자 지정 에니메이션)

jQueryObject.animate({
       프로퍼티명 :  값;
});

animate 스피드 지정

jQueryObject.animate({
       top : 200,
       left : 400
}, 1000);  //콤마(,)로 구분하고 1000은 밀리초를 의미한다. ({}) 형식에 유의하자

애니메이션 종료 시에 자바 스크립트 실행시키기

jQueryObject.animate({
       top : 200,
       left : 400
}, 1000, function() {
      alert('애니메이션 완료');
}); //위 소스에서 빨간 부분이 추가 되었다. ({값,값}, 속도, 함수(){내용;}); 이런 형식

3. 내용이나 속성 변경하기

text/html - 요소의 내용을 통째로 바꿔 쓰는 메소드

jQueryObject.text('바꿔 쓴 후의 텍스트');
jQueryObject.html('바꿔 쓴 후의 html');

empty - 요소의 내용물을 비워 버리는 메소드.(내용을 통째로 지울 때 씀)

jQueryObject.empty();

attr - 요소의 속성값을 변경하는 메소드

jQueryObject.attr('속성명', 변경 후의 값);

예) <img scr = "윤아.jpg" alt = "" id = "This" />
     
      $(function(){
            $('#This').attr('src', '서현.jpg');
      });

val - 입력된 값을 변경하는 메소드

jQueryObject.val('변경후의 값');

addClass/removeClass - class 속성값을 조작하기 위한 메소드

jQueryObject.addClass('클래스명');
jQueryObject.removeClass('클래스명');

append/appendTo  - 요소를 움직이기 위한 메소드

append 메소드를 사용하는데는 이동할 요소와 이동할 곳의 요소의 두가지 객체가 필요하다.
A 안에 B를 이동시키는데 시작점과 도착점이 필요한건 당연 ㅡ.ㅡ

jQueryObjectA.append('jQueryObjectB'); //A요소 안에 B요소를 이동

jQueryObjectB.appendTo('jQueryObjectA'); //B요소를 A요소 안에 이동

위는 어차피 똑같은 기능을 하는데 어느걸 안으로 넣을래. 차이다 헷깔리면 1개만 쓰자



원래 뒤에 이벤트가 있는데 너무 길어져서 나눠서 쓰겠다.
이번 장은 끝~

2014년 6월 10일 화요일

2장 무언가를 가져오기(기본 그 첫번째)

벌써 2장이다(실은 책을 다 떼고 다시 리뷰하는거니 당연....;;)
2장은 [무언가를 가져오기]를 해볼꺼다.
뭘 가져올까?? 당연히 내가 조작하려고 하는 원본을 가져오는 거다.
원본이 뭔지 알아야 색을 바꾸던, 지우던, 글씨를 키우던 뭔가를 할꺼 아닌가.
가져오는 것을 셀렉터라고 부른다.

2.1 셀렉터란 뭔가??

가져오기는 1장에서 봤듯이 $('셀렉터') 이다.
저 셀렉터 부분이 바뀜에 따라 어떤 형태 것을 가져올껀지 결정되는거다.
뭐 이것저것 엄청 많은데 이 장에서는 대표적인 4개를 소개하고 있다.

1) ID 셀렉터 - #idValue

$('#idValue')

#뒤에 등장한 문자열이 id의 속성이고 이 속성으로 지정된 요소를 취득한다.
코드를 보자.
----------------index.html-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<ul>
<li>fox</li>
<li id="cat">cat</li>
<li>fish</li>
<li id="dog">dog</li>
<li>bird</li>
</ul>
</body>
</html>
--------------------------------------------
빨강 부분이 id를 지정한 부분이다.

---------------------scripts.js----------------------
$(function(){
$('#cat').css('background','pink');
$('#dog').css('background','yellowgreen');
});
---------------------------------------------------

저걸 실행하면 cat과 dog 부분이 각각 색이 바뀐다.
한마디로 id로 지정한 곳이 다 바뀌게 된다는 것이다.
하지만 이 셀렉터의 단점은 모든 id에게 같은 색을 입히려면 
다 일일히 지정해 줘야 한다는 것이다. 지금이야 2개 밖에 없으니 쿨하게 해주겠지만
역시 100개 1000개 넘어갔는데 같은 코드 쭉 늘여놓으면 
사장에게 퇴사 크리를 맞을 수 있다. 그래서 나온게 "클래스 셀렉터"다

2) 클래스 셀렉터 - .className

복수의 요소를 함께 취득하고 싶은 경우에 클래스 셀렉터를 쓴다.
클래스 셀렉터를 사용하면 지정한 모든 클래스에 속한 요소를 모두 취할수 있다.
사용법은

$('.className')

코드를 보자
--------------------index.html--------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<ul>
<li class="man">John</li>
<li class="man">Bob</li>
<li class="woman">Mary</li>
<li class="man">Taro</li>
<li class="woman">Hanako</li>
</ul>
</body>
</html>
--------------------------------------------------------------------
----------------------scripts.js---------------------------------
$(function(){
$('.man').css('background','lightblue');
$('.woman').css('background','pink');
});

----------------------------------------------------------------
코드를 보면 남자는 파랑으로 여자는 핑크로 지정하고 복수의 요소를 바꾸었다.

3) 타입 셀렉터 
타입 셀렉터는 지정한 요소명의 요소를 전부 가져올 수 있다.
작성법은 

$('div')

원하는 요소명을 그대로 넣음으로써 다입 셀렉터의 기능을 수행한다. 
-----------------------index.html------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
</ul>
</body>
</html>
--------------------------------------------------------------
------------------------scripts.js-----------------------------
$(function(){
$('p').css('background','pink');
$('li').css('background','yellowgreen');
});
-------------------------------------------------------------
$('p')라면 모든 p요소를, $('li') 라면 모든 li요소를 취득한다.

3.1) 조합해보기
위에서 공부한 3개를 조합해서 써보자.

-타입 셀렉터 + ID 셀렉터
$('div#hoge').css('background', 'red'); //id가 hoge인 div 요소를 취득한다.

-ID 셀렉터 + 클래스 셀렉터
$('#hoge.foo').css('background', 'red'); //id가 hoge인 클래스 foo 요소를 취득한다.

-타입 셀렉터 + ID셀렉터 + 클래스 셀렉터
$('div#hoge.foo').css('background', 'red'); 
//id가 hoge이고 클래스 foo에 속한 div 요소를 취득한다.

셀렉터의 조합 = 검색 이다.

4)자손 셀렉터

자손 셀렉터는 요소의 계층 구조를 판단하여 원하는 요소를 취득하기 위한 셀렉터
작성법

$('p strong') //p요소 안에 있는 strong 요소다. 
자손 셀렉터는 조합한 것에서 띄어쓰기를 한 것 뿐이다.
코드를 보장~
---------------------------index.html----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div>
<p>I have a <strong>pen</strong>.</p>
</div>
<ul>
<li>His <strong>pen</strong> is red.</li>
<li>I need his <strong>pen</strong>.</li>
</ul>
<p>She doesn't need a <strong>pen</strong>.</p>
</body>
</html>

----------------------------------------------------------------
----------------------scriots.js----------------------------------
$(function(){
$('div strong').css('background','lightblue');
$('ul strong').css('background','pink');
});

----------------------------------------------------------------
코드를 보면 strong 요소가 4개 있다. 
가장 위에 있는 요소는 div의 p안에 있고,
다음 2개는 ul의 li안에 있다.
마지막은 body의 바로 아래에 있는 p안에 있다.

실행시키면 p안에 strong를 취득해서 사용하는데. 
index.html에서 빨갛게 표시한 부분만 작동하게 된다. 

2.2 가져온 것에서 좀 더 검색하기

이번에는 변수를 사용해서 요소를 검색하는 법을 알아보자.
변수가 뭔지는 설명 안할란다 ㅡ.ㅡ 그정도는 알겠지.....;;
두 가지를 이해하면 된다
-변수에 보관한다는 것
-거기에서 좀 더 요소를 검색한다는 것

변수에 보관하기

var lastName = '서현'; //변수에 서현을 저장
alert(lastName);  //다이얼로그에 서현을 표시

너무 쉬워서 오줌 지릴꺼 같다.
자~ 저 변수에 이것 저것 넣어보자.

var lastName = '서현';
var me = lastName + ' 나';
var father = lastName + ' 아빠';
var mother = lastName + ' 엄마';
alert(me);
alert(father);
alert(mother);

이걸 실행하면 다이얼로그 창이 3번 뜨면서 문장이 나온다.
+는 문자열 연결 명령이다

응용해보자.

$('#hoge').css('background', 'pink'); //원본

var hoge = $('#hoge'); //변수에 넣었다.
hoge.css('background', 'pink');
hoge.css('border', '1px solid red');
hoge.fadeIn();

이런식으로 응용이 가능하다.

이로써 2장도 끝났다 3장에서는 메소드, 스타일 변경, 이벤트 등을 다루겠다~






1장 - 제이쿼리를 시작해보자~

약 100만년만에 올리는 공부 리뷰~ 빠밤~
실은 이 사이트 자체를 잊어 먹었었다 ㅡㅡ;;
갑자기 왠 제이쿼리냐고??
군대 동기 전x민이 제이쿼리 공부해두면 언젠가는 써먹는다고 해보라고 했다
쉽다나? 제이쿼리가 DB쿼리문인줄 알았던 웹무식자에게 뭔가 영감을 준 책이라 할수 있다

일단 교재는 "머리에 쏙쏙 들어오는 jQuery 입문" 이다.
누차 말하지만 난 이 책을 사서보는거고 잊지 않기 위해 여기에 올리는 것이다.
왠만하면 사서 보자~
일본인 저자가 만든 책이고, 풀 컬러라 보기 좋다 ㅎㅎ(애들 취향 ㅡㅡ;)
그럼 리뷰 시작~
---------------------------------------------------------------------------------
1. 제이쿼리의 대략적인 개념

장점
제이쿼리는 편리하다. (코드가 간결해~)
브라우저를 가리지 않는다.(호환성 쩔어~)
자바스크립트와 비슷한 문법(금방 습득가능)
정보가 풍부하다(커뮤니티가 잘 되어 있음)
버그가 적다(과연?)

단점 - 이 책엔 없네 ㅡㅡ??

1.1 기본 개념을 접해 보자~

$('#sample1').hide(); //id 속성이 sample1 인 요소를 숨기기

<div id = "sample1">샘플이다</div> //html 페이지 안에 이런게 있다고 하면 숨겨진다

제이쿼리의 기본적인 흐름은 [무언가를 가져오기] -> [그것에 무언가를 하기] 다.

무언가를 가져오기  -> id가 sample1인 요소 -> $('#sample1')
그것에 무언가를 하기 -> 숨기기 -> .hide()

제이쿼리에서 $는 반드시 등장한다. 항상 맨 앞에 붙는다.
$()는 무언가를 가져오기

1.2 제이쿼리 객체화하기

제이쿼리에서 객채라는 것은 뭘까?
로봇 슈트를 입은 사람과 같은 것이다(아이언맨!!)
객체가 혼자 있을 때는 그냥 찌질이지만
슈트를 입으면($()) 자바 스크립트만으로는 하기 힘든 조작을 간단하게 할 수 있다.

그럼 객체화 된 슈트에 무언가 하기 기능을 어찌 넣을까?
[그것에 무언가를 하기] 기능은 뒤에 .을 붙여 작성하면 된다.
예는 위에랑 같은 예다.


$('#sample1').hide(); //id 속성이 sample1 인 요소를 숨기기

$('#sample1').shiw(); //표시하기

1.3 정리 하기


  • $가 제이쿼리
  • $()로 무언가를 가져옴
  • 그리고 가지고 온 요소를 제이쿼리 객체화 함
  • 제이쿼리 객체로 편리한 기능을 사용할 수 있음
  • 그러한 편리한 기능이 없으면 여러가지 일이 매우 어렵고 힘듦

1. 4 제이쿼리를 사용하기 위한 준비

http://jquery.com/ 에서 다운 받자

다운 받은 제이쿼리 파일을 동일 디렉토리에 놓는다.

파일 이름이 jquery-1.7.1.min.js 라면

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$('#sample1').hide();
</script>
</head>
<body>
<div id="sample1">이 div를 지우고 싶다!</div>
</body>
</html>

이런식으로 지정해 주면 된다. 진짜로 이거면 설치 끝이다 ㅎㅎ;;
나도 처음에는 이게 다야? 하면서 당황했는데 이러면 다 되더라 ㅡㅡ;;;

이 div를 지워보자.
저거 복붙해도 안지워진다.
원인은 위에서부터 순차적으로 읽다보니 $('#sample1').hide(); 에서 sample1 이 아직 읽혀지지 않았다. 그래서 뭘 지워야 하는지 모르니 걍 제끼는거다 

그럼 어찌하는가 하면 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function(){
$('#sample1').hide();
});
</script>
</head>
<body>
<div id="sample1">이 div를 지우고 싶다!</div>
</body>
</html>

$(function(){})으로 감싸준다. ()에 주의하자. 처음에 ()이게 2중인걸 모르고 한참 헤맷다.

하지만 지금은 함수가 한개니깐 저기에 썼지만 100개 1000개 넘으면 코드가 엄청 복잡해지고 상사에게 싸다구 크리를 맞을수 있다. 
$(function(){}) 부분을 따로 파일로 만들자.

scripts.js라는 파일명을 만들고 안에 

$(function(){
$('#sample1').hide();
});

라고 저장하자.
물론 위의 소스에서 그 부분은 지워야겠지??
그럼 파일이 2개 생겼다(제이쿼리 파일까지 3개군)
-------------index.html-------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js">test();</script>  //그저 파일 연결만 해줬다
</head>
<body>
</body>
</html>
----------------------------------------

---------------scripts.js-----------------
$(function(){
$('#sample1').hide();
});
-------------------------------------------

그리고 제이쿼리 파일(jquery-1.7.1.min.js) //당신이 받은 제이쿼리 파일명을 써주면 된다

이 책에서 기본으로 쓰는 파일이 4개가 있다.

index.html
styles.css (빈 파일)
jquery-1.7.1.min.js (제이쿼리 파일)
scripts.js (빈 파일)

빈 파일 부분은 이제 공부하면서 채울 부분이니 
저리 만들어 놓고 복붙해서 쓰자(귀찬귀찮 ㅡㅡ;;)


이로서 1강 끝이다(벌써?) 다음 2강은 무언가를 가져오는 법을 다루겠다.




2013년 10월 24일 목요일

헉 내가 무려 3개월이나 포스팅을 안했다니 ㄷㄷㄷ

이건 게으름일까 습관이 안들어일까? ㄷㄷㄷ;;

HTML 5, 유니티는 새로 배웠고

C++, SQL는 복습했는데

여기에 올리지 않았으니........;;

게으른 개발자라고 오해할 수도 있겠네 ㄷㄷㄷ(그래봐야 보는 사람 하나 없지 ㅡㅜ)

공부한 내용을 정리해서 올려야겠네!!

그리고 자료구조는 그림으로 설명하는게 더 좋은데 여기선 힘들어서 포스팅 종료 ㅡㅡ;;


2013년 7월 15일 월요일

자료구조를 다시 복습하고 있다.

이번에는 교재에 있는 동영상 강좌를 보며 하고 있다.

복습이 끝나면 링크 리스트3 부터 다시 게시하도록 하겠다.

일단 정보보안기사 합격여부에 따라 달라지겠지만.......;;

17일에 발표되니 그 전까지 복습을 마치고 합격하면 실기 준비하고

불합격하면 자료구조 공부를 하겠다.....


2013년 6월 5일 수요일

4장 - 연결 리스트 2

후아~~ 이거 공부하는데 많은 난관이 있었다.
허리 통증으로 병원다니고, 어머니 잠시 입원하고, 컴퓨터 하드도 맛이 가서 고치고, 
보안 기사 시험 접수도 했고~
대신 사무자동화 시험을 100점으로 합격하는 영광(?)을 누렸다.

보안 기사 시험(7/6) 까지는 당분간 자료구조 공부는 중단해야겠다.
연결 리스트 2까지만 일단 복습해 보겠다~
---------------------------------------------------------------------------------
3장은 배열에 의한 리스트였다. 즉, 자료가 쭈~~~욱 다 연결되어 있는 배열 형태라는 거다.
배열의 단점이 길이가 정해져 있기 때문에 잘못하면 
오버플로우가 걸리는 비극이 일어난다는 것이다.
그래서 연결 리스트2 는 이것을 동적으로 메모리 연결을 하겠다는 것이다.
아따 동적 연결은 또 뭐당가??
그야말로 필요할 때마다 동적(?)으로 메모리를 야금야금 잡아먹으면서 늘였다 줄였다 하며 자료를 저장하겠다는 것이다.
동적으로 하기 위해서 필요한 요소가 몇가지 있다.
1. 메모리 할당 
2. 메모리 접근
3. 메모리 해제

뭐 너무도 당연한 것이지만 함 써봤다.
배열에는 배열 번호(정확히는 주소)가 있어서 쉽게 접근이 가능했으나
동적인 연결리스트에서는 다음 자료가 어디에 붙어 있는지 찾아가는 주소가 있어야 한다.
이 주소가 없으면 그냥 뒷자료는 유실되고, 상사에게 조낸 쳐맞는거다.
여기에선 당연하게 포.인.터. 가 나온다.
벌써 포인터 이야기만 듣고 나가는 사람은 없길 바란다.
포인터를 쉽게 생각해보자.
윈도우 단축 아이콘을 바탕화면에 끌어다 쓰지 않는가??
그 단축 아이콘에는 실제 실행되는 파일의 "위치 정보"가 있다.
이 위치 정보가 바로 "포인터 주소"인 것이다!!

어째든 연결 리스트에는 각 노드(책에서는 자료를 담은 바구니로 표현했다)마다 다음 노드의 위치를 기억을 해놓는 것이다.
마치 사슬이 하나하나 연결되듯이 자료가 여기저기 흩어져있지만(메모리 상에) 
이걸 연결 해서 쓰는게 동적 연결 리스트 구조인 것이다!!

신혼부부가 몸으로 대화하듯이(어머>.<) 개발자는 코드로 대화를 해야한다. 코드를 닥치고 보자
---------------------------------------------------------------------------------
LiinkedRead.c

#include <stdio.h>
#include <stdlib.h>

typedef struct _node
{
int data;
struct _node * next; //재귀함수
} Node;

int main(void)
{
Node * head = NULL;    // NULL 포인터 초기화
Node * tail = NULL;
Node * cur = NULL;

Node * newNode = NULL;
int readData;

/**** 데이터를 입력 받는 과정 ****/
while(1)
{
printf("자연수 입력: ");
scanf("%d", &readData);
if(readData < 1)
break;

/*** 노드의 추가과정 ***/
newNode = (Node*)malloc(sizeof(Node));
newNode->data = readData;
newNode->next = NULL;

if(head == NULL)
head = newNode;
else
tail->next = newNode;

tail = newNode;
}
printf("\n");

/**** 입력 받은 데이터의 출력과정 ****/
printf("입력 받은 데이터의 전체출력! \n");
if(head == NULL) 
{
printf("저장된 자연수가 존재하지 않습니다. \n");
}
else 
{
cur = head; 
printf("%d  ", cur->data);   // 첫 번째 데이터 출력
while(cur->next != NULL)    // 두 번째 이후의 데이터 출력
{
cur = cur->next;
printf("%d  ", cur->data);
}
}
printf("\n\n");

/**** 메모리의 해제과정 ****/
if(head == NULL) 
{
return 0;    // 해제할 노드가 존재하지 않는다.
}
else 
{
Node * delNode = head;
Node * delNextNode = head->next;

printf("%d을(를) 삭제합니다. \n", head->data);
free(delNode);    // 첫 번째 노드의 삭제
while(delNextNode != NULL)    // 두 번째 이후의 노드 삭제 위한 반복문
{
delNode = delNextNode;
delNextNode = delNextNode->next;

printf("%d을(를) 삭제합니다. \n", delNode->data);
free(delNode);    // 두 번째 이후의 노드 삭제
}
}

return 0;
}
---------------------------------------------------------------------------------
자~ 이걸 이제 조금 분석해 보자.
구조체 Node를 선언했다.
이건 계속 다음 노드를 보면서 next로 이동이동 하는 것이다.
그럼 메인안에 있는 변수들을 보자.
뭔 놈의 포인터 변수가 이리 많냐~? 하는 분들은 좌절하지 말라.
head 는 노드의 시작 지점, tail 은 끝 지점, cur 은 다음 노드의 위치 값
을 저장하는 곳 포인터 변수이다.

연결 리스트에서 삽입/삭제시 가장 중요하게 해야할 일이 있다.
노드를 끊기 전에는 반드시 다음 노드의 주소 값을 보존해야 한다는 것이다.
걍 아무 생각 없이 끊어버리면 다음 주소 이후의 데이터는 접근이 불가능해져서 없어져 버린다는 것이다.

이건 그림을 보고 이해하는 것이 빠른데 여긴 그림 그리기 도구도 없는 후진 블로그라서  걍 책으로 이해하길 바란다-_-;

뒤로 훨씬 긴 이야기가 있지만 지금 위의 소스를 삽입/삭제/조회/정렬 로 디테일하게 들어간 것이니 역시 책을 보고 이해를 할 수 밖에 없다 ㅡㅡ;;;

위 소스에는 정렬 부분이 없으니 정렬만 따로 언급하겠다.
정렬에 필요한 요소가 3가지 있다.
1. 정렬 기준이 되는 SetSortRule 함수
2. SetSortRule 함수를 통해서 전달된 함수 정보를 저장하기 위한 LinkedList의 멤버comp
3. comp에 등록된 정렬기준을 근거로 데이터를 저장하는 SLinsert 함수
역시 개발자는 코드로 설명해야 한다. 코드를 보자 -_-
---------------------------------------------------------------------------------
//헤더 부분
#ifndef __D_LINKED_LIST_H__
#define __D_LINKED_LIST_H__

#define TRUE 1
#define FALSE 0

typedef int LData;

typedef struct _node
{
LData data;
struct _node * next;
} Node;

typedef struct _linkedList
{
Node * head;
Node * cur;
Node * before;
int numOfData;
int (*comp)(LData d1, LData d2);
} LinkedList;


typedef LinkedList List;

void ListInit(List * plist);
void LInsert(List * plist, LData data);

int LFirst(List * plist, LData * pdata);
int LNext(List * plist, LData * pdata);

LData LRemove(List * plist);
int LCount(List * plist);

void SetSortRule(List * plist, int (*comp)(LData d1, LData d2));

#endif
---------------------------------------------------------------------------------
//연결리스트 부분
#include <stdio.h>
#include <stdlib.h>
#include "DLinkedList.h"

void ListInit(List * plist)
{
plist->head = (Node*)malloc(sizeof(Node));
plist->head->next = NULL;
plist->comp = NULL;
plist->numOfData = 0;
}

void FInsert(List * plist, LData data)
{
Node * newNode = (Node*)malloc(sizeof(Node));
newNode->data = data;

newNode->next = plist->head->next;
plist->head->next = newNode;

(plist->numOfData)++;
}

void SInsert(List * plist, LData data)
{
Node * newNode = (Node*)malloc(sizeof(Node));
Node * pred = plist->head;
newNode->data = data;

while(pred->next != NULL &&
plist->comp(data, pred->next->data) != 0)
{
pred = pred->next;
}

newNode->next = pred->next;
pred->next = newNode;

(plist->numOfData)++;
}


void LInsert(List * plist, LData data)
{
if(plist->comp == NULL)
FInsert(plist, data);
else
SInsert(plist, data);
}

int LFirst(List * plist, LData * pdata)
{
if(plist->head->next == NULL)
return FALSE;

plist->before = plist->head;
plist->cur = plist->head->next;

*pdata = plist->cur->data;
return TRUE;
}

int LNext(List * plist, LData * pdata)
{
if(plist->cur->next == NULL)
return FALSE;

plist->before = plist->cur;
plist->cur = plist->cur->next;

*pdata = plist->cur->data;
return TRUE;
}

LData LRemove(List * plist)
{
Node * rpos = plist->cur;
LData rdata = rpos->data;

plist->before->next = plist->cur->next;
plist->cur = plist->before;

free(rpos);
(plist->numOfData)--;
return rdata;
}

int LCount(List * plist)
{
return plist->numOfData;
}

void SetSortRule(List * plist, int (*comp)(LData d1, LData d2))
{
plist->comp = comp;
}
---------------------------------------------------------------------------------
//메인함수 부분
#include <stdio.h>
#include "DLinkedList.h"

int WhoIsPrecede(int d1, int d2)
{
if(d1 < d2)
return 0;    // d1이 정렬 순서상 앞선다.
else
return 1;    // d2가 정렬 순서상 앞서거나 같다.
}

int main(void)
{
// List의 생성 및 초기화  ////////////
List list;
int data;
ListInit(&list);

SetSortRule(&list, WhoIsPrecede);

// 5개의 데이터 저장  ///////////////
LInsert(&list, 11);  LInsert(&list, 11);
LInsert(&list, 22);  LInsert(&list, 22);
LInsert(&list, 33);

// 저장된 데이터의 전체 출력 ////////////
printf("현재 데이터의 수: %d \n", LCount(&list));

if(LFirst(&list, &data))
{
printf("%d ", data);
while(LNext(&list, &data)) 
printf("%d ", data);
}
printf("\n\n");

// 숫자 22을 검색하여 모두 삭제 ////////////
if(LFirst(&list, &data))
{
if(data == 22)
LRemove(&list);
while(LNext(&list, &data))
{
if(data == 22)
LRemove(&list);
}
}

// 삭제 후 저장된 데이터 전체 출력 ////////////
printf("현재 데이터의 수: %d \n", LCount(&list));

if(LFirst(&list, &data))
{
printf("%d ", data);
while(LNext(&list, &data))
printf("%d ", data);
}
printf("\n\n");
return 0;
}
---------------------------------------------------------------------------------
이렇게 보기엔 무지하게 복잡하고 어이 없어 보이지만
간단하게 요약해 보겠다.

1. 앞 값과 뒷 값을 비교한다.
2. 정렬 기준에 따라 0이나 1을 반환한다.
3. 정렬 기준에 따라 노드의 위치를 바꾼다. 
3-1.  같은 값은  냅둔다.
1~3을 죽어라 반복한다.
4. 완료되었으면 출력하고 끝낸다.

내가 봐도 너무 대충 설명한 거 같아서 좀 찔린다 ㅡㅡ;;
역시 이것은 복습의 장소이지 공부의 장은 아니다.

책을 보고, 직접 해보고 이해하는 수밖에 없다.
날씨도 점점 더워지고, 허리도 아프고, 자격증 시험의 압박도 있고,
잠시 자료구조 공부는 중단하기로 했다.
책은 "윤성우의 자료구조" 이다.

그럼 당분간 빠이여~~ ;;;