jQuery to vanilla JS example

시작

jQuery 말고 vanilla JS를 연습해 보았다.
최근 컴포넌트 위주로 개발을 하다보니 자연스럽게 jQuery의 사용빈도가 많이 떨어지고 있는 추세이고, vanilla JS를 사용하는 분위기이기에 (그래도, 매력적인 plugin 들이 많은 jQuery를 버리는 건 쉽지 않아보인다.)
기존 jQuery로 구성했던 UI 관련 스크립트를 vanilla JS로 바꿔가보기로 한다.
아래보다 더 좋은 코드가 있을 수 있다.

샘플 HTML

<ul id="ionic_list">
    <li class="ion-ionic" data-pack="default" data-tags="badass, framework, sexy, hawt"></li>
    <li class="ion-arrow-up-a" data-pack="default" data-tags=""></li>
    <li class="ion-arrow-right-a" data-pack="default" data-tags=""></li>
    <li class="ion-arrow-down-a" data-pack="default" data-tags=""></li>
    <li class="ion-arrow-left-a" data-pack="default" data-tags=""></li>
    ...
</ul>

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
$(document).ready(function(){
    console.log("Ready");

    if($("#ionic_list").length) {
        var $ionic_list = $("#ionic_list li");
        $.each($ionic_list, function(i, o){
            var $this = $(this);
            $this
                .append($("").text($this.attr("class")))
                .click(function(e){
                    prompt("Ctrl+C를 눌러 복사하세요.", $this.attr("class"));
                });
        });
    }
});

Vanilla JS

document.addEventListener("DOMContentLoaded", function() {
    console.log("Ready");

    var ionic_list = document.getElementById("ionic_list");
    if(!!ionic_list) {
        for(var i = 0; i < ionic_list.children.length; i++) {
            li_classname = ionic_list.children[i].className;
            var span = document.createElement("span");
            var span_txt = document.createTextNode(li_classname);
            span.appendChild(span_txt);
            ionic_list.children[i].appendChild(span);
            
            //click
            ionic_list.children[i].addEventListener("click", function(event){
                prompt("Ctrl+C를 눌러 복사하세요.", event.target.className);
            });
        }
    }
});

정리

  • vanilla JS 사이트에 따르면 ID를 통한 요소 접근은 jQuery보다 4배, 태그를 통한 요소 접근은 40배 정도 빠르다고 소개하고 있다.
  • jQuery와 다르게 외부 리소스에 의존적이지 않아서 좋다.
  • 요소에 추가적으로 텍스트나 자식 요소를 추가하는 건 jQuery가 편하긴 하지만, Vanilla JS도 금방 익숙해지는 게 가능할 거 같다.
  • 라인 수는 늘어났지만 느낌 탓인지 Vanilla JS의 퍼포먼스는 더 좋은 거 같다.
2019 ugoon.net