Jquery 의존성 해결하기 (Jquery to Vanilla JS)

Jquery 의존성을 해결해야 하는 이유

jQuery는 DOM 처리 및 이벤트를 위한 코드 개발을 매우 간편하게 작성할 수 있는 javascript 라이브러리이다.

반면, 외부 라이브러리를 사용하지 않거나 최소한으로 사용하여 작성한 자바스크립트 코드를 Vanilla JavaScript라고 하며, 다른 플랫폼보다도 오래되었음에도 불구하고 꾸준히 업데이트 되어 온 프레임워크이다. 

다른 프레임워크나 jQuery 보다도 압도적으로 빠르고(jQuery는 순수 Javscript(Vanilla JS) 대비 최대 10배 정도의 속도차이가 발생) 어떤 라이브러리나 프레임워크를 사용하더라도 작동과 크로스 브라우징이 잘 되는 큰 장점이 있다. 용량도 매우 가벼워서 압축을 하는 경우 압축을 하지 않은 경우보다 용량이 더 나가는 역설적인 무게를 자랑한다.

 

2006년에 출시되었던 jQuery는 한 때는 자바스크립트 개발이 곧 jQuery 개발이라고 여겨질 정도로 정도로 상당히 오랫동안 자바스크립트 생태계를 주름잡던 라이브러리이지만 최근에는 Angular, React, Vue와 같은 모던 자바스크립트 라이브러리에 밀려 주로 레거시(legacy) 코드에서나 마치못해 쓰는 라이브러리로 전략하고 말았다.

이처럼, 컴포넌트 기반의 웹 프로그래밍의 대세가 되고 브라우저의 표준화가 전반적으로 개선되고 있어서 (제이쿼리와 같은 라이브러리를 사용해야만 활용 가능했던 편의 기능을 브라우저에서 기본 API로 제공함. 예를 들어, Fetch API는 제이쿼리에서 가장 널리 사용되던 jQuery.ajax() 메소드 수준의 편의성과 유연성을 제공) 앞으로 jQuery가 설 자리는 점점 더 좁아질 것이라 예상된다.

 

IE 10 버전 이상의 최신 브라우저들은 BOM/DOM 처리에 관한 다양한 api들을 제공하고 있어, 특별히 구버전의 브라우저에 서비스를 제공하지 않아도 된다면 아래의 지시를 따라 Vanilla JS로 변환해보는 것을 추천한다.

 

수정 방법

요소 선택

getElementBy~로 호출하는 방식은 HTMLCollection에 리턴이 되고 querySelector은 NodeList에 리턴이 된다.

HTMLcollection과 NodeList 둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공한다고 한다.

1. element의 id 속성으로 접근

$('#요소의id')

document.getElementById('요소의id'); 
document.querySelector('#요소의id');

querySelector그리고 querySelectorAll에 비해 getElementByID가 더 빠르고 더 잘 지원이 된다

2. element의 class 속성으로 접근

$('.요소의class')

document.getElementsByClassName('요소의class'); 
document.querySelectorAll('.요소의class');

3. tag로 접근

jQuery의 $()와 동일한 방식으로 CSS 선택자를 넘겨서 원하는 HTML 요소를 찾을 수 있도록 querySelector(), querySelectorAll() 함수를 사용 가능

$("p")

document.querySelector("p"); // p 태그를 가진 모든 요소 중 첫번째 요소만 선택할 경우
document.querySelectorAll("p"); // p 태그를 가진 모든 요소를 선택할 경우

jQuery로 선택된 여러 개의 요소 중 각각의 요소를 접근할 때는 eq() 메서드를 사용하는 반면에

const $fruits = $("div.fruit");
$fruits.eq(0)
$fruits.eq(1)
$fruits.eq(2)

자바스크립트를 사용할 때는 배열을 다루듯이 인덱스를 사용하면 된다.

const fruitEls = document.querySelectorAll("div.fruit");
fruitEls[0]
fruitEls[1]
fruitEls[2]

값(value) 변경

jQuery의 val() 함수는 DOM API의 value 속성으로 대체

$email.val('user@test.com')

document.querySelector('input[type="email"]').value = "user@test.com";

텍스트 변경

jQuery의 text() 함수는 DOM API의 textContent 속성으로 간단하게 대체가 가능

$("h1#title").text("안녕하세요!")

document.querySelector("h1#title").textContent = "안녕하세요!";

CSS 변경

$("div.fruit").css("border", "1px solid blue")를 아래와 같이 수정한다

document.querySelectorAll("div.fruit").style.border = "1px solid blue";

클래스 변경

jQuery 코드는 xxxClass() 형태의 메서드를 호출하는 반면에 

const $fruits = $("div.fruit");
$fruits.eq(0).removeClass("active");
$fruits.eq(1).addClass("active");
$fruits.eq(2).toggleClass("active");

자바스크립트 코드는 classList 속성을 통해서 동일한 작업을 수행

const fruitEls = document.querySelectorAll("div.fruit");
fruitEls[0].classList.remove("active");
fruitEls[1].classList.add("active");
fruitEls[2].classList.toggle("active");

부모/형제 요소 선택 

jQuery에서는 prev() 메서드를 사용해서 이전 요소, next() 메서드를 사용해서 다음 요소, parent() 메서드를 사용해서 부모 요소를 선택

$div = $("div.active");
$div.css("color", "yellow");
$div.prev().css("color", "red");
$div.next().css("color", "green");
$div.parent().css("background", "black");

자바스크립트에서도 동일한 기능할 하는 속성인 nextElementSibling, previousElementSibling, parentElement을 제공

const divEl = document.querySelector("div.active");
divEl.style.color = "yellow";
divEl.nextElementSibling.style.color = "green";
divEl.previousElementSibling.style.color = "red";
divEl.parentElement.style.background = "black";

자녀 요소 추가 및 삭제

$('#parend_element').append("child_element");

document.getElementByID('parend_element').innerHTML += "child_element"

$('#parent_element').children().remove();

document.getElementById('parent_element').replaceChildren()

페이지 로드 시 호출 함수 $(function () {}) 

$(function () {
	console.log("hey")
})

 

document.addEventListener("DOMContentLoaded", () => {
	console.log("hey")
})

document.onload = function() {}와는 차이가 있다

 

이벤트

$ele.on(eventName, handler)

ele.addEventListener(eventName, handler)

$.ajax()

fetch_option = {
    method: "POST",
    headers: {
    "Content-Type" : "application/json",
    },
    body : JSON.stringify({}),
};
fetch("web_address/", fetch_option).then(response => {return response.json()})
.then(response => {
  // code
})
.catch(function(err) {
	alert(err);
});

Reference

jQuery 없이 자바스크립트로 HTML 요소 선택하기