no 프레임워크

vue, angular, react, go언어, 메테오 등 어느샌가 풀스택 프레임워크가 증가하면서, 이제 순수한 자바스크립트가 뭔지 아 수 없게 됐다. 이것저것 설치하다보면, '무엇을 아느냐'가 '어떻게 하느냐'보다 더 중요할 때도 있다. 그렇다고 프레임워크를 사용하지 않을 수도 없다.(의존성) 

 

자바스크립트란 이름에서부터 '순수'가 느껴지지 않지만 프레임워크를 사용을 최대한 줄이는 방향을 '순수'라 생각한다면, 아마도 다음 3가지 방법이 아닐까다.

 

1] CSS기능 강화

2] ES5, ES6...최적화

3] DOM 신기능 사용

 

 

---

ClassList

 

최근 알게 된 사실이지만 'classList'는 감동이었다. 과거 document.getElementsByClassName을 사용할 경우, DOM tree를 찾는 과정이 미로 수준이었다. 게다가 class를 추가하고 제거하는 명령어도 길고, 복잡했다. 하지만 classList가 추가된 이후부터  DOM을 수정하는 작업이 쉬워졌다.  

 

 

 

classList 덕분에 자바스크립트 & css조합을 이용한 작업의 효율성이 높아졌다. 특히, 퀴즈제작과 같은 간단한 어플구현에 이상적이다. classList의 메서드는 대표적으로 'add()', 'remove()'이외에도 다양하다.

 

const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

 

 

 

---

ES6...

자바스크립트는 ES2015 이후부터 상당히 효율적으로 변했다. 그 중에서도 가장 편리함을 느끼는 부분은 백쿼트( ` )로 감싸는 문법이다. 대개 화살표 함수를 언급하는 경우가 많은데, 개인적으로 백쿼트를 통해 DOM을 그대로 전달하는 부분이 정말 마음에 든다.   

 

button.innerHTML = `<i class="icon-lightbulb"></i>Back quote is Good!
                    <object data="/confetti.svg" width="30" height = "30"> </object> `;

 

백쿼트 덕분에 더이상 따옴표와 '+'기호를 섞어가며 지저분하게 작성할 필요가 없어졌다. 특히, createElement()를 통해 DOM을 생성하고, 다시 child로 붙여주는 귀찮은 작업을 한큐에 해결해줬다는 점에서 통쾌한 기분마저 든다.  또, 백쿼트는 DOM의 속성값까지 그대로 넘길 수 있기 때문에 상당히 효율적이다. 백쿼트로 감싸면 만사형통이다.

 

 

 

---

closest

 

ES2015이전의 자바스크립트 시절, 어쩔 수 없이 제이쿼리를 사용할 수밖에 없던 이유는 '노드 추가, 삭제, 교체 등'과 같은 노드 탐색을 하기 위해서였다. 순수하게 자바스크립트 DOM만으로 노드를 탐색하거나 이동하려면 parentNode, childNode를 몇번씩 연결시켜야 했다. 이때 등장한 순수 자바스크립트 closest()기능은 가뭄의 단비와 같았다.

 

closest()

예시만 보더라도 스트레스가 확 내려가는 듯하다.  더이상 .parentElement, .childElement, .Sibling 등 과 같은 노드 지옥에서 빠져나올 수 있게 됐다. querySelector, classList, backquote, closest()를 적절하게 조합해서, 프레임워크 의존도를 낮춰보자.