제공 : 한빛 네트워크
저자 : Lawrence O"Sullivan
역자 : 이대엽
원문 : Framework Simplicity Can Hide Pitfalls

한 가지 저를 난감하게 하는 건 어떤 기법이 인기가 있으면 그게 최상의 코드가 아닌 경우에도 그걸 그대로 따라하는 프로그래머를 볼 때입니다. 불행히도 자바스크립트 프레임워크가 숨겨주는 복잡함과 프레임워크에서 제공하는 "멋진" 요소는 비효율적으로 작성된 코드를 감춰버릴 수 있습니다.

여기서는 Prototype 라이브러리의 $ 함수를 예제로 사용하겠습니다. 많은 개발자들이 이 함수를 잘 알고 있고, 저 또한 즐겨 사용하기 때문이죠. 잘 모르시는 분을 위해 잠깐 설명하자면, $ 함수는 자바스크립트에서 기본적으로 제공하는 document.getElementById 메서드를 캡슐화합니다. $ 함수가 인기있는 이유로는 "document.getElementById"보다는 "$"를 입력하는 게 더 쉽다는 것도 있죠. 그리고 $ 함수는 어떤 코드를 추가로 제공하고 있기도 하는데, 바로 그게 핵심입니다.

아래와 같은 코드를 찾는 건 그리 어려운 일이 아닙니다.

    $("warning").style.display = "block";

좋아 보입니다. 간결하면서도 정확하죠. 이번에는 위 코드와 같은 결과를 내는 다른 예제를 보기로 하죠.

    var elementIds = ["warning"];
    var elements = new Array();

    for (var i = 0; i < elementIds.length; i++) {
         var element = elementIds[i];

         if (typeof element == "string")
               element = document.getElementById(element);

         if (elementIds.length == 1)
                break;

         elements.push(element);
     }
     element.style.display = “block”;

프로그래머가 뭘 하고 있었는지 짐작이나 하시겠습니까? 아래에 있는 단 한줄의 코드로도 위 코드가 했던 일을 할 수 있습니다.

    document.getElementById("warning").style.display = "block";

이제 $ 함수를 살펴보기로 하죠. 코드는 아래와 같습니다:

    function $() {
        var elements = new Array();

        for (var i = 0; i < arguments.length; i++) {
              var element = arguments[i];

              if (typeof element == "string")
                   element = document.getElementById(element);

              if (arguments.length == 1)
                   return element;

              elements.push(element);
        }
        return elements;
    }

$ 함수는 문자열 ID나 DOM 객체 참조가 될 수 있는 임의 갯수의 인자를 전달받아 객체 참조의 배열을 반환합니다. $ 함수는 여러 요소에 대한 참조를 획득하는데 안성맞춤이죠. 그렇지만 필요 여부에 관계없이 모든 코드가 $ 함수 안에서 실행되고 있습니다.

보통 주어진 문자열 ID에 대한 단 하나의 객체 참조만 필요한 경우가 대부분이죠. 이런 경우에는 document.getElementById를 사용하는 게 훨씬 더 직접적인 방법입니다.

그리고 ID나 객체 참조가 전달되는 경우가 있을 지도 모릅니다. 예를 들면, 어떤 함수가 다른 어딘가에 이미 객체 참조가 존재하는 다른 여러 함수로부터 호출되는 경우가 여기에 해당하죠. 그런 경우에는 다음 두 줄을 유용하게 써먹을 수 있을 겁니다.

    if (typeof element == "string")
          element = document.getElementById(element);

이런 코드가 빈번하게 사용된다면 함수 안에 집어 넣어도 무방할 겁니다.

그런데 이렇게 하면 성능이 나노초 수준에서 약간 떨어질 거라고 할 수도 있는데, 사실 맞는 말입니다. 이 코드에는 함수 호출과 관련된 오버헤드와 더불어 두 객체(유효범위 객체[scope object]와 배열)가 추가로 생성되기 때문이죠. 그런데 이 코드가 특히 반복문 안에서 사용되는 경우라면, 이런 비효율적인 부하가 축적됩니다. 대단히 동적인 상호작용을 제공하는 RIA 사이트에서는 성능이 문제가 될 수도 있으며, 사소한 개선 사항이라도 만족스런 결과를 내는데 기여하게 됩니다.

이와 비슷한 문제를 겪어본 적이 있나요? 아니면 점점 더 빨라지는 프로세서 속도나 저렴해 지는 메모리로도 필요한 성능을 낼 수 있다고 생각하시나요? 이에 대한 의견이 있다면 제게 알려주세요.