javascript (Vanilla JS) - jQuery 지양하기

Vanlia javascript란 라이브러리나 프레임워크를 쓰지 않은 순수 자바스크립트이다.
라이브러리가 없으니 속도도 당연 빠르다. 라이브러리가 없어서 디버깅할때도 편하다.

처음 개발을 시작하면서 바로 제이쿼리를 사용했기 때문에 그게 제일 익숙했다. 그런데 몇년 전부터 제이쿼리를 지양하자는 글을 많이 봤는데 업무적으로는 아직 쓰기때문에 놓지 못했다ㅠㅠ

이번에 개인적으로 프로젝트를 하는데 제이쿼리로 빠르게 만들고 바닐라js로 바꾸는걸 하려고 했는데.. 처음부터 바닐라js로 하는게 낫다고 판단이 되어서 시작해봤다!

제이쿼리는 셀렉터가 너무 편했어서 처음에 스크립트를 작성했을 때, document.querySelector~ 를 쓰는게 적응이 안됐다.
그리고 click이벤트 줄때도 addEventListener()를 쓰는거랑.. querySelectorAll에서 click이벤트 줄때 제이쿼리랑은 다르게 nodeList로 반환되기 때문에 for문이나 foreach문으로 돌려야하는거도 귀찮았다.
제이쿼리로 한줄에 끝나는걸 두줄이상 쓰게되는게 쫌 귀찮았지만 하다보면 적응이 된다.

그리고 처음에 js를 작성했는데 "addeventlistener is not a function" 이런 오류가 떠서 검색해보니, window.onload 안에 스크립트를 넣으라해서 이건 해결됐다. body 태그안에서 맨 밑에 스크립트를 부르면 dom생성하고 그다음에 쫌 늦게 불러지는거 아닌가?.. 뭐가 문젠지 모르겠다! 일단은 이렇게 해결됐으니 나중에 더 자세히 찾아봐야겠다.

 

Vanila JS vs jQuery

// jQuery
const test = $('.test-class');
// javascript
const test = document.querySelector('.test-class');

// jQuery
test.addClass('add-class');
test.removeClass('add-class');
// javascript
test.classList.add('add-class');
test.classList.remove('add-class');

// jQuery
const testList = $('.test-class');
testList.click(function(){
	console.log('test');
});
// javascript
const testList = document.querySelectorAll('.test-class');
for( const test of testList ){
	inputNumber.addEventListener('keyup', function(){
		console.log('click test');
	});
}

제이쿼리를 지양하는 이유는 바닐라js가 빠르기 때문이다. 그리고 순수js로만 작성을 해보고싶었고 요즘 회사 채용공고 를 보면 제이쿼리가 별로 없어서 그 추세를 따르는게 맞다고 생각했다.
그런데 워낙 작은 프로젝트다보니, 훨씬 빠르다라는걸 못느꼈어서 아쉽긴 하지만.. 제이쿼리로 먼저 작성하고 성능 테스트 한다음에 바닐라js로 바꿔볼껄 그랬나.. 나중에 프로젝트 하게된다면 그렇게 해봐야겠다!