2008년 8월 31일 일요일

css switcher

css를 구조,위치적인 부분이랑 효과,색상적인 부분으로 나눈다...

참고 - http://www.csszengarden.com/tr/korean/

2008년 8월 28일 목요일

브라우저에 따른 css 분리 - Conditional comments

링크 - 1. http://www.quirksmode.org/css/condcom.html

2. http://havfunnet.tistory.com/41

2008년 8월 26일 화요일

Ajax와 DOM 스크립팅을 쉽게 하는 방법

난이도 : 중급

Jesse Skinner, Web Developer, Freelance

2007 년 9 월 04 일

jQuery는 JavaScript 라이브러리로서 JavaScript™와 Asynchronous JavaScript + XML (Ajax) 프로그래밍을 단순화 하는데 도움이 됩니다. JavaScript 라이브러리와는 달리, jQuery는 복잡한 코드를 간결하게 표현할 수 있는 독특한 철학이 있습니다. jQuery 원리, 기능과 특징을 배우고, 일반적인 Ajax 태스크도 수행하며, 플러그인으로 jQuery를 확장하는 방법도 알아봅니다.

jQuery란 무엇인가?

2006년 초, John Resig가 만든 jQuery는 JavaScript 코드로 작업하는 사람들에게는 훌륭한 라이브러리이다. 여러분이 JavaScript 언어 초보자라서 라이브러리가 Document Object Model (DOM) 스크립팅과 Ajax의 복잡성을 다루어주기를 원하든지, 숙련된 JavaScript 구루로서 DOM 스크립팅과 Ajax의 반복성에 지루해졌다면, jQuery가 제격이다.

jQuery는 코드를 단순하고 간결하게 유지한다. 많은 반복 루프와 DOM 스크립팅 라이브러리 호출을 작성할 필요가 없다. jQuery를 사용하면 매우 적은 문자로 표현할 수 있다.

jQuery 철학은 매우 독특하다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. 여러분이 이러한 철학을 이해하고 여기에 편안함을 느낀다면, jQuery가 여러분의 프로그래밍 방식을 충분히 향상시킬 수 있다.

위로

단순화

다음은 jQuery가 여러분의 코드에 어떤 영향을 미치는지를 보여주는 예제이다. 페이지의 모든 링크에 클릭 이벤트를 붙이는 것 같이 단순하고 일반적인 것을 수행하려면, 플레인 JavaScript 코드와 DOM 스크립팅을 사용하는 것이 낫다. (Listing 1)

Listing 1. jQuery 없는 DOM 스크립팅

                
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}

Listing 2는 같은 기능에 jQuery를 사용한 모습이다.

Listing 2. jQuery를 사용한 DOM 스크립팅

                
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

놀랍지 않은가? jQuery를 사용하면 복잡하지 않게 코드로 표현하고자 하는 것만 나타낼 수 있다. 엘리먼트를 반복할 필요가 없다. click() 함수가 이 모든 것을 관리한다. 또한, 다중 DOM 스크립팅 호출도 필요 없다. 여기에서 필요한 것은 엘리먼트가 어떻게 작동하는지를 설명하는 짧은 스트링이다.

이 코드로 어떻게 작업이 수행되는지를 이해하기는 조금 어렵다. 우선, $() 함수가 있어야 한다. 이것은 jQuery에서 가장 강력한 함수이다. 대게, 이 함수를 사용하여 문서에서 엘리먼트를 선택한다. 이 예제에서, 이 함수는 Cascading Style Sheets (CSS) 신택스를 포함하고 있는 스트링으로 전달되고, jQuery는 효율적으로 이 엘리먼트를 찾는다.

CSS 셀렉터의 기본을 이해하고 있다면, 이 신택스가 익숙할 것이다. Listing 2에서, #external_links는 external_links의 id를 가진 엘리먼트를 찾는다. a 앞에 있는 공간은 jQuery에게 external_links 엘리먼트 내의 모든 <a> 엘리먼트를 찾도록 명령한다. 영어와 DOM은 장황하지만, CSS에서는 매우 간단하다.

$() 함수는 CSS 셀렉터와 매치하는 모든 엘리먼트를 포함하고 있는 jQuery 객체를 리턴한다. jQuery 객체는 어레이와 비슷하지만, 수 많은 특별한 jQuery 함수들이 포함된다. 예를 들어, click 함수를 호출함으로써 클릭 핸들러 함수를 jQuery 객체의 각 엘리먼트에 할당할 수 있다.

또한, 엘리먼트나 엘리먼트의 어레이를 $() 함수로 전달하면, 이것은 엘리먼트 주위에 jQuery 객체를 래핑할 것이다. 이 기능을 사용하여 window 객체 같은 것에 jQuery 함수를 적용하고 싶을 것이다. 일반적으로 이 함수를 다음과 같이 로드 이벤트에 할당한다.

window.onload = function() {
    // do this stuff when the page is done loading
};

jQuery를 사용하면, 같은 코드도 다음과 같이 된다.

$(window).load(function() {
    // run this when the whole page has been downloaded
});

이미 알고 있었겠지만, 윈도우가 로딩하기를 기다리는 일은 매우 지루한 일이다. 전체 페이지가 로딩을 끝마쳐야 하기 때문이다. 여기에는 페이지의 모든 이미지들도 포함된다. 가끔, 이미지 로딩을 먼저 끝내고 싶지만, 대부분의 경우 Hypertext Markup Language (HTML)만 로딩해야 한다. jQuery는 문서에 특별한 ready 이벤트를 만듦으로써 이 문제를 해결한다.

$(document).ready(function() {
    // do this stuff when the HTML is all ready
});

이 코드는 document 엘리먼트 주위에 jQuery 객체를 만들고, HTML DOM 문서가 준비될 때 함수를 설정하여 인스턴스를 호출한다. 이 함수를 필요한 만큼 호출할 수 있다. 진정한 jQuery 스타일에서, 지름길은 이 함수를 호출하는 것이다. 함수를 $() 함수로 전달한다.

$(function() {
    // run this when the HTML is done downloading
});

지금까지, $() 함수를 사용하는 세 가지 방법을 설명했다. 네 번째 방법은, 스트링을 사용하여 엘리먼트를 만드는 것이다. 결과는, 그 엘리먼트를 포함하고 있는 jQuery 객체가 된다. Listing 3은 문단을 페이지에 추가하는 예제이다.

Listing 3. 간단한 문단을 생성하여 붙이기

                
$('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");

이전 예제에서 파악했겠지만, jQuery의 또 다른 강력한 기능은 메소드 체인(method chaining.)이다. jQuery 객체에 대해 메소드를 호출할 때마다, 이 메소드는 같은 jQuery 객체를 리턴한다. jQuery 객체에 다중 메소드를 호출하고 싶다면 셀렉터를 다시 입력하지 않고 이를 수행할 수 있다.

$('#message').css('background', 'yellow').html('Hello!').show();

위로

Ajax로 단순하게!

Ajax는 jQuery를 사용하면 더 단순해 질 수 있다. jQuery에는 쉬운 것도 쉽게 복잡한 것도 가능한 단순하게 만드는 유용한 함수들이 많이 있다.

Ajax에서 사용되는 방식은 HTML 청크를 페이지 영역에 로딩하는 것이다. 여러분이 필요로 하는 엘리먼트를 선택하고 load() 함수를 사용하는 것이다. 다음은 통계를 업데이트 하는 예제이다.

$('#stats').load('stats.html');

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. Listing 4는 데이터를 보내고 콜백을 사용하는 예제이다.

Listing 4. Ajax를 사용하여 데이터를 페이지로 보내기

                
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

복잡한 Ajax 스크립팅을 해야 한다면, $.ajax() 함수가 필요하다. xml, html, script, json을 지정할 수 있고, 여러분이 바로 사용할 수 있도록 jQuery가 자동으로 콜백 함수에 대한 결과를 준비한다. 또한, beforeSend, error, success, complete 콜백을 지정하여 사용자에게 Ajax에 대한 더 많은 피드백을 제공할 수 있다. 게다가, Ajax 요청의 타임아웃이나 페이지의 "최종 변경" 상태를 설정하는 매개변수들도 있다. Listing 5는 필자가 언급했던 매개변수를 사용하여 XML 문서를 검색하는 예제이다.

Listing 5. $.ajax()를 사용하여 복잡한 Ajax를 단순하게

                
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

콜백 성공으로 XML을 받으면, jQuery를 사용하여 HTML에서 했던 것과 같은 방식으로 XML을 볼 수 있다. 이는 XML 문서 작업을 쉽게 하며 콘텐트와 데이터를 웹 사이트로 쉽게 통합시킨다. Listing 6은 리스트 아이템을 XML의 <item> 엘리먼트용 웹 페이지에 추가하는 success 함수에 대한 확장 모습이다.

Listing 6. jQuery를 사용하여 XML 작업하기

                
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

위로

HTML 애니메이션

jQuery를 사용하여 기본적인 애니메이션과 효과를 다룰 수 있다. 애니메이션 코드의 중심에는 animate() 함수가 있는데, 이는 숫자로 된 CSS 스타일 값을 바꾼다. 예를 들어, 높이, 넓이, 폭, 위치를 움직일 수 있다. 또한, 애니메이션의 속도를 밀리초 또는 사전 정의된 속도(느림, 보통, 빠름)로 지정할 수 있다.

다음은, 엘리먼트의 높이와 넓이를 동시에 움직이게 하는 예제이다. 시작 값은 없고 종료 값만 있다. 시작 값은 엘리먼트의 현재 크기에서 가져온다. 여기에도 콜백 함수를 첨부했다.

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});

jQuery는 빌트인 함수를 사용하여 일반적인 애니메이션도 더욱 쉽게 만든다. show()와 hide() 엘리먼트를 즉각적으로 또는 지정된 속도로 사용할 수 있다. fadeIn()과 fadeOut() 또는 slideDown()과 slideUp()을 사용하여 엘리먼트를 나타나게 하거나 사라지게 할 수 있다. 다음은 네비게이션의 slidedown 예제이다.

$('#nav').slideDown('slow');

위로

DOM 스크립팅과 이벤트 핸들링

jQuery는 DOM 스크립팅과 이벤트 핸들링을 단순화하는데 제격이다. DOM의 트래버스와 조작이 쉽고, 이벤트의 첨부, 제거, 호출은 매우 자연스러운 일이며, 직접 수행하는 것보다 에러도 적게 발생한다.

기본적으로 jQuery는 DOM 스크립팅으로 수행하는 일들을 더욱 쉽게 수행할 수 있도록 해준다. 엘리먼트를 생성하고 append() 함수를 사용하여 이들을 다른 엘리먼트로 연결할 수 있고, clone()을 사용하여 엘리먼트를 중복시키고, 콘텐트를 html()로 설정하고, empty() 함수로 콘텐트를 삭제하고, remove() 함수로 엘리먼트를 삭제하고, wrap() 함수를 사용하여 또 다른 엘리먼트로 엘리먼트를 래핑한다.

DOM을 트래버스 함으로써 jQuery 객체의 콘텐트를 변경할 때 여러 함수들을 사용할 수 있다. 엘리먼트의 siblings(), parents(), children()을 사용할 수 있다. 또한, next() 또는 prev() sibling 엘리먼트도 선택할 수 있다. 아마도 가장 강력한 것은 find() 함수일 것이다. jQuery 셀렉터를 사용하여 jQuery 객체의 엘리먼트 종속 관계들을 통해 검색할 수 있다.

이 함수는 end() 함수와 사용될 때 더욱 강력해진다. 이 함수는 실행 취소 함수와 비슷하고, find() 또는 parents() 또는 다른 트래버싱 함수들을 호출하기 전에 가졌던 jQuery 객체로 돌아간다.

메소드 체인과 함께 사용되면, 복잡한 연산도 단순하게 보이게 할 수 있다. Listing 7은 로그인 폼을 찾고 이와 관련한 여러 엘리먼트를 조작하는 예제이다.

Listing 7. DOM의 트래버스와 조작

                
$('form#login')
    // hide all the labels inside the form with the 'optional' class
    .find('label.optional').hide().end()

    // add a red border to any password fields in the form
    .find('input:password').css('border', '1px solid red').end()

    // add a submit handler to the form
    .submit(function(){
        return confirm('Are you sure you want to submit?');
    });

믿을 수 있는지 모르겠지만, 이 예제는, 공백을 사용한 하나의 연결된 코드 라인일 뿐이다. 우선, 로그인 폼을 선택했다. 그리고 나서, 이 안에 선택 레이블을 찾고, 이들을 숨긴 다음, end()를 호출하여 폼으로 돌아가게 하였다. 패스워드 필드를 찾았고, 보더를 빨간색으로 한 다음, 다시 end()를 호출하여 폼으로 돌아갔다. 마지막으로, 제출 이벤트 핸들러를 폼에 추가했다. 여기에서 특히 재미있는 부분은 jQuery가 모든 쿼리 연산들을 최적화 하기 때문에, 여러분은 모든 것이 서로 잘 연결될 때 엘리먼트를 두 번 찾을 필요가 없다.

공통 이벤트 핸들링은 click(), submit(), mouseover() 같은 함수를 호출하고 여기에 이벤트 핸들러 함수를 전달하는 것만큼 단순하다. 게다가, bind('eventname', function(){})을 사용하여 커스텀 이벤트 핸들러를 할당하는 옵션도 있다. unbind('eventname')를 사용하여 특정 이벤트를 제거하거나, unbind()를 사용하여 모든 이벤트를 제거할 수 있다. 이것과 기타 함수들을 사용하는 다른 방법들은, jQuery 애플리케이션 프로그램 인터페이스(API) 문서를 참조하라. (참고자료)

위로

jQuery 셀렉터의 힘 활용하기

#myid 같은 아이디 또는 div.myclass 같은 클래스 이름으로 엘리먼트를 선택한다. 하지만, jQuery는 하나의 셀렉터에서 거의 모든 엘리먼트 조합을 선택할 수 있도록 하는 복잡하고도 완벽한 셀렉터 신택스를 갖고 있다.

jQuery의 셀렉터 신택스는 CSS3과 XPath에 기반하고 있다. CSS3과 XPath 신택스를 더욱 잘 안다면, jQuery 사용이 더욱 수월해진다. CSS와 XPath를 포함하여 jQuery 셀렉터의 전체 리스트를 보려면 참고자료 섹션을 참조하라.

CSS3에는 모든 브라우저가 지원하지 않는 신택스가 포함되어 있기 때문에, 이를 자주 볼 수 없다. 하지만, jQuery에서 CSS3을 사용하여 엘리먼트를 선택한다. jQuery는 고유의 커스텀 셀렉터 엔진을 갖고 있다. 예를 들어, 테이블의 모든 빈 컬럼 안에 대시(dash)를 추가하려면, :empty pseudo-selector를 사용한다.

$('td:empty').html('-');

특정 클래스를 갖고 있지 않은 모든 엘리먼트를 찾는다면? CSS3은 이를 위한 신택스도 있다. :not pseudo-selector를 사용하는 것이다. 다음은 required의 클래스를 갖고 있지 않은 모든 인풋을 숨기는 방법이다.

$('input:not(.required)').hide();

또한, CSS에서처럼 다중 셀렉터를 콤마를 사용하여 하나로 연결시킬 수 있다. 다음은 이 페이지에서 모든 리스트 유형들을 동시에 숨기는 예제이다.

$('ul, ol, dl').hide();

XPath는 하나의 문서에서 엘리먼트를 찾는 강력한 신택스이다. CSS와는 다르며, CSS로 수행할 수 없는 몇 가지 일을 수행할 수 있다. 보더를 모든 체크 박스의 부모 엘리먼트에 추가하려면, XPath의 /.. 신택스를 사용할 수 있다.

$("input:checkbox/..").css('border', '1px solid #777');

가독성 있는 테이블을 만들려면, 다른 클래스 이름을 테이블의 모든 짝수 또는 홀수 행에 붙인다. 이를 다른 말로 테이블의 스트라이핑(striping)이라고 한다. jQuery를 사용하면 :odd pseudo-selector 덕택에 쉽게 수행할 수 있다. 아래 예제는 테이블의 모든 홀수 행의 백그라운드를 striped 클래스를 사용하여 변경한다.

$('table.striped > tr:odd').css('background', '#999999');

jQuery 셀렉터로 코드를 어느 정도 단순화 할 수 있는지를 보았다. 어떤 엘리먼트를 선택하든지 간에, 하나의 jQuery 셀렉터를 사용하여 이를 정의하는 방법도 찾을 수 있다.

위로

플러그인으로 jQuery 확장하기

대부분의 소프트웨어와는 달리, jQuery용 플러그인 작성은 복잡한 API를 사용해야 하는 힘든 일이 아니다. 사실, jQuery 플러그인은 작성하기가 쉬워서 몇 가지만 작성하면 코드를 더욱 단순하게 유지할 수 있다. 다음은 여러분이 작성할 수 있는 가장 기본적인 jQuery 플러그인이다.

$.fn.donothing = function(){
    return this;
};

단순하지만, 이 플러그인은 약간의 설명이 필요하다. 우선, 함수를 모든 jQuery 객체에 추가하려면, 여기에 $.fn을 할당하고, 이 함수는 this (jQuery 객체)를 리턴하여 이것이 메소드 체인을 깨트리지 않도록 해야 한다.

이 예제를 기반으로 쉽게 구현할 수 있다. css('background')를 사용하는 대신 플러그인을 작성하여 백그라운드를 바꾸려면, 다음을 사용한다.

$.fn.background = function(bg){
    return this.css('background', bg);
};

css()에서 값을 리턴할 뿐이다. 이것은 이미 jQuery 객체를 리턴하기 때문이다. 따라서, 메소드 체인은 여전이 잘 작동한다.

여러분은 반복 작업이 있을 경우에 jQuery 플러그인을 사용하기 바란다. 예를 들어, 같은 일을 여러 번 수행하기 위해 each() 함수를 사용하고 있다면 플러그인을 사용해도 된다.

jQuery 플러그인을 작성이 쉽기 때문에, 여러분이 사용할 수 있는 것도 수백 가지나 존재한다. jQuery는 탭, 곡선형 코너, 슬라이드 쇼, 툴 팁, 날짜 셀렉터, 기타 여러분이 상상하고 있는 모든 것을 위한 플러그인이 있다. 플러그인 리스트는 참고자료 섹션을 참조하기 바란다.

가장 복잡하고 광범위하게 사용되는 플러그인은 Interface이다. 이것은 정렬, 드래그&드롭 기능, 복합 효과, 기타 복잡한 사용자 인터페이스(UI)를 핸들하는 애니메이션 플러그인이다. Interface가 jQuery를 위한 것이라면 Prototype에는 Scriptaculous가 있다.

또한 Form 플러그인도 대중적이고 유용하다. 이것으로 Ajax를 사용하여 백그라운드에서 폼을 쉽게 제출할 수 있다. 이 플러그인은 폼의 제출 이벤트를 하이재킹 하고, 다른 인풋 필드를 찾고, 이들을 사용하여 Ajax 호출을 구현하는 상황에 사용된다.

위로

jQuery 이후의 삶

jQuery를 사용하여 할 수 있는 것의 표면적인 부분만 다루었다. jQuery는 기분 좋게 사용할 수 있고 새로운 트릭이나 기능도 자연스럽다. jQuery는 JavaScript와 Ajax 프로그래밍을 매우 단순화 시킬 수 있다. 새로운 것을 배울 때마다 코드는 더욱 단순해 진다.

jQuery를 배운 후에, 필자는 JavaScript 언어로 하는 프로그래밍에 재미를 발견했다. 지루한 부분은 알아서 처리되기 때문에, 필자는 중요한 코딩 부분에만 집중하면 된다. jQuery를 사용하게 되면서 지난날 for 루프를 작성하던 때는 거의 기억이 나지 않는다. 심지어, 다른 JavaScript 라이브러리를 사용할 생각도 거의 하지 않는다. jQuery는 JavaScript 프로그래밍 방식을 진정으로 바꿔 놓았다.

참고자료

교육

한국 developerWorks XML 존: 한국 developerWorks XML 존에서 XML 관련 자료를 더 볼 수 있다.
jQuery API 문서
jQuery 튜토리얼
Visual jQuery: jQuery API 레퍼런스.
IBM XML 인증: XML 분야의 IBM 인증 개발자에 도전하십시오.
XML 기술 자료: 한국 developerWorks XML 존에서 다양한 기술 자료, 팁, 튜토리얼, 표준, IBM Redbook 참고하기.

제품 및 기술 얻기

jQuery: jQuery 메인 사이트를 방문해 소프코드 다운로드 하기.
Selectors: CSS3과 XPath 셀렉터를 포함하여 jQuery에 사용되는 모든 셀렉터들.
jQuery 플러그인
Interface
Form 플러그인

토론

jQuery 블로그: : 공식 jQuery 블로그에서 정규 뉴스와 업데이트 확인하기.
XML 존 토론 포럼

필자소개


		Jesse Skinner는 JavaScript와 CSS 전문 프리랜스 웹 개발자이다. 캐나다와 독일이 주 활동 무대이며, CSS 브라우저 호환성 미스터리를 풀고 있다. Jesse에 대해 더욱 알고 싶거나 웹 개발에 대한 글을 더 읽고 싶다면, 블로그 The Future of the Web를 방문해 보라.

출처 : http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html

내가 prototype에서 jQuery로 옮긴이유.

이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

1. BDD(Behavior driven development)
jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

$(element).click(function(){
  alert("warning");
});

이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
1. href를 "javascript:void(0);"로 변경하고
2. 클릭시 로그를 남기고
3. onhover시(mouse over시) 배경색을 변경한다.

$("div.speciallinks").attr("href","javascript:void(0)")
  .click(function() {console.log("div.speciallinks clicked");})
  .hover(function(){$(this).addClass("hovered");},
       function(){$(this).removeClass("hovered");});

2. MVC + J
MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

3. 액션 체인(Chaining of actions)
액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

$("div.message").show()
  .append("<p>Action has been executed successfully")
  .addClass("flash");
// 각 함수는 라인으로 구분��여 사용한다.

이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다.

4. CSS 셀렉터 문제(CSS Selector rocks)
CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id

속성을 사용하는 것이 최선이라는 것을 알게 됐다.

5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

if ($('user-box')!=null) {
    // jQuery에서는 이 if 블럭이 필요없다.
    $("user-box").style.backgroundColor = "red";
}

6. Aids development process
jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

jQuery의 경우

$("div.tabs").hide();
$("div#tabs1").show();

Prototype의 경우

$$("div.tabs").invoke("hide");
     //이거��
$$("div.tabs").each(function(x){
  Element.hide(x);
});
// 그리고 다음과 같은 코드로 마무리한다.
$("tabs1").show();

Example2:
엘리먼트의 CSS를 수정하는 예제

jQuery의 경우

$("#user-box").css("background-color","red")

Prototype의 경우

var a = $("user-box");
a.style.cssText +=
       "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다(http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison).

Prototype이 좋은 이유
1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는 activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.

스크랩출처 : http://dogfeet.tistory.com/29

2008년 8월 25일 월요일

jQuery 공부중 v.2

1. css(name) : name의 값을 뽑아준다.

var color = $("p").css("background-color");

2. css(property) : 해당 엘리먼트 css를 property로 정의.

$("p").css({ backgroundColor:"yellow", fontWeight:"bolder" });

3. css(name,value) : name의 값을 value로 채움.

4. offset() : 엘리먼트의 위치를 리턴

var offset = p.offset();
offset.left, offset.top 으로 사용.

5. height() : 엘리먼트의 높이값을 뽑아준다.

height(val) : 엘리먼트의 높이값을 val로 세팅.

※ width도 마찬가지.

jQuery 공부중 v.1

※ 주의!!

개인적인 공부를 위해 정리를 해놓은것이므로 다른분들도 충분히 테스트 후에 사용

하세요~잘못된 내용에 대한 가르침은 환영입니다~

1. html()

$("div").html("<b>Wow!</b> Such excitement...");

이거하믄 IE7에서는 "Wow!" 밖에 안나온다.(IE6도 그러네 ㅎ)

FF3에서는 다 나온다.

span이라도 붙여줘야하나?ㅡㅡㅋ

2. text()

html tag없이 단순 텍스트만 받는군...

3. append(content)

$("p").append("hello");

p 엘리먼트에 추가

4. appendTo(content)

$("p").appendTo("#ok");

id가 "ok"인 엘리먼트에 "p"의 내용을 더한다.

파라미터는 말이 content이지 실제로는 target인듯...

5. prepend(content), prependTo(content)

append, appendTo와 같은방식이지만...content가 맨앞에 붙음.

※ 기이한 현상(?)

$("p").append("<b>Hello </b>");
$("span").appendTo("#ok");
$("p").prepend("<b>Hello </b>");
$("span").prependTo("#ok")

--> append,prepend는 타겟엘리먼트가 같아도 그냥 앞,뒤로 붙는다.

--> 그러나 appendTo,prependTo는 마지막코드만 수행한다.

--> 왜그러지? 초기화시키는 코드가 들어있나?ㅡㅡㅋ

--> ㅡㅡㅋ 그 복잡한 코드를 봐야하나?

6. after,before는 append,prepend랑 비슷하게 쓰는듯...

7. insertAfter, insertBefore는 각각 before, after과 동일하다.

즉, insertAfter는 after의 반대, insertBefore는 before의 반대.

8. wrap,wrapall은 말그대로 감싸는것. wrapInner도 말그대로 타겟엘리먼트의 안쪽을 감

싸는것.

9. replaceWith(content)

$("p").replaceWith("<b>Paragraph. </b>");

타겟엘리먼트(여기선 p태그들...)를

content(<b>Paragraph. </b>)로 바꾼다.

replaceAll(selector)는 replaceWith의 다른형태.

-> $("<b>Paragraph. </b>").replaceAll("p");

10. empty() 와 remove()의 차이를 모르겠다. 둘다 똑같은듯...ㅡㅡㅋ

11. clone()

엘리먼트 복사

clone(true)

해당 엘리먼트의 이벤트까지 복사를 해버린다.

참고사이트 : http://docs.jquery.com/Manipulation

2008년 8월 21일 목요일

PHP의 미래 - 링크

http://www.ibm.com/developerworks/kr/library/os-php-future/

2008년 8월 19일 화요일

HTML DTD 정보

모든 markup 문서 상단에는 이 문서가 어떠한 형식을 따른 문서인지를 명시해주는 Document Type Definition 이 존재 해야 한다. 이 DTD 선언은 브라우져가 어떠한 랜더링 모드를 선택할 것인지를 판별하게 하거나, 파서가 문서 파싱을 어떻게 해야 하는지를 알려주는 중요한 정보이다. DTD 선언은 해당 문서를 어떻게 읽어야 하는 지를 알려주게 되고 validator는 전적으로 이 DTD 선언에 의지 하여 문서를 판별하게 된다. 웹에서 주로 사용하는 DTD 는 HTML 4.01 과 XHTML 1.0, XHTML 1.1 이 있다.

HTML 4.01 Strict DTD

더이상지원하지 않는 element 와 attribute 가 제외된 DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD

더이상지원하지 않는 element 와 attribute 가 제외되지 않은 visual 측면을 고려한 DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD

frameset 이 추가된 DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD

HTML 에 XML 의 개념을 도입한 문서타입

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

이전 버전과는 다른 완전한 xml이라 할 수 있으며 application/xhtml+xml 형식의 mime-type 으로 배포되어야 하는 형식. Strict, Transitional 등의 구분이 없어졌음

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

출처 : http://blog.naver.com/hancci7/20024414108

API란?

API는 Application Program Interface의 약자입니다. 컴터와 운영체제와 사용자의 관계를 보면 다음과 같습니다.

예를 들어 사용자가 메모장으로 프린터를 사용하여 인쇄를 하려면 사용자부터 시작해서 Hardware 까지 모든 과정을 거쳐야만 인쇄가 가능합니다.

위에서 OSI,OS,API,GUI 는 운영체제에 속해있죠. 일부 Application도 운영체제에 속해있습니다. 인터넷익스플로어, 탐색기, 계산기, 등등이 운영체제안에 있는 Application 이죠.

잘 보시면 Interface가 3개가 있죠? OSI, API, GUI 다 중간 메체입니다. GUI는 사용자와 컴터간의 중간매체. 스크린에 나와있는 윈도우 자체죠. 마우스를 사용해서 사용자가 클릭만으로 편리(?)하게 사용할수 있게 해주는 매체입니다. 도스에서는 시꺼먼 화면에 하얀글씨로 명령을 입력해서 실행했는데 윈도우에선 마우스로 클릭만하면 돼니까요. 참고로 도스같은 인터페이스는 CLI(Command line Interface)라고 합니다.

OSI는 운영체제와 하드웨어의 중간 매체. 장치드라이버로 보시면 됍니다. 하드웨어를 운영체제가 원할하게 사용할 수 있게 해주죠.

API는 프로그램과 운영체제 사이의 중간매체. 프로그램을 원할히 작동하게 합니다. 함수, 루틴과 프로토콜로 이루워져 있습니다. 그래서 프로그램을 만들때 쉽게 해주죠. 예를 들어 파일을 열때, 장치를 사용하고 싶을때 API의 함수나 서브루틴을 사용하면 돼니까요.

옛날 도스 시절에는 프로그래머가 하드웨어까지 다 통달해서 그에 맞는 프로그램을 만들었습니다. 도스용 아래한글을 보면 프린터 드라이버 까지 프로그램안에 같이 들어있었습니다.

set_time_limit 함수 - 타임아웃 설정

set_time_limit 함수 - 타임아웃 설정

아파치등의 웹서버에 설정된 타임아웃,
PHP에 설정된 타임아웃등으로 인해,
CGI를 실행할 때 너무 많은 시간동안 프로그램이 돌면,
강제로 정지됩니다.

이때, 그 목숨을 좀 살려보려고 하는 명령어가 set_time_limit 입니다.
가령, 30초까지만 수행되도록 한 서버인데, 자신의 프로그램이 30초가 넘도록 실행된다면, 중간에 멈춰버립니다. 그리고는 해당 URL을 찾지 못했습니다.라는 메시지를 뿌립니다.

이럴땐, 그 프로그램에 set_time_limit(30);이라고 해보세요.그러면 프로그램이 수행되다가 그 명령어를 만나면,그 시점부터 30초를 연장해줍니다. (그 시점부터임!!!)

아예, 스크립트가 모두 수행될 때까지 하려면,
set_time_limit(0);
이렇게 쓰면 됩니다

알뜰사이트 모음.

제가 주로 이용하는 알뜰사이트를 모아봤어요~

알뜰하게 생활해서 부자되세요^^*

[짠돌이 짠순이라면 꼭 알아야할 사이트 모음]

[할인쿠폰 사이트]-음식점, 공연, 쇼핑 등 다양한 쿠폰을 얻을 수 있는 사이트

코코펀: www.cocofun.co.kr

다음쿠폰: www.coupon.daum.net

네이버쿠폰: www.coupon.naver.com

※ 할인쿠폰 뿐만 아니라 교환쿠폰도 있으니 잘 활용해보아요^^

[반품,재고 판매몰]-인터넷몰, 홈쇼핑 등에서 반품된 제품을 저렴하게 살 수 있는 사이트

반품닷컴: www.vanpum.com

반품할인닷컴: www.vanpumdc.com

유니즈: www.uniz.co.kr

※ 반품된 제품이니 꼼꼼하게 살피는 센스가 필요하답니다^^

[구매대행 사이트]-해외 유명 브랜드 제품을 저렴하게 구입할 수 있는 사이트

프라이빗쉬크: www.privatechic.com

아이하우스: www.iehouse.co.kr

라흐두뜨: www.laredoute.co.kr

※ 해외 구매 대행은 국내에서 구할 수 없는 상품을 손쉽게 구할 수 있기 때문에 편리하죠^^

[재테크 관련 사이트]-인터넷 쇼핑몰 HUB사이트! 인터넷 쇼핑하면 현금 주는 사이트

모네타: www.moneta.co.kr (가계부를 무료로 이용할 수 있어요~)

부자펀드닷컴: www.bujafund.com (자산관리 무료상담을 받을 수 있어요~)

재테크 올가이드: www.donga.com/docs/money/index.html (동아일보 제공)

머니플랜: http://www.money-plan.co.kr/ (재테크 무료 상담 서비스)

※ 옥션, 지마켓 등 200여 제휴쇼핑몰에서 쇼핑하면 결재금액의 평균 3%를 환급해줘요^^

[웨딩 포털 사이트]-알뜰하게 결혼을 준비하는 예비 신랑신부라면 알아야 할 사이트

신부클럽: 신부클럽 (홈페이지에 글을 남기면 뚝배기세트를 줘요~)

해피즌: www.happizen.co.kr (웨딩 다이어리를 무료로 줘요~)

본웨딩: www.bornwedding.com (웨딩잡지, 신부수첩, 카다록, 면세점할인권을 줘요~)

※ 결혼 준비하실 때는 최대한 많은 곳에서 견적을 알아보는게 알뜰결혼의 지름길이예요^^

[마일리지 통합 사이트]-인터넷 쇼핑몰 HUB사이트! 인터넷 쇼핑하면 현금 주는 사이트

티끌모아닷컴: www.tigglmoa.com (KBS 경제비타민 소개된 쇼핑비용 환급 서비스)

※ 옥션, 지마켓 등 200여 제휴쇼핑몰에서 쇼핑하면 결재금액의 평균 3%를 환급해줘요^^

[무료샘플 사이트]-화장품 샘플을 무료배송 해주는 사이트

BRTC: www.brtc.co.kr (비비크림 파우치 등 5종 무료샘플, 무료배송)

에틱스: www.etics.co.kr (인텐스 파우치 등 5종 무료샘플, 무료배송)

미라큐어: www.miomi.co.kr (가루팩 무료샘플, 무료배송)

※ 무료샘플을 모아두실 때에는 샘플 겉면에 화장품종류와 유통기간 적어두시면 샘플 활동하실 때 도움이 된답니다^^

[설문조사 사이트]-설문조사 후 상품 또는 현금을 주는 사이트

TNS 가구패널: www.homepanel.co.kr (OK캐쉬백 추가적립, 사은품 교환)

소비자패널: www.lightspeedpanel.com (설문시 현금지급, 추가 이벤트 진행)

※ 설문조사는 꾸준히 활동해야 좋습니다. 생활비정도 벌 수 있어요~

우수활동자는 혜택도 더 많답니다^^

[외국어 교육 사이트]-돈 안들이고 무료로 공부할 수 있는 사이트

ESPT 영어: www.adverkins.com (ESPT 자료집과 CD샘플을 보내줘요~)

이지로 중국어: www.eziro.com (중국어 온라인 강의를 무료로 볼 수 있어요~)

맛있는 일본어: www.yamyamjpn.com (기초 어휘부터, JPT의 어휘 정보가 있어요~)

※ 첫리길도 한걸음부터라는 속담이 있듯이 차근차근 외국어 실력을 쌓아보아요^^

[가격비교 사이트]-각종 쇼핑몰의 판매가격을 비교할 수 있는 사이트

다나와: www.danawa.co.kr

오미: www.omi.co.kr

에누리: www.enuri.com

※ 가격비교를 하실때에는 할인률 그리고 할인쿠폰을 적용해서 따져보세요~

제일 중요한 것은 충동구매를 자제해야 된다는거..... 아시죠??

[ 100% 무료증정 경품이벤트 ]

(1)인스벨리 ins.com바로가기/

: 신세계백화점상품권 경품

(2)동양 meris.com바로가기/

: 캐리비안베이 이용권, 방수디카

(3)라이나 braian.com바로가기/

: 노트북, 닌텐도 100만원 경품

(4)에이스 dbsinb.paran.com바로가기/

: 닌텐도, 백화점상품권 추첨경품

(5) 아이챌린지 i-challenge.co.kr 바로가기 클릭

: 토니로마스 무료쿠폰, 유아교재 경품

Mysql Explain보는법

# 이글은 mysql document 의 7.2.1 Explain Syntax 를 대~충 번역한 것입니다.

# 틈틈이 번역하고 있으나 언제 완료될지 모릅니다..

EXPLAIN 을 사용함으로써 인덱스가 적절히 사용되고 있는지 검토할 수 있다. 인덱스가 잘못 사용되고 있다면 ANALYZE TABLE 을 사용하여 테이블을 점검하라.
이것은 테이블의 상태를 갱신하며 옵티마이저의 동작에 영향을 준다.

옵티마이저가 SELECT 에 기록된 순서대로 조인을 행하게 강제하려면 SELECT 대신에 SELECT STRAIGHT_JOIN 을 사용하라.

EXPLAIN 은 SELECT 문에 사용된 각 테이블당 하나의 행을 리턴한다. 나열된 순서는 MYSQL 이 쿼리처리에 사용하는 순서대로 출력된다.

MYSQL 은 모든 조인을 single-sweep multi-join 방식을 사용하여 해결한다. 이것은 MYSQL 이 첫번째 테이블에서 한행을 읽고, 두번째 테이블에서 매치되는 행을 찾고, 세번째 테이블에서 매치되는 행을 찾고.. 그러한 방식이다. 모든 테이블들이 처리된 후 추출된 컬럼을 출력하고 다시 처음 테이블로 돌아가서 조인을 계속한다. 이런식으로 첫번째 테이블에 더이상 남는행이 없을때까지 실행한다.

(어느것이 첫번째 테이블이 될지는 mysql 옵티마이저가 결정할 문제이다. STRAIGHT_JOIN 을 명시하지 않았다면 유저가 입력한 순서와는 관련이 없다.)

MYSQL 4.1 버전에서 EXPLAIN 의 출력포멧이 UNION 과 subquery, derived table 을 다루기에 더 효과적으로 변경되었다. 무엇보다 중요한 것은 id , select_type 의 두 컬럼이 추가된 것이다.

EXPLAIN 의 각 행은 하나의 테이블에 대한 정보를 보여주며 다음과 같은 컬럼들로 구성된다.

id

SELECT 번호, 쿼리내의 SELECT 의 구분번호이다.
select_type

SELECT 의 타입, 다음과 같다.
- SIMPLE
  
  단순 SELECT (UNION 이나 서브쿼리를 사용하지 않음)
- PRIMARY
  
  가장 외곽의 SELECT
- UNION
  
  UNION 에서의 두번째 혹은 나중에 따라오는 SELECT
- DEPENDENT UNION
  
  UNION 에서의 두번째 혹은 나중에 따라오는 SELECT, 외곽쿼리에 의존적이다.
- UNION RESULT
  
  UNION 의 결과물.
- SUBQUERY
  
  서브쿼리의 첫번째 SELECT
- DEPENDENT SUBQUERY
  
  서브쿼리의 첫번째 SELECT, 외곽쿼리에 의존적이다.
- DERIVED
  
  SELECT 로 추출된 테이블 (FROM 절 내부의 서브쿼리)
table

나타난 결과가 참조하는 테이블명.
type

조인타입, 아래와 같다. 우수한 순서대로 뒤로갈수록 나쁜 조인형태이다.
- system
  
  테이블에 단 하나의 행만 존재(시스템 테이블). const join 의 특수한 경우이다.
- const
  
  많아야 하나의 매치되는 행만 존재하는 경우. 하나의 행이기 때문에 각 컬럼값은 나머지 연산에서 상수로 간주되며, 처음 한번만 읽어들이면 되기 때문에 무지 빠르다.
  PRIMARY KEY 나 UNIQUE index 를 상수와 비교하는 경우.
  아래의 경우에서 tbl_name 은 const table 로 조인된다.
  
  SELECT * FROM tbl_name WHERE primary_key=1;
  SELECT * FROM tbl_name
  WHERE primary_key_part1=1 AND primary_key_part2=2;
- eq_ref
  
  조인수행을 위해 각 테이블에서 하나씩의 행만이 읽혀지는 형태. const 타입이외에 가장 훌륭한 조인타입니다.
  조인연산에 PRIMARY KEY 나 UNIQUE index 인덱스가 사용되는 경우.
  인덱스된 컬럼이 = 연산에 사용되는 경우. 비교되는 값은 상수이거나 이전조인결과의 컬럼값일수 있다.
  다음 예에서 MySQL 은 ref_table 을 처리하는데 eq_ref 조인을 사용한다.
  
  SELECT * FROM ref_table,other_table
  WHERE ref_table.key_column=other_table.column;
  SELECT * FROM ref_table,other_table
  WHERE ref_table.key_column_part1= other_table.column
  AND ref_table.key_column_part2=1;
- ref
  
  이전 테이블과의 조인에 사용될 매치되는 인덱스의 모든행이 이 테이블에서 읽혀진다. leftmost prefix 키만을 사용하거나 사용된 키가 PRIMARY KEY 나 UNIQUE 가 아닐때(즉 키값으로 단일행을 추출할수 없을때) 사용되는 조인.
  만약 사용된 키가 적은수의 행과 매치될때 이것은 적절한 조인 타입니다.
  ref 는 인덱스된 컬럼과 = 연산에서 사용된다.
  아래 예에서 MySQL 은 ref_table 처리에 ref 조인 타입을 사용한다.
  
  SELECT * FROM ref_table WHERE key_column=expr;
  SELECT * FROM ref_table,other_table
  WHERE ref_table.key_column=other_table.column;
  SELECT * FROM ref_table,other_table
  WHERE ref_table.key_column_part1= other_table.column
  AND ref_table.key_column_part2=1;
- ref_or_null
  
  ref 와 같지만 NULL 값을 포함하는 행에대한 검색이 수반된다.
  4.1.1 에서 새롭게 도입된 조인타입이며 서브쿼리 처리에서 대개 사용된다.
  아래 예에서 MySQL 은 ref_table 처리에 ref_or_null 조인타입을 사용한다.
```
SELECT * FROM ref_tableWHERE key_column=expr OR key_column IS NULL; 
```
  See Section 7.2.7, “How MySQL Optimizes IS NULL”.
- index_merge
  
  인덱스 병합 최적화가 적용되는 조인 타입.
  이 경우, key 컬럼은 사용된 인덱스의 리스트를 나타내며 key_len 컬럼은 사용된 인덱스중 가장 긴 key 명을 나타낸다.
  For more information, see Section 7.2.6, “Index Merge Optimization”.
- unique_subquery
  
  이것은 아래와 같은 몇몇 IN 서브쿼리 처리에서 ref 타입대신 사용된다.
  value IN (SELECT primary_key FROM single_table WHERE some_expr)
  
  unique_subquery 는 성능향상을 위해 서브쿼리를 단순 index 검색 함수로 대체한다.
- index_subquery
  
  unique_subquery 와 마찬가지로 IN 서브쿼리를 대체한다. 그러나 이것은 아래와 같이 서브쿼리에서 non-unique 인덱스가 사용될때 동작한다.
  value IN (SELECT key_column FROM single_table WHERE some_expr)
- range
  
  인덱스를 사용하여 주어진 범위 내의 행들만 추출된다. key 컬럼은 사용된 인덱스를 나타내고 key_len 는 사용된 가장 긴 key 부분을 나타낸다.
  ref 컬럼은 이 타입의 조인에서 NULL 이다.
  range 타입은 키 컬럼이 상수와 =, <>, >, >=, <, <=, IS NULL, <=>, BETWEEN 또는 IN 연산에 사용될때 적용된다.
```
SELECT * FROM tbl_nameWHERE key_column = 10;SELECT * FROM tbl_nameWHERE key_column BETWEEN 10 and 20;SELECT * FROM tbl_nameWHERE key_column IN (10,20,30);SELECT * FROM tbl_nameWHERE key_part1= 10 AND key_part2 IN (10,20,30);
```
- index
  
  이 타입은 인덱스가 스캔된다는걸 제외하면 ALL 과 같다. 일반적으로 인덱스 파일이 데이타파일보다 작기 때문에 ALL 보다는 빠르다.
  MySQL 은 쿼리에서 단일 인덱스의 일부분인 컬럼을 사용할때 이 조인타입을 적용한다.
- ALL
  
  이전 테이블과의 조인을 위해 풀스캔이 된다. 만약 (조인에 쓰인) 첫번째 테이블이 고정이 아니라면 비효율적이다, 그리고 대부분의 경우에 아주 느린 성능을 보인다. 보통 상수값이나 상수인 컬럼값으로 row를 추출하도록 인덱스를 추가함으로써 ALL 타입을 피할 수 있다.

possible_keys

이 컬럼값은 MySQL 이 해당 테이블의 검색에 사용할수 있는 인덱스들을 나타낸다.
주의할것은 explain 결과에서 나타난 테이블들의 순서와는 무관하다는 것이다.
이것은 possible_keys 에 나타난 인덱스들이 결과에 나타난 테이블 순서에서 실제 사용할 수 없을수도 있다는 것을 의미한다.
이값이 NULL 이라면 사용가능한 인덱스가 없다는 것이다. 이러한 경우에는 인덱스를 where 절을 고려하여 사용됨직한 적절한 컬럼에 인덱스를 추가함으로써 성능을 개선할 수 있다. 인덱스를 수정하였다면 다시한번 EXPLAIN 을 실행하여 체크하라.
See Section 13.2.2, “ALTER TABLE Syntax”.

현재 테이블의 인덱스를 보기 위해서는 SHOW INDEX FROM tbl_name.을 사용하라.
key

이 컬럼은 MySQL 이 실제 사용한 key(index) 를 나타낸다.
만약 사용한 인덱스가 없다면 NULL 값일 것이다. MySQL 이 possible_keys 에 나타난 인덱스를 사용하거나 사용하지 않도록 강제하려면 FORCE INDEX, USE INDEX, 혹은 IGNORE INDEX 를 함께 사용하라.
See Section 13.1.7, “SELECT Syntax”.

MyISAM 과 BDB 테이블에서는 ANALYZE TABLE 이 옵티마이저가 더나은 인덱스를 선택할 수 있도록 테이블의 정보를 갱신한다.
MyISAM 에서는 myisamchk --analyze 가 같은 기능을 한다.
See Section 13.5.2.1, “ANALYZE TABLE Syntax” and Section 5.7.2, “Table Maintenance and Crash Recovery”.
key_len

이 컬럼은 MySQL 이 사용한 인덱스의 길이를 나타낸다. key 컬럼값이 NULL 이면 이값도 NULL 이다.
key_len 값으로 MySQL 이 실제 복수컬럼 키중 얼마나 많은 부분을 사용할 것인지 알 수 있다.
ref

이 컬럼은 행을 추출하는데 키와 함께 사용된 컬럼이나 상수값을 나타낸다.
rows

이 값은 쿼리 수행에서 MySQL 이 예상하는 검색해야할 행수를 나타낸다.
Extra

이 컬럼은 MySQL 이 쿼리를 해석한 추가적인 정보를 나타낸다.
아래와 같은 값들이 나타날 수 있다.
- Distinct
  
  MySQL 이 매치되는 첫행을 찾는 즉시 검색을 중단할 것이다.
- Not exists
  
  MySQL 이 LEFT JOIN 을 수행함에 매치되는 한 행을 찾으면 더이상 매치되는 행을 검색하지 않는다.
  아래와 같은 경우에 해당한다.
```
SELECT * FROM t1 LEFT JOIN t2 ON t1.id=t2.idWHERE t2.id IS NULL;
```
  여기서 t2.id 는 NOT NULL 이고, 이경우 MySQL 은 t1 을 스캔한 후 t1.id 값을 사용해 t2 를 검색한다. MySQL 이 t2 에서 매치되는 행을 찾으면 t2.id 는 NULL 이 될 수 없으므로 더이상 진행하지 않는다. 즉, t1 의 각 행에 대해 t2 에서 매치되는 행이 몇개가 있던지 한개만 찾으면 된다.
- range checked for each record (index map: #)
  
  MySQL 이 사용할 좋은 인덱스가 없다. 그러나 선행된 테이블의 컬럼값에 따라 몇몇 인덱스를 사용할 수 있다. 선행된 테이블의 개개 행에 대해 MySQL 이 range 나 index_merge 접근법을 사용할 수 있는지 체크할 것이다.
  적용가능성의 핵심은 Section 7.2.5, “Range Optimization” and Section 7.2.6, “Index Merge Optimization” 에 모든 선행된 테이블의 값이 명확하거나 상수인 때를 예외로 하여 기술되어 있다.
  이것은 그리 빠르진 않으나 인덱스가 없는 조인의 경우보다는 빠르다.
- Using filesort
  
  MySQL 이 정렬을 위해 추가적인 과정을 필요로한다. 정렬과정은 조인타입에 따라 모든 행을 검색하고 WHERE 절에 의해 매치된 모든 행들의 키값을 저장한다. 그리고 저장된 키값을 정렬하여 재정렬된 순서로 행들을 추출한다.
  See Section 7.2.10, “How MySQL Optimizes ORDER BY”.
- Using index
  
  컬럼정보가 실제 테이블이 아닌 인덱스트리에서 추출된다. 쿼리에서 단일 인덱스된 컬럼들만을 사용하는 경우이다.
- Using temporaryMySQL 이 결과의 재사용을 위해 임시테이블을 사용한다. 쿼리 내에 GROUP BY 와 ORDER BY 절이 각기 다른 컬럼을 사용할때 발생한다.
- Using whereWHERE 절이 다음 조인에 사용될 행이나 클라이언트에게 돌려질 행을 제한하는 경우이다. 테이블의 모든 행을 검사할 의도가 아니라면 Extra 값이 Using where 가 아니고 조인타입이 ALL 이나 index 라면 쿼리사용이 잘못되었다.
- 쿼리를 가능한 한 빠르게 하려면, Extra 값의 Using filesort 나 Using temporary 에 주의해야 한다.
- Using sort_union(...) , Using union(...) , Using intersect(...) 이들은 인덱스 병합 조인타입에서 인덱스 스캔이 병합되는 형태를 말한다.
  
  See Section 7.2.6, “Index Merge Optimization” for more information.
- Using index for group-by
  
  테이블 접근방식은 Using index 와 같다. MySQL 이 실제 테이블에 대한 어떠한 추가적인 디스크 접근 없이 GROUP BY 나 DICTINCT 쿼리에 사용된 모든 컬럼에 대한 인덱스를 찾았음을 말한다. 추가적으로 각각의 group 에 단지 몇개의 인덱스 항목만이 읽혀지도록 가장 효율적인 방식으로 인덱스가 사용될 것이다.
  For details, see Section 7.2.11, “How MySQL Optimizes GROUP BY”.

EXPLAIN 의 출력내용중 rows 컬럼값들을 곱해봄으로써 얼마나 효과적인 join 을 실행하고 있는지 알 수 있다. 이 값은 MySQL 이 쿼리수행중 검사해야할 행수를 대략적으로 알려준다. 만약 max_join_size 시스템 변수값을 설정하였다면 이 값은 또한 여러테이블을 사용하는 select 중 어느것을 먼저 실행할지 판단하는데 사용된다.
See Section 7.5.2, “Tuning Server Parameters”.

다음 예는 다중테이블 조인이 EXPLAIN 정보를 통해 점차적으로 개선되는 과정을 보여준다. 만약 아래와 같은 select 문을 EXPLAIN 으로 개선한다면 :

EXPLAIN SELECT tt.TicketNumber, tt.TimeIn,            tt.ProjectReference, tt.EstimatedShipDate,            tt.ActualShipDate, tt.ClientID,            tt.ServiceCodes, tt.RepetitiveID,            tt.CurrentProcess, tt.CurrentDPPerson,            tt.RecordVolume, tt.DPPrinted, et.COUNTRY,            et_1.COUNTRY, do.CUSTNAME        FROM tt, et, et AS et_1, do        WHERE tt.SubmitTime IS NULL            AND tt.ActualPC = et.EMPLOYID            AND tt.AssignedPC = et_1.EMPLOYID            AND tt.ClientID = do.CUSTNMBR;

이 예에서 아래와 같은 가정이 사용되었다.:

The columns being compared have been declared as follows:

Table Column Column Type

tt ActualPC CHAR(10)

tt AssignedPC CHAR(10)

tt ClientID CHAR(10)

et EMPLOYID CHAR(15)

do CUSTNMBR CHAR(15)
The tables have the following indexes:

Table Index

tt ActualPC

tt AssignedPC

tt ClientID

et EMPLOYID (primary key)

do CUSTNMBR (primary key)
The tt.ActualPC values are not evenly distributed.

먼저, 개선되기 전의 EXPLAIN 은 다음과 같은 정보를 보여준다.:

table type possible_keys key  key_len ref  rows  Extraet    ALL  PRIMARY       NULL NULL    NULL 74do    ALL  PRIMARY       NULL NULL    NULL 2135et_1  ALL  PRIMARY       NULL NULL    NULL 74tt    ALL  AssignedPC,   NULL NULL    NULL 3872           ClientID,           ActualPC      range checked for each record (key map: 35)

각 테이블의 type 이 ALL 을 나타내므로, MySQL 이 모든 테이블의 카티션곱(Cartesian product) 를 생성한다는 것을 나타낸다.
각 테이블의 행의 조합이 모두 검사되어야 하기 때문에 이것은 아주 오랜 시간이 소요될 것이다.

실제로 이 결과는 74 * 2135 * 74 * 3872 = 45,268,558,720 행에 달한다.
만약 테이블이 더 크다면 얼마나 소요될지 상상할 수도 없을 것이다.
여기서 우선적인 문제는 MySQL 은 같은 타입으로 선언된 컬럼의 인덱스를 더 효과적으로 사용할 수 있다는 것이다. (ISAM 테이블에서는 같은 타입으로 선언되지 않은 인덱스는 사용할 수 없다.) 여기에서 VARCHAR 과 CHAR 은 길이가 다르지 않다면 같은 타입이다.
tt.ActualPC 는 CHAR(10) 이고 et.EMPLOYID 는 CHAR(15) 로 선언되어 있으므로 길이의 불일치가 발생한다.

이러한 컬럼 길이의 불일치 문제의 해결을 위해 ALTER TABLE 을 사용하여 ActualPC 컬럼을 10 글자에서 15 글자로 변경하자 (길이를 늘리는것은 데이타 손실이 없다.)

mysql> ALTER TABLE tt MODIFY ActualPC VARCHAR(15);

이제 tt.ActualPC 와 et.EMPLYID 는 모두 VARCHAR(15) 이다. 다시 EXPLAIN 을 실행해보면 다음 결과와 같다.

table type   possible_keys key     key_len ref         rows    Extratt    ALL    AssignedPC,   NULL    NULL    NULL        3872    Using             ClientID,                                         where             ActualPCdo    ALL    PRIMARY       NULL    NULL    NULL        2135      range checked for each record (key map: 1)et_1  ALL    PRIMARY       NULL    NULL    NULL        74      range checked for each record (key map: 1)et    eq_ref PRIMARY       PRIMARY 15      tt.ActualPC 1

훨씬 좋아졌지만 아직 완벽하지 않다. 행의 곱은 이제 74 만큼 줄었다.

이 쿼리는 이제 몇초만에 실행될 것이다.

두번째 작업은 tt.AssignedPC = et_1.EMPLYID 와 tt.ClientID = do.CUSTNMBR 에서의 컬럼길이의 불일치를 수정하는 것이다.

mysql> ALTER TABLE tt MODIFY AssignedPC VARCHAR(15),    ->                MODIFY ClientID   VARCHAR(15);

이제 EXPLAIN 은 다음과 같은 결과를 보여준다.

table type   possible_keys key      key_len ref           rows Extraet    ALL    PRIMARY       NULL     NULL    NULL          74tt    ref    AssignedPC,   ActualPC 15      et.EMPLOYID   52   Using             ClientID,                                         where             ActualPCet_1  eq_ref PRIMARY       PRIMARY  15      tt.AssignedPC 1do    eq_ref PRIMARY       PRIMARY  15      tt.ClientID   1

이것은 이제 거의 최적의 결과가 된 것 같다.

남아있는 문제는 MySQL 이 기본으로 tt.ActualPC 컬럼의 값이 균등하게 분포되어 있다고 가정한다는 것이다. 하지만 tt 테이블은 실제로 그렇지 않다.

다행히도 MySQL 이 키 분포를 검사하도록 하는것은 매우 쉽다.

mysql> ANALYZE TABLE tt;

이제 완벽한 조인이 되었다. EXPLAIN 결과는 다음과 같다.

table type   possible_keys key     key_len ref           rows Extratt    ALL    AssignedPC    NULL    NULL    NULL          3872 Using             ClientID,                                        where             ActualPCet    eq_ref PRIMARY       PRIMARY 15      tt.ActualPC   1et_1  eq_ref PRIMARY       PRIMARY 15      tt.AssignedPC 1do    eq_ref PRIMARY       PRIMARY 15      tt.ClientID   1

EXPLAIN 결과의 rows 컬럼값이 나타내는 MySQL 최적화에 의해 예측된 행수에 주목하라.

나타난 숫자가 실제 행수에 근접한지 체크해야 한다. 그렇지 않다면 STRAIGHT_JOIN 를 사용고 FROM 절에서 테이블의 순서를 변경함으로써 더 나은 성능을 얻을 수 있다.

php Allowed memory size of 8388608 bytes exhausted 오류

8M 의 허용된 메모리를 다 썼다는 것이다.

이런경우는 php.ini 를 열어 memory_limit 을 늘려주면 된다.
PHP 가 DB나 파일에서 데이터를 읽어올때 부하가 걸리게 되면 위와같은 에러를 내보낸다.
memory_limit 이란 하나의 스크립트가 할당 받을 수 있는 메모리의 최대 크기를 말하는 것인데 버그등으로 인해서 스크립트가 시스템의 메모리를 다 잡아먹는 일을 막기위한 일종의 보호장치인 것이다.

# vi /etc/php.ini
...
;;;;;;;;;;;;;;;;;;;
; Resource Limits ;
;;;;;;;;;;;;;;;;;;;

max_execution_time = 300 ; Maximum execution time of each script, in seconds
max_input_time = 300 ; Maximum amount of time each script may spend parsing request data
memory_limit = 16M ; Maximum amount of memory a script may consume (8MB)

위와같이 /etc/php.ini 를 열어 memory_limit 을 8M 에서 16M 로 늘린 후 문제를 해결했다.

-------

나두 얼마전에 이런경험 했는디...ㅎ

3년만에... 9천만원 모은 생활 수기...

안녕하세요?

여기 모네타에서... 펀드 투자라는 것을 시작하게된 사람 입니다.

독하게 해서... 여기까지 왔내요..

모 싸이트에.. 제가 올린 생활 수기 인데요?

같이 공유도하고,, 잘 못된점은 고치고,,,

하고 싶은 마음에... 올려 봅니다...

----------------------------------------------------------------------

2004년 8월 31일 이었습니다. 고향인 부산을 떠나.. 여기 경북 구미에 솜이불 1개... 팬티 1장.. 양말 1개 들고.

처음 회사에 입사를 했습니다.

전문대학 졸업반 학생이 무슨 돈이 있었겠습니까...

주머니에는... 딱 7만원... 그리고... 당시 살아 계셨던... 할머니.. 저에게는 엄마 죠..

할머니의 인사와 함께.. 올라 왔죠.

- 월급 -

처음에 입사하니.. 은행 계좌를 만들라고... 전 무턱대고 회사의 지시대로 외X은행 계좌에...

체크카드 1장... 혜택도 뭔지 모르고,, 나의 깊은 곳에는 카드에 대한... 불신으로.. 체크카드로

발급해서 썼습니다. 계좌가 뭐하는 건지.. 아. 돈넣는 곳이구나.

그러나 시간이 지남에 따라 그게 아니 더군요. 이체 수수료.. 출금 수수료...

만원씩 뽑으면... 배보다 배꼽이 더 커지니 말이죠..

그때부터 퇴근 하고 인터넷을 돌아 다녔습니다.

딱! 눈에 띄었습니다. "이체 수수료 면제." 계좌를 텃습니다. 정말 되더 군요.

이젠 출금 수수료가 아깝고 은행에 돈이 들어 가있으니. 이자가없는것이 아깝고..

지난 근 5년간 정말 미친듯이 고민 하고, 경험 해봤습니다.

그래서 결론난것이...인뱅 면제는 기본이고,,, 언제.. 어디서 인출하든... 무료로 써야 합니다.

전 무조건 내돈 나가는데 수수료 떼는 것은 싫내요.

- 동양 종금 : 우리/신한/국민/농협 cma계좌를 각각 터놓고..

이자도 받고 수수료도 면제 받고..

각 계좌에 만원씩 넣어 놓고.. 홀드 합니다..

- 주거래 은행 : 급여이체.. 하고 집중으로 자동이체 시키고..

적정 상품으로 수수료 완전 면제..했내요.

- 기타 집근처에 가장 가까운 은행은 계좌만 터서... 필요할때마다.. 이체 해서 빼쓰고..

- 이렇게 쓰니 어딜 가든 은행만 보이면... 수수료 없고... 돈은 cma에 잇으니...

이자는 계속 붙고.. 해서 전 맘에 드내요..

- 이렇게 해서.. 불필요한 지출위험은 0% 달성 됐습니다.

저도 참 너무 햇나 봅니다. 주위 사람들이 저를 이상하게 보내요. ㅠㅠ

- 휴대폰 -

휴대폰... 요금 너무 아깝내요.. 군에 졸업하고.. 휴대폰을 하나 샀습니다. 2002년도 였내요..

군에서 모앗던 150만원 중에 23만원으로 휴대폰을 샀던 기억이 납니다...

정말 아깝죠.. 아무 조건 없이 구입할 수있는... 휴대폰이 널렸는데.. 그때를 생각하면..

속이 아려오내요. ^^

휴대폰에서 절약 방법은... 모든 부가 서비스를 해지 했습니다.

문자 메세지는 무조건 인터넷 무료 메세지 사이트 에서 보냅니다.

청구서는 메일로 받고 할인받고... XXX 카드로... 아무 조건 없이 월 500원 할인 받습니다.

지금은 한단계 업그레이드 해서.. 신용카드를 이용하여 매월 4000원 정도 할인 받습니다.

해당 카드는... 계시판의 성격상... 말 않할께요. ^^

기타.. 통화는 제가 워낙 통화를 않하는 편이라... 2만원 안쪽으로 나와서...

할인 받고 하면.. 나름 만족하내요.

- 예/적금 -

제가 가장 큰실 수를 했습니다. 아무 은행이나 가서 예금을 넣었던것...

예금은... 상호저축은행이 이율이 높더군요.. "상호저축은행중앙회"가시면..

전국 금리를 한눈에 보실 수 있습니다.

금리만 따지면... 내돈이 위험할 수 잇으니... 전자경영공시 가셔서... 간편하게.. BIS 비율은 꼭 확인 하세요..

(꼭 최근 bis비율을 꼭 보셔야 해요...)

법적으로는 5% 이상이면 되지만... 전 좀 깐깐하게... 6% 이상만 선정해서 이용했습니다.

예금을 넣을때도... 1년 단위로 하면... 제 손해라고 생각 햇습니다.

왜냐... cma통장에 잇는 돈은... 언제든지 쓸돈이니.. 세금 생각 않해도.. 된다고 생각 했습니다.

그러나. 예금은 달랐습니다. 세금우대 한도라는 것이 있죠..

이자 소득의 15.4%를 세금으로 내야 하나 우대한도 적용하면.. 9.5%로 절세가 되죠..

전 생각 해봤습니다... 1년 단위로 1000만원 vs 1년 500만원 2년 500만원..

뭐가 더 이익일까... 금액과 시간분산을 하는 것이... 우대한도 : 수익이 더 좋더군요..

시간이 지나면.. 금리도 변동되고... 만기 후 내가 가입했던 고금리가 유지 될지도 모르고...

해서.. 전 시간과 금액을 나눠서 넣었씁니다.

절때! 이돈은 사용하지 않을 것이다! 라는 전제 하에... 불입해서.. 그렇습니다.

- 지출 -

신용카드... 저에게는 미운오리 새끼 입니다. 신용불량자.. 카드빛... 주위에서 많이 보고 느꼈습니다.

그래서 신용카드는 발급은 햇지만...

(신용도 관리 차원에서... 장기 사용한 신용카드는 신용등급에 상승요인이라고 합니다..)

장농에 박아놓고 절때 않썼습니다.

대신... 체크 카드를 썼습니다. 그리고.. 인터넷을 뒤지기 시작했습니다.

신용카드 내공이 쌓이신 고수분을 너무너무 많았습니다. 부럽고... 대단하다고 생각 했내요.

그래서 지출에 대한 부분을 좀 개선 했습니다.

< 신용카드를 체크카드로... >

말그래도.. 신용카드를 체크카드 개념으로 사용했습니다.

먼저 제 생활비를 cma에 넣습니다. 신용카드 결제를 하고.. 엑셀에 등록하고... 수식을 걸어 자동 차감되게 합니다.

하루 이틀 밀려도.. 기간조회를 해서... 관리를 하니... 이게 왠일 이겠습니까?

cma 이자는 몇백원씩! 카드 포인트도 쌓이고.. 캐쉬백도 되고.. 휴대폰 할인도...

아! 앞전에 꼭 할것이... 2달 생활비 만큼만.. 신용카드 한도를 설정 합니다.!

신용카드는 익월 결제 되니까.. 여기서 더 아까운 부분이 잇었습니다.

보험료... 왜? 카드로 않될까? 왜???

그래서 인터넷을 찾았습니다. 되내요! 보험료... 신용카드 다 걸어 놓고...

cma에 넣고.. 이자 받고... 포인트 먹고...

또 계산 햇습니다. 보험 카드 결제하고.. 손해는?? 결론. 없습니다. ㅡ.ㅡ

- 미래 -

전 모든 생활을 절약으로 접근 했습니다. 지금 미래를 위해 나를 개발 하지 않으면.. 난 개발도상국도 않될것이다.

그럼? 내를 개발하고... 수익도 남는 방법은???

노동부! 1인 2자격증 검정 수수료..

고용보험에 가입되어 있고.. 2개 자격증이 잇으면... 2회까지 1?만원을 수수료 지원해주는 제도...

이걸 이용해서.. 돈도 벌고.. 나를 개발하고...

또... 전문대학졸업으로.. 뭘 할 수 있겟는가? 결론.. 없다 였습니다.

그래서.. 지금다니는 직장은 보험이고. 앞으로 더 크게 되기위해... 학교를 가기로 햇씁니다.

이제 학기 시작이내요... 올 3월 개강 시작해서... 8월 졸업 예정입니다.

그동안 취득했던.. 자격증... 20개... 이걸로.... 학점 대체하고... 8월 졸업이내요..

그럼.. 향후 계획은? 경영학사 복수 전공 - 경영대학원 - mba... 까지 목표 잡았습니다...

목표대로 잘 되었으면.. 좋겠내요. ^^

- 포트 폴리오.. -

역시... 자산 포트 폴리오도.. 절약대상이내요...

포트 폴리오 잘 못 정해서.. 초반에 많은 시행 착오를 겪었습니다.

흔히들.. 100-나이 공식을 말하더군요... 그래서 교과서 적인 100-나이 비율로 적용 햇씁니다.

- 비상금 : 1차 비상금 매월 수입의 생활비 - 생활비 (27만원)

2차 비상금 120만 (cma-1달 생활비) - 저수지 통장

3차 비상금 360만 (cma-3달 생활비) - 최악의 상황 대비

: 비상금은 말그대로 비상금이기에... 자산 총액에서 제외 햇씁니다.

- 결혼 기초 자금 - 3600만

- 400만 (청약저축 1순위 확보 완료)

- 보험 - 월 급여의... 9%.... 생명+상해 보험의 조합...

<<< 포트 폴리오ii 나와 내 가족의 비장의 무기 >>>

: 결혼 후... 내가 어찌 될지도... 내 가족을 지키기 위해... 절때 내가 은퇴 전에는 없다고 생각하는 없는 돈으로

내 가족을 위해 방패를 만들 고 있씁니다. 이건 ... 아무도 모르는 돈이내요.. (금액은... 1억 포트 폴리오 입니다.)

어떤일이 잇어도.. 내 가족은 지킨다는 목표로.. 결혼 시 에도 없고.. 은퇴전에는... 없는 돈 입니다.

운용 기간은... 60세 까지 입니다...

: 기본 포트 비중은 100-나이 입니다.

: 연 목표 수익률은... 24.5% 입니다.

연 목표 수익 20% + 물가 인플레이션 3.5% + 선취수수료 1%

: 수익률 관리 방안은...

6개월 단위 평가하여... 24.5% 이상이면.. 24.5% 초과 수익은.. 현금화...

24.5% 이하면... 달성..

이렇게 하는 이유는 목표달성 못하면... 제가 부담해야하는... 수익을 위한 위험이고...

달성 되었다면... 초과 수익은.. 제가 부담할 필요가 없는... 수익이라.. 현금화 하기로 했습니다.

: 펀드 운용 방안

2~3년.. class c형. -> 초기적립 할 펀드

3년 초과... 장마펀드 & clsas a형. - 목표수익달 성 후 ... 주가 하락 시 불입.. 장기 운용..

- 예금 28% (시간에 지남에 따라 100-나이 공식 적용)

- 펀드 72%에서 (시간에 지남에 따라 100-나이 공식 적용)

-> 국가 경재 성장률이... 3%이하로... 떨어지면.. 인덱스로.. 교체...

: 국내 50% (대형 40%, 가치 5%, 중/소형 5%)

: 해외 50% 중에서..

중국 8% (세금우대)

중국 장마펀드 2%

인도 10% (세금우대)

브라질 10% (세금우대)

러시아 8% (세금우대)

러시아 장마펀드 2%

섹터 10% (농산물, 원자재, 부동산...) (세금우대)

어리석은 제 글 읽어 주셔서... 감사 합니다... 이제.. 1년 남았내요...

저만의 종자돈... 오늘도... 고민속에 살고 있습니다.

어른들께서 말씀하셨어요.. "젊어서 고생은 사서도 한다.." 이말 믿어 볼려고요..

고생한만큼... 보상도 달콤할꺼라.. 생각합니다.

형님/누나/동생 회원분들... 보내주시는 응원... 어제도 2번이나 읽었습니다.

점점.. 왜? 이렇게 사나.. 하는 회의감에... 다시 힘을 내어보려구요..

끝으로...

새해 복 많이 받으세요. 꾸뻑.~

- 못난 짠돌이 청년 올림 -

--------------

본받을만 하다...ㅡ.,ㅡ;;

출처 : 모네타(www.moneta.co.kr)

끄적끄적

전체 페이지뷰