[JavaScript] 모든 제이쿼리 함수를 바닐라로 만들기 실험결과

프로젝트에서 다른 팀원들의 이해를 돕기 위해(실력 향상 목표로) 제이쿼리의 사용을 제한해서 사용했다. 그리고 팀원들이 작성하신 제이쿼리 문법이랑 섞이면서 어떤 곳은 제이쿼리 어떤 곳은 자바스크립트로 작성된 JS 파일이 됐다. 그리고 어떤 api는 $.ajax로, 어떤 api는 async/fetch로, 어떤 것은 fetch.then()으로 작성을 해서 다소 건드리기 난감한 코드 덩어리를 가지고 있었다. 

1차 프로젝트 발표 이후 개선점을 짚으면서 우리 팀은 라이트하우스 스코어에 주목했고 하루 이틀 만에 퍼포먼스를 제외한 나머지 항목들은 올릴 수 있는 최대한까지 올려놓았다. 그런데 퍼포먼스는 진짜 뭘 해도 줄어들지 않았고, 폰트를 미리 다운받아 사용한다던가 이미지의 크기를 받을 때부터 제한해서 받는다던가 하는 아이디어를 구상 중이었는데, 퍼포먼스 레코드를 보다가 제이쿼리가 uuidv4 같은 라이브러리보다 (당연하지만) 임포트 시간 소모가 더 큰 것을 확인했고, 평소 들어온 것이나 내가 생각하던 것이나 제이쿼리를 없앨 수 있다면 이런 부분들이 해결될 것이라 예상했다.

평소에 제이쿼리에 의존하고 있다고 생각하지는 않았는데, 몇가지 문법은 대체할 문법이 생각이 안나서 찾아보기도 했다.

$("선택자")는 document.querySelectorAll("클래스") or document.getElementById("아이디") 로 변환했다.

append() 메소드와 empty() 메소드는 innerHTML 메소드로 대체했다.

addClass와 removeClass는 classList를 add 하거나 remove 하는 방식으로 대체했다.

show()와 hide()는 element의 style.display에 접근해서 디스플레이 값을 조절하는 것으로 대체했다.

$.ajax({})는 fetch로 대체했다. GET 메소드의 경우 따로 헤더와 바디를 실을 필요가 없어서 간단히 변환가능했지만, 다른 메소드들은 조금 번거로워지는 면이 있다.

의외로 가장 아쉬웠던 것은 .not() 메소드가 없는것을 선택자로 메꿔야 하는 부분이 좀 번거로웠다.

:not()에 또 다른 선택자를 넣어줘야 하고, title이 "제목1"이 아닌 h1 태그를 찾으려면 "h1:not([title='제목'])" 이런 식이어서 조금 귀찮았다. 템플릿 문자열을 사용해야 하는 경우여서 더 번거로웠던 것 같다.

그리고 특정 선택자로 매칭된 엘리먼트가 다수이든 복수이든 똑같은 메소드를 사용하는 제이쿼리와 다르게 바닐라에서는 forEach 문법을 사용해야 하는 점이 다소 귀찮았다.

그런데.......

자바스크립트 문법과 제이쿼리가 공존할때

모두 정리해서 자바스크립트만 남았을때

왜 느려진거지 (1645ms -> 3146ms);;;;;;

제이쿼리 섞인 상태

퓨어바닐라ㅋ.. 자바스크립트

라이트하우스는 2초의 차이로 퍼포먼스 점수 낙폭이 심했다.

아니 어째서 오늘 아침 점수보다 저녁 점수가 더 낮은거지;;;

콜트리가 쌓이는 것이 제이쿼리가 훨씬 많을 줄 알았는데 그 부분은 자바스크립트도 비슷했다.

반대로 생각해서 제이쿼리 함량을 올리면 속도가 개선될까..?

시도해보고 싶지는 않지만, 일단은 기존의 섞인 상태를 유지하기로 했다.