Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

잘 알려지지 않은 AJAX 활용 기법

이 내용은 웹월드 컨퍼런스 3일차의 디앤샵의 에반젤리스트이신 이상용님이 발표한 내용을 정리한 것입니다.

AJAX는 이제 웹의 필수적인 부분이 되어버렸다. 이젠 너무나도 익숙해 졌기 때문에 내가 만난 사람들 중에는 웹페이지가 새로 로딩되지 않고 일부만 바뀌는 것이 얼마나 신기한 기술인지 모르는 사람들도 많다. 전에도 아이프레임등으로 할 수도 있었고 순간의 동작이라서 웹에 대해 잘 모르면 새로 로딩된다는 것 조차 모르는 경우도 많기 때문에....

AJAX가 이제 필수 기술이 되었다고 하더라도 무엇이든 그렇듯이 남용되는 것은 좋지 않다고 생각하지만 AJAX는 아직은 나에게 신기한 기술이고 빨리 익혀서 내맘대로 쓰고 싶었다. 현재로써는 AJAX는 제대로 쓰지못하고 prototype.js를 이용해서 AJAXrequest객체를 이용해서 하는 것만 수정해서 사용할 줄만 안다. ㅡ..ㅡ

어쨌든 AJAX가 XML Request를 이용하는 기술이지만 AJAX의 의미만을 생각한다면 비동기통신을 이용해서 페이지로딩을 하지 않고 일부만 바꾸는 기술을 의미하고 있고 이 세션에서는 이렇게 하는 기술을 소개했다.

1. Hidden Frame을 이용하는 방식이다. 이것은 상당히 고전적인 방식인데(나도 몰랐다 ㅡ..ㅡ 입사하고 동기가 물어봐서 그렇게 해결했다는 것을 듣고는 그렇게도 하는구나 알았을 뿐.. )

frameset에서 높이가 0짜리 히든프레임을 하나 만들어서 그 히든 프레임을 통해서 통신을 하는 것이다. 보이지만 않을 뿐 하나의 페이지랑 똑같기 때문에 현재 페이지에서 히든 프레임의 페이지로 값을 전송하고 히든프레임이 값을 처리하고 다시 보내주는 것이다.

구현하기가 상당히 쉽고 실제적으로 페이지간의 전송과 동일하기 때문에 GET, POST, File Upload를 모두 사용할 수 있지만 페이지 클릭소리가 나는 문제점이 있고 보이지가 않아서 예외처리도 힘들다.

2. Dynamic Scripting이라고 이상용님이 소개한 기술로 개인적으로 제일 선호하는 기술이라고 한다.

이건 내가 좀 이해하기가 쉽지 않았다. 좀 해봐야 할듯... 설명을 하자면 그냥 통상적인 웹페이지가 있고 스크림트 부분에서 스크립트 오브젝트를 생성한다.


<script type="text/javascript">
    scriptObj = document.createElement("SCRIPT");
    scriptObj.src = "ajax2.js";

    document.body.appendChild(scriptObj);
</script>

이렇게 해놓고 ajax2.js는 document.getElementById("000").innerHTML = "....."; 의 형태를 가지고 있다. 설명을 하자면 저 js파일이 특정 앨리먼트의 코드를 교체해주는 역할을 하고 있는 것이다.

구현이 쉽고 변수를 공유할수 있지만 일반적인 GET/POST의 전송방식은 사용할 수 없다. 원리자체는 이해가 가는데 정확히 어떤식으로 다양하게 써야 하는지는 감이 잘 오질 않는다.

3. 세번째는 통상적인 XML Request를 이용한 방법인데 이부분은 따로 적지 않겠다.


히든 프레임과 XML Request는 부하가 좀 큰 편이고 Dynamic Scripting을 적절히 이용하는 것이 좋다고 한다. 좀더 지식이 쌓이면 활용하기 위해서 기록해 놓는다.. ㅡ..ㅡ

2007/12/04 00:12 2007/12/04 00:12

자바스크립트 개발가이드

이 내용은 웹월드 컨퍼런스 2007에서  Daum UI개발팀의 구경택님이 29일에 발표하신 세션의 내용을 정리한 것입니다.

현재 우리가 사용하고 있는 자바스크립트는 1.5버전을 사용하고 있다. 자바스크립트 2는 현재 Working Draft1까지 나온 상태이다.

내가 자바스크립트를 공부한지 얼마 되지 않았기 때문에 이해를 못하는 부분도 약간 있었다. 대충 이해하고 도움이 될것 같은것 위주로 정리를.. ㅎㅎㅎ


// Functions are First-Class Object 
function sum(a,b) {
    return a + b;
}

var sum = function(a, b) {
    return a + b;
}

펑션이 First-Class Object라는 의미는 잘 이해하지 못했지만 두가지형태 모두 사용이 가능하다. 아래 형태는 prototype.js를 사용할 때 익숙치 않아서 이해할때 가장 어려움이 있었던 부분.


// Suports functional scope only
function showSum(a, b) {
    var c = function() {
        alert(a + b);
    }
    return c;
}

var sum = showSum(2, 3);
sum();

제한적인 영역을 가지는 펑션이다. c의 경우에는 리턴을 받는 것 외에는 밖에서 제어할 수가 없다.


// Supports closure 
function add_x(x) {
    return function(y) { return x + y; };
}

var f = add_x(3);
f(4);

클로저 지원이다. 말은 들은 적이 있는데 잘 감이 오질 않는다. 저걸 실행하면 f(4)가 7 이란 값을 리턴해준다. 이해는 잘 못하지만 먼가 신기하다. 클로저란게 원래는 3으로 함수를 호출했을때 x가 할당되고 함수가 끝나면 x의 값이 사라져야 되는데 그렇지 않고 남아있게 되는거다. 아직 내공이 부족해서 정학이 어떤 상황에 써야할지는 감이 잘 오질 않는다. 클로저에 대해 알아보려고 찾은 괜찮은 글이 있어서 링크를 건다.


이하는 자바스크립트를 객체지향으로 사용하는 법에 대한 부분이다.


// Constructor 
var car = function(name, cost) {
    this.name = name;
    this.cost = cost;
    this.feature();
}

car.prototype.feature = function() {
    alert("name : " + this.name + "\n cost : " + this.cost);
}

var sonata = new car("쏘나타", 2000);

추상화(Abstraction)부분이다. prototype.js를 이해하려면 필수적으로 이해해야 할 부분이라고 생각된다. 처음 봤을때는 꽤나 당황했었지만 저런 패턴을 많이 사용하고 복잡한 스크립트일수록 저렇게 객체로 만들어 쓰는건 유용한것 같다. 당연히 OOP는 검증된 패턴이니까....


// Overloading
var sum = function() {
    var args_len = arguments.length;
    switch(args_len) {
        case 0:
            statement.....;
            break;
        case 1:
            statement.....;
            break;
        ............
    }
}

C할때 지겹도록 배우던(배우기만 지겹게 배웠지 이해는 잘.. ㅋㅋ) 오버로딩이다. 기본적으로 자바스크립트는 오버로딩을 지원하지 않는다. 파라미터 갯수가 달라도 기본적으로 오류가 나지 않고 알아서 해주기 때문에 오버로딩을 해주지 못하는데 그걸 이런식으로 해결한 것이다. 어려운 스크립트는 아니지만 순간 "천잰데?" 하는 생각이 들었다. 아규먼트 갯수를 세어서 오버로딩을 할 수 있게 해준다. 물론 연산자 오버로딩은 안된다. ㅎㅎ


// function Overloading
switch(args_len) {
    case 0:
        if(typeof(arguments[0]) == "Number") {
            Numeric Operation...
        } else if(typeof(arguments[0]) == "String") {
            String Operation....
        }
    case 1:
        statement.....;
        break;
    ............
}

오버로딩을 이런식으로 하면 아규먼트 타입에 따라서도 다르게 할 수 있다. 신기한게 참 많군..


// Overriding
var car = function(name, cost, gasoline) {
    this.name = name;
    this.cost = cost;
    this.fuel = gasoline;
}

car.prototype = {
    use_fuel : function(offset) {
        this.fuel -= offset;
        return this.fuel;
    }
}

var avante = new car("avante", 1500, 2000);
var sonata = new car("sonata", 2000, 3000);

sonata.use_fuel = function() {
    return this.fuel;
}

OOP의 상속성을 보여주는 부분이다. 이를 위해서 자바사크립트는 prototype이라는 메서드를 제공하고 있다. 그냥 sonata.use_fuel()을 하면 8번라인의 use_fuel이 실행된다. 하지만 17번에서 sonata.use_fuel()을 다른 메서드로 재정의 해 줌으로써 sonata.use_fuel()을 하면 17번 라인의 use_fuel이 실행된다. Overriding된 것이다.


// Encaptulation, Data Hiding
var car = function(name, cost, gasoline) {
    this.name = name;
    this.cost = cost;
    var fuel = gasoline;
    function use_fuel(offset) {
        fuel -= offset;
    }
    this._useFuel = function(offset) {
        use_fuel(offset);
    }
}

var sonata = new car("sonata", 2000, 3000);
sonata._useFuel(10);

캡슐화와 정보은닉화 부분이다. 함수를 이렇게 구성하면 4, 5번라인의 fuel과 use_fuel은 Private Member가 되고 8번줄의 _use을 통해서 Private Member에 접근한다.

이상이 OOP에 대한 부분이고 이하는 그외 몇가지 도움이 될만한 코딩들이다.


// Flexibility of Javascript
var target = e.srcElement || e.target;

var index = (index >= 0) ? index : 0;

function oneRun() {
    .................
    .................
    oneRun = function() {}
}

1번은 둘중에 유효한 값이 자동으로 들어간다. (이거 꽤 유용할듯..)
나도 3항연산자는 잘 안쓰는 편이데 3항연산자로 변수할당도 가독성도 괜찮고 간단히 짤수 있어서 좋은듯...
5번줄의 oneRun은 괜찮은 아이디어같다. 이게 머냐하면 단 한번만 실행이 되어야 하는 메서드이다. 메서드를 다 실행안다음에 자신은 empty로 초기화 시켜버림으로써 단 한번만 실행할 수 있게 한다.(fake overliding)


// innerHTML
var strHTML = "<div id = 'abcd'>";
strHTML += " HTML 텍스트....";
............
strHTML += "</div>";

innerHTML을 쓸때 보통 위와 같은 형태로 string을 만들어서 사용하는데 이것은 상당히 부하가 크다. 과정을 설명하자면 1번줄에서 공간을 확보하고 string을 할당하고 2번줄에서 추가되기 때문에 이전꺼는 지운다음에 string을 이어붙힌 만큼의 공간을 다시 확보하고 할당한다. 이과정이 계속 반복되는 것이다. 그래서 아래와 같이 사용하는 것이 더 좋단다.


// innerHTML
var strHTML = new Array();
strHTML.push("html 텍스트");
..........
return strHTML.join("");

스트링을 배열로 만든 뒤에 join()으로 스트링을 이어붙힌 것이다. join은 인자로 각 배열을 스트링으로 이어붙혀주느데 인자로 아무것도 주지 않았으므로 text가 그냥 이어붙혀진다. 이렇게 사용할 경우 IE에서는 더 빠르고 Firefox에서는 두 방법의 속도가 비슷하다고 한다.



var value = document.getElementById("inputbox").value;
var diabled = document.getElementById("inputbox").disabled;
value = "검색어";
disabled = true;

객체의 속성을 사용할때 반족될 경우 위처럼 사용한 것 보다는

var oInput = document.getElementById("inputbox");
oInput.value = "검색어";
oInput.disabled = true;

이렇게 변수에 할당해서 하는 것이 더 빠르다. 전자의 경우는 매번 찾는 과정을 반복하게 된다.



// form submit handler의 올바른 사용법
<form onsubmit="return handler();">
    <input type="image" ...>
</form>

function handler() {
    if(condition) {
        return false;
    }
    return true;
}

이부분은 약간 태그의 올바른 사용법에 해당하는 부분이다. 우리팀도 웹표준에 대한 부분이 잘 정립이 안되어 있기 때문에 이렇게 사용안하고 inpu type=button에다가 onclick="checkValid();"를 주어서 값이 맞을 경우에만 form.submit을 한다. 근데 이건 동작은 기본적으로(?) 같기는 하지만 올바른 방법은 아니다. 왜나하면 type=submit이란 태그가 존재하고 이를 사용하면 자동으로 submit으로 동작을 하니까...(type=image도 똑같은 submit이다. 이미지버튼이란 점 빼고...) 이부분은 약간 애매하긴 하지만 올바르게 용도대로 사용할 때의 이점도 있다. 이부분에 대해선 따로 포스팅하겠다.

submit버튼을 사용하면 자동으로 submit이 되므로 Validation체크를 할 시간이 없기 때문에 onsubmit핸들러를 통해서 Validation체크를 해주도록 하는 것이다.


또한 프레임워크 사용에 대해서도 약간 주의를 주었다. prototype.js를 사용하면서 $()만 사용하는 경우도 많은데 이럴결우 몸짓만 커지고 느려질수가 있다.(내가 그렇다. ㅡ..ㅡ $와 $F만...) 프레임워크를 사용하려면 최대한 활용을 하자...

  1. 최초의 제안국이 제출하는 초안을 말하며 국제 표준화 기구 ISO 국제 규격의 기준이 되는 것 [Back]
2007/12/03 03:15 2007/12/03 03:15