Outsider's Dev Story

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

자바스크립트 개발가이드

이 내용은 웹월드 컨퍼런스 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

웹월드 컨퍼런스 2007 DAY3 "개발/기술" 참가후기

원래부터 있던 행사같지는 않지만 웹월드라는 거창한 타이틀로 웹월드 컨퍼런스 2007이 개최되었다. 지난 달에 알게 되었고 셋째날이 개발관련이었기 때문에 회사에서 보내줘서 갔다가 왔다.

웹월드 컨퍼런스 2007
 원래는 못갈 뻔했다. 유료컨퍼런스라서 신청이 급하지 않다고 생각했는데 다른부서에서 먼저 신청하신 분이 있어서 내가 올렸을때는 중복으로 교육받는다고 짤렸다. 우리회사가 거진 200명 규모인데 2명간다고 중복이라니.. ㅡ..ㅡ 좀 당황스럽지만 그래도 다행히 다른분이 나한테 양보를 해 주셔서 개발관련 부분에 참가할 수 있었다.

유료컨퍼런스는 처음 참가해 보는 것이었다. 이전까지는 보통 학생이었던 습성인지 항상 무료세미나만 참가했었는데 과장님이 항상 가는건 유료를 가라구 해서 이번에 처음으로 유료를 갔다 왔었는데 결론부터 얘기하자면 그닥이었다 ㅡ..ㅡ 너무 포괄적으로 하려고 해서 수준을 맞추기가 어려웠는지 유료.. 거기다가 10만원짜리라는 걸 생각하면 크게 얻는게 없었다.(물론 내가 이런걸 평가하는 건 내가 얼마나 정보를 습득했는지에 달린 것이다. 다른 사람들은 다를지도...)





오전에는 "개발 플랫폼으로서의 엡의 진화와 향후 전망"이라는 제목으로 첫 세션이 진행되었다.

이제는 웹을 플랫폼이라고 본다는 것으로 클라이언트 기술, 서버기술, 콘텐츠 기술, 오픈스탠다드로 이루어져 있는데 이 플랫폼을 통해서 Open API와 Mashup을 이용한 서비스 형태가 생겨나고 있다. 해외에는 매쉬업이 좀 활발한 편이지만 국내는 아직 쓸만한 것들이 없는 당황이다.

주요 웹 플랫폼으로는 Amazon AWS, Google API, Windows Live, Facebook F8정도가 있다.

아직은 크게 감이 오질 않는 것이었다. 이전처럼 플랫폼이라는 말에 맞추기 보다는 그냥 웹 자체가 더 어울린다는 생각이었고 결국 여기서 말하는 플랫폼은 오픈API랑 완젼히 같은 말이라고 생각되었다. 첫 세션의 특성상 개념적인 말을 할 수밖에 없었지만 뻔한 얘기라 좀 식상했다.





두번째 세션은 "웹개발자가 놓쳐서는 안될 웹기술 최신 트랜드 및 향후 전망"으로 진행이 되었다. 웹2.0과 요즘 웹의 트랜드에 대한 설명이 있는 시간이었다.

참여와 공유, 개방이라는 큰 주제를 가지고 웹 2.0의 서비스들이 이루어지고 있다.

Web Technology Family Tree

Web Technology Family Tree (출처 : Modern Life)


OSS1가 웹 2.0에서는 주요한 위치를 차지하고 있고 이제는 대형밴더들도 적극적으로 참여하면서 그 입지가 높아지고 있다.

그외에 AJAX, RSS, Open API, RIA2등이 있다.

RIA는 향상된 인터페이스, 빠른 응답, Client/Server의 분산된 부하, 효율적인 네트워크, 비동기통신등으로 대표되며 주요기술로는 Flash, Flex, AIR, Silverlight, Open Laszlo3, XUL4 등이 있다.

Gartner's Top 10 Technologies for 2008

출처 : http://blogs.zdnet.com/BTL/?p=6560

가트너에서 발표한 2008년 10대 전략기술에 6,7, 9,10위의 기술에 웹 관련 기술이 들어가 있는 것을 볼수 있다.

웹의 최신 트랜드로 WOA5와 웹자체를 분산형 데이터베이스인 "DataWeb"으로 보는 웹 데이터베이스, 새맨틱 웹, 3D웹 들이 있다.

1세션보다는 좀 알찼다. 내가 모르는 얘기도 좀 있었기 때문에... 하지만 주제상 1세션하고 겹치는 부분도 있었기 때문에 둘을 하나로 진행했으면 더 알찬 시간이지 않을까 하는 생각이 들었다.





세번째 세션은 "개발의 성과를 좌우할 웹개발 프레임워크 최신 동향 및 선택 가이드"라는 제목으로 진행이 되었다.

전체적으로 개발 프레임워크에 대한 얘기였지만 구체적으로 얘기를 하기 위해서 주로 JAVA를 기준으로 진행이 되었다. 프레임워크 관련 잇슈가 일단은 이쪽이 가장 강하니까..

개발쪽에 관련해서는 표준화가 아직 정해져 있지 않다. 이때분에 어떤 Framework를 쓰냐에 따라 개발시간, 유지보수등이 많이 달라진다. WAF6는 웹개발을 일반적인 행동들이 원할하도록 도와주는 역할을 하고 패턴을 강제함으로써 개발을 빠르게 하고 Bug를 줄일 수 있게 한다.

WAF는 공통적으로 Model, View, Controller로 분리해서 사용하는 MVC패턴을 사용하고 있다. 이전에는 View와 Controller을 합쳐놓은 Model 1을 사용했는데 이제는 MVC를 모두 분리한 Model 2를 사용하고 있다.

WAF들은 보통 Controller패턴으로 사용자가 많아지면 부하가 커지는 PageController대신 FrontController을 사용하고 있다.

또한 MVC는 push방식과 pull방식으로 나누어져 있는대 대부분의 MVC프레임워크가 push방식을 사용하고 있으며 결과를 뷰단에 밀어넣어서 보여주는 방식이다. pull방식은 뷰단이 필요한걸 가져와서 보여주는 방식을 취하고 있다. Struts, Spring은 Push방식을 사용하고 있다. Tapestry, JBossSeam, Webwork, struts2는 Pull방식을 사용하고 있다.

WAF들은 그 종류가 많기 때문에 선택이 상당히 어려운 편이다. JAVA WAF만 하더라도 25개정도가 현존하고 있다.

JWAF에
Model : JavaBean / JDO / Hibernate(java) / ibatis(SQL)...
View : Velocity / FreeMarker / WebMacro / JSP
Controller : Struts

WAF에서 꼭 MVC를 모두 적용할 필요가 없다. 국내에서는 Struts + JSP + Hibernate나 Struts + JSP + iBartis 조합을 가장많이 사용하고 있다. 국내에서는 Model에서 Hibernate보다 iBartis를 더 많이 사용하고 있고 해외는 그 반대이다. View단에서는 국내에서는 JSP, 해외에서는 Velocity를 사용하고 있다.

또한 WAF는 한번 선택하면 바꾸기가 쉽지 않기 때문에 신중하게 선택해야 한다고 한다.

나에게는 가장 유익했던 세션이다. 아직 프레임워크를 못 써봐서 정확한 개념이 없었는데 이번 세션을 통해서 개념을 잡을수 있었고 난 솔직히 스트러츠하면 그안에  MVC가 다 포함되어 있는 줄 알았는데 우리가 얘기하는 프레임워크가 보통 Controller쪽의 얘기였다. 그리고 맨날 얘기하는 JSP가 뷰단을 얘기하는 줄도 전혀 몰랐다. ㅡ..ㅡ 오해하고 있던 부분도 이해할 수 있었고 곧 선택해야 할 프레임워크를 고민할때도 도움이 될 내용들이었다.




네번째 세션은 "커머스 사이트에서의 오픈API, 매시업 도입 및 활용가이드"라는 제목으로 진행되었다. TTB등으로 국내에서는 오픈API에 대해서 앞서가고 있는 알라딘에서 나와서 오픈API와 TTB를 개발하면서 고민했던 부부분과 국내외 사례등을 비교하면서 API의 효과등을 이야기해 주었다.

다섯번째 세션인 "국내외 리치 클라이언트 기술의 현황과 전망"은 MS쪽에서 나
  1. Open Source Software [Back]
  2. Rich Internet Application의 약자로 데스크톰 애플리케이션 수준의 기능을 가진 웹 어플리케이션 [Back]
  3. RIA의 개발을 위한 오픈소스 플랫폼 [Back]
  4. XML User interface Language, 모질라재단이 크로스-플랫폼 어플리케이션에서 사용하기 위해 개발한 언어 [Back]
  5. Web-Orented Architecture [Back]
  6. Web Application Framework [Back]
2007/12/02 22:59 2007/12/02 22:59