jQuery를 바닐라 JS로(Vanilla JS) 변경 하기(feat.Pure Javascript)

 

많은 사용자들이 스크립트를 작성할 때 가장 많이 사용하는 것 중 한 가지를 고르라면 jQuery가 아닐까 생각됩니다. jQuery가 많은 사랑을 받게 된 이유는 처음 입문하기가 쉽다는 것과 높은 가독성, 편리한 사용성이 아닐까 생각됩니다. 

하지만 Vue와 React와 같은 라이브러리와 프레임웍이 나타나고 많은 프로젝트에서 Vue와 React를 사용하기 시작하면서부터 프로젝트 작업을 할 때 jQuery를 사용해서 작업하기가 꺼려지는 측면이 있습니다. 

물론 Vue와 React에서도 NPM을 이용하여 jQuery를 사용할 순 있지만 Vue와 React 모두 가상 DOM을 활용하고 가상의 DOM을 추상화하여 사용하기 때문에 jQuery와 같은 DOM을 순차적으로 읽으며 스크립트를 동작시키는 것은 스크립트 충돌을 발생키실 수 있고 속도면서에도 사용을 지양합니다. 

 

그래서 저 역시 회사에서 두 라이브러리와 프레임워크로 프로젝트를 진행하는 경우가 많아져서 스크립트를 작성할 때 가급적이면 순수 자바스크립트로 작성하려고 합니다. 

 

순수 자바스크립트는 다른 말로 바닐라 자바스크립트(Vanilla JS)라고도 불리우는데 두 개는 사실 같은 말입니다. 바닐라 자바스크립트를 검색해보면 사이트가 나와서 어? 뭐지? 하시는 분들도 계실지 모르겠지만 다운을 받아보면 아무것도 적혀 있지 않은 빈 파일임을 알 수 있습니다. 

 

순수 자바스크립트 장점

• 아무것도 다운받지 않고 구동이 가능합니다.
• 다른 프레임워크(라이브러리)에 비해서 속도면에서 우수합니다.
• 웹 표준을 잘 지키는 웹브라우저들에 대해서는 크로스 브라우징이 잘 되는 특성이 있습니다.

 

jQuery로 처음부터 스크립트를 작성하고 이미 jQuery에 너무 익숙해졌다면 순수 자바스크립트로 스크립트를 작성하는 게 조금은 어렵게 느껴질 수 있습니다. 순수 자바스크립트는 ES6의 광범위한 브라우저 지원을 하기에 연습을 통해 이번 기회를 통해서 순수 자바스크립트 사용을 하는 게 좋은 방법 같습니다.

 

아래는 jQuery에서 자주 사용하는 기능을 순수 자바스크립트로 변환했을 때 입니다. 아래를 참고해서 간단한 한 줄부터라도 순수 자바스크립트를 시작한다면 어느 순간 모든 코드를 순수 자바스크립트로 작성하고 있는 자신을 발견하게 될 것입니다. 

 

요소 선택

어떤 작업을 수행할 하나 이상의 DOM 요소를 선택하는 것은 가장 기본적인 요소 중 하나입니다. 

jQuery에서 $(selecter)는 Pure JavaScript에서는 querySelector()or querySelectorAll()입니다.

// jQuery, select all instances of .box
$(".box");

// Instead, select the first instance of .box
document.querySelector(".box");

// …or select all instances of .box  
document.querySelectorAll(".box");

선택 영역의 모든 요소에 대해 함수 실행

querySelectorAll() 선택자는 쿼리와 일치하는 모든 요소를 ​​포함하는 NodeList를 반환합니다. jQuery는 객체에서 메서드를 호출하여 전체 요소 선택에 대해 jQuery로 함수를 실행한다면,  Pure JavaScript에서는 NodeList.forEach()를 사용하여 요소의 NodeList를 반복해야 합니다.

// with jQuery
// Hide all instances of .box
$(".box").hide();

// Without jQuery
// Iterate over the nodelist of elements to hide all instances of .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })

다른 요소 내에서 하나의 요소 찾기

jQuery에서 다른 요소 내에서  추가로 다른 요소를 선택하는 것은. find()입니다.

Pure JavaScript에서는 querySelector 또는 querySelectorAll를 호출하여 선택 범위를 요소의 자식으로 지정하여 동일한 효과를 얻을 수 있습니다.

// With jQuery
// Select the first instance of .box within .container
var container = $(".container");
// Later...
container.find(".box");

// Without jQuery
// Select the first instance of .box within .container
var container = document.querySelector(".container");
// Later...
container.querySelector(".box");

parent(), next(), prev()

다른 요소에 상대적인 하위 요소 또는 상위 요소를 선택하기 위해 DOM을 탐색하기 위해선 nextElementSibling, previousElementSibling 및 parentElement해당 요소에서 액세스 할 수 있습니다.

// with jQuery
// Return the next, previous, and parent element of .box
$(".box").next();
$(".box").prev();
$(".box").parent();

// Without jQuery
// Return the next, previous, and parent element of .box
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

이벤트 작업

jQuery에서 이벤트를 수신하는 방법은. on(),. bind(),. live 등 다양한 방법을 사용하게 됩니다. 또한 이벤트 수신 여부와 관계없이 바로. click()과

Pure JavaScript에서는. addEventListener를 사용하여 이벤트 작업을 진행할 수 있습니다.

// With jQuery
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) {  /* handle click event */ });
$(document).keyup(function(e) {  /* handle key up event */  });

// Without jQuery
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

동적으로 추가된 요소에 대한 이벤트 적용

jQuery의. on() 이벤트 방법을 사용하면 DOM에 동적으로 추가되는 객체의 이벤트를 큰 무리 없이 "라이브" 이벤트 핸들러로 작업할 수 있습니다. 이와 같이 Pure JavaScript에서 jQuery 없이 유사한 작업을 수행하려면 DOM에 추가할 때 요소에 이벤트 핸들러를 첨부할 수 있습니다.

// With jQuery
// Handle click events .search-result elements, 
// even when they're added to the DOM programmatically
$(".search-container").on("click", ".search-result", handleClick);

// Without jQuery
// Create and add an element to the DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Add an event listener to the element
searchElement.addEventListener("click", handleClick);

이벤트 트리거 및 생성

trigger()를 호출하여 수동으로 dispatchEvent() 이벤트를 트리거하는 것과 동일합니다.

dispatchEvent() 메서드는 모든 요소에서 호출할 수 있으며 Event 첫 번째 인수로 사용합니다.

// With jQuery
// Trigger myEvent on document and .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent");

// Without jQuery
// Create and dispatch myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

스타일링 요소

jQuery의. css() 사용하여  인라인 CSS를 변경하기 위해 요소를 호출하는 경우 Pure JavaScript에서 동일한 효과를 얻기 위해서. style() 속성을 사용하여 값을 할당합니다.

// With jQuery
// Select .box and change text color to #000
$(".box").css("color", "#000");

// Without jQuery
// Select the first .box and change its text color to #000
document.querySelector(".box").style.color = "#000";

jQuery를 사용하면 키-값 쌍이 있는 객체를 전달하여 한 번에 많은 속성의 스타일을 지정할 수 있습니다. Pure JavaScript에서는 값을 한 번에 하나씩 설정하거나 전체 스타일 문자열을 설정할 수 있습니다. hide()

// With jQuery
// Pass multiple styles
$(".box").css({
  "color": "#000",
  "background-color": "red"
});

// Without jQuery
// Set color to #000 and background to red
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";

// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red";

 그리고 show()

.hide() 및. show()를 사용하면 특정 엘리먼트 요소의 Display 속성을  none 또는 block처리할 수 있습니다.   

Pure JavaScript에서는 .style 속성을 이용하여 display 속성 값을 none 하고 block으로 변경할 수 있습니다.

// With jQuery
// Hide and show and element
$(".box").hide();
$(".box").show();

// Without jQuery
// Hide and show an element by changing "display" to block and none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

문서 준비

예를 들어 DOM의 객체에 이벤트를 첨부하기 전에 DOM이 완전히 로드될 때까지 기다려야 하는 경우 일반적으로 jQuery에서 $(document). ready()또는 $(function)과 같은 일반적인 약어를 사용합니다.

Pure JavaScript에서는 DOMContentLoaded를 사용하여 그것을 대체할 유사한 함수를 쉽게 구성할 수 있습니다.

// With jQuery
$(document).ready(function() { 
  /* Do things after DOM has fully loaded */
});

// Without jQuery
// Define a convenience method and use it
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded */ 
});

클래스 작업

classList 속성을 통해 클래스에 쉽게 액세스하고 작업하여 클래스를 토글(toggle), 교체, 추가 및 제거할 수 있습니다.

// With jQuery
// Add, remove, and the toggle the "focus" class
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");

// Without jQuery
// Add, remove, and the toggle the "focus" class
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

여러 클래스를 제거하거나 추가하려면. add()및. remove()에 여러 인수를 전달할 수 있습니다. 

// Add "focus" and "highlighted" classes, and then remove them
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");

상호 배타적인 두 클래스를 전환하는 경우 classList속성에 액세스 하여. replace()한 클래스를 다른 클래스로 교체하도록 호출할 수 있습니다.

// Remove the "focus" class and add "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");

요소에 특정 클래스가 있는지 확인

요소에 특정 클래스가 있는지 여부에 따라 함수만 실행하려는 경우 jQuery. hasClass()를  Pure JavaScript에서는 .classList.contains()로 대체할 수 있습니다.

// With jQuery
// Check if .box has a class of "focus", and do something
if ($(".box").hasClass("focus")) {
  // Do something...
}

// Without jQuery
// Check if .box has a class of "focus", and do something
if (document.querySelector(".box").classList.contains("focus")) {
  // Do something...
}

. get() 또는. ajax()를 사용한 네트워크 요청

fetch()를 사용하여 jQuery ajax()및 get() 메서드 와 유사한 방식으로 네트워크 요청을 생성할 수 있습니다. fetch() URL을 인수로 취하고 응답을 처리하는 데 사용할 수 있는 Promise를 반환합니다.

// With jQuery
$.ajax({
    url: "data.json"
  }).done(function(data) {
    // ...
  }).fail(function() {
    // Handle error
  });

// Without jQuery
fetch("data.json")
  .then(data => {
    // Handle data
  }).catch(error => {
    // Handle error
  });

요소 만들기

DOM에 추가 동적으로 자바 스크립트의 요소를 만들려면 createElement()에서 document 만들려는 어떤 요소 표시하고 그것에게 태그 이름을 전달합니다.

// Create a div & span
$("<div/>");
$("<span/>");

// Create a div and a span
document.createElement("div");
document.createElement("span");

요소에 일부 콘텐츠를 추가하려면 textContent속성을 설정하거나 텍스트 노드를 만들어 createTextNode요소에 추가하면 됩니다.

var element = document.createElement("div");
element.textContent = "Text"
// or create a textNode and append it
var text = document.createTextNode("Text");
element.appendChild(text);

DOM 업데이트

요소의 텍스트를 변경하거나 DOM에 새 요소를 추가하려는 경우 발견한 적이 innerHTML() 있지만 이를 사용하면 XSS(교차 사이트 스크립팅) 공격에 노출될 수 있습니다. 이 문제를 해결하고 HTML을 정리할 수 있지만 몇 가지 더 안전한 대안이 있습니다.

요소의 텍스트만 읽거나 업데이트하려는 textContent경우 객체의 속성을 사용하여 현재 텍스트를 반환하거나 업데이트할 수 있습니다.

// With jQuery
// Update the text of a .button
$(".button").text("New text");
// Read the text of a .button
$(".button").text(); // Returns "New text"

// Without jQuery
// Update the text of a .button
document.querySelector(".button").textContent = "New text";
// Read the text of a .button
document.querySelector(".button").textContent; // Returns "New text"

새 요소를 구성하는 경우 appendChild()를 사용하여  해당 요소를 다른 요소에 추가할 수 있습니다 

// Create div element and append it to .container
$(".container").append($("<div/>"));

// Create a div and append it to .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);

div를 만들고, 텍스트와 클래스를 업데이트하고, DOM에 추가하는 방법은 다음과 같습니다.

// Create a div
var element = document.createElement("div");

// Update its class
element.classList.add("box");

// Set its text
element.textContent = "Text inside box";

// Append the element to .container
document.querySelector(".container").appendChild(element);