왜 블로그에 Vanilla JS를 사용했나
개발 •
블로그를 Vanilla JS만 이용해 SPA(Single Page Application)로 업데이트한 후기도 정리해봤습니다.
바닐라 자바스크립트로 SPA 만든 과정과 후기
들어가기 앞서
jQuery는 한때 굉장히 강력한 라이브러리였지만, 자바스크립트가 해야 할 일(eg. 양방향 데이터 바인딩)이 갈수록 많아지면서 React, Angular, Vue와 같은 라이브러리에 묻히는 라이브러리가 되었습니다.
하지만, 웹 애플리케이션 같은 거대한 규모가 아닌, 블로그 같은 작은 규모의 페이지에선 여전히 쉽고 강력한 라이브러리임은 분명해 보입니다.
라이브러리를 쓰지 않은 이유
크게 두 가지가 있습니다.
첫째, 바닐라 자바스크립트의 가변성이 가장 낮다.
둘째, 바닐라 자바스크립트가 가장 저렴하다.
낮은 가변성
자바스크립트를 처음 배울 때, 으레 그렇듯, 제가 본 강의도 바닐라 자바스크립트에 대해선 굉장히 짧게 설명하고 jQuery를 설명하기 시작했습니다.
당연히 그냥 jQuery를 자바스크립트 그 자체인 양 모든 코드를 jQuery로 짰는데, 시각을 조금만 넓혀보니 jQuery는 역사의 뒤안길로 사라지는 중이더라고요.
개발이란걸 시작한 지 얼마 되지도 않았던 시기에 - 물론 지금도 시작한지 1년 반이 넘을락 말락 하는 초보지만 - 이런 건 꽤 충격적으로 제게 다가왔고, 유행하는 최신 라이브러리를 배우기보다 바닐라 자바스크립트를 잘 다뤄야겠단 생각이 들게 했습니다.
인터넷 세상에 널린 무수한 페이지가 모두 자바스크립트 아래에 돌아가니, 판을 바꾸는 커다란 업데이트도 쉬이 이뤄지지 않을 거란 생각도 바닐라 자바스크립트에 대한 학구열을 태우는데 꽤 큰 장작이 되어줬습니다.
저렴한 비용
1 - 용량적 비용
위 이미지인 슈퍼 마리오 브라더스의 용량은 대략 40KB 남짓이었습니다.
jQuery는 2 * 슈퍼 마리오 브라더스보다 큰 용량인 86KB를 차지합니다. (jquery-3.4.1.min.js 기준)
React로 빌드한 앱은 Hello World! 수준임에도 500KB 남짓한 용량을 차지하더군요.
똑같은 페이지를 React 없이 만드니 10KB도 넘어가질 않았습니다.
언제부턴지 모르게, 태반의 프로그램이건 OS건 몸집을 불리기에 바빠 보입니다.
무슨 업데이트를 했는진 모르겠는데 앱 용량이 몇십MB가 불어나는 일은 예삿일 수준입니다.
웹에서도, 각종 플러그인으로 떡칠해서 군살이 터져 나올듯한 페이지가 한둘이 아니더군요.
심지어 거기에 어디가 본문인지 알 수도 없는 양의 광고도 얹으면 진짜 환장할 페이지가 탄생하게 됩니다.
뭐 대충 10KB 남짓의 본문을 보려고, 몇백KB ~ 몇MB짜리 광고를 불러오고, 몇십 ~ 몇백 KB짜리 라이브러리, 플러그인 십수 개를 불러와서 페이지를 읽게 되는 겁니다.
40KB 안에 게임 하나를 구겨 넣던 개발자들을 본받을 필요가 절실하지 않나…싶습니다.
2 - 시간적 비용
요즘 컴퓨터가 워낙 빨라서 이정돈 금방 돌린다.
여기저기서 꽤 많이 들어본 말입니다.
컴퓨터의 성능 향상과 함께 최적화의 중요성은 많은 사람이 괘념치 않는단 생각이 듭니다.
바닐라 자바스크립트를 알고, jQuery와 퍼포먼스 비교를 해봤었는데, jQuey는 정말 느립니다.
console.time("jQuery")
$("#header").addClass("hi")
console.timeEnd("jQuery")
console.time("vanilla")
document.getElementById("header").classList.add("hi")
console.timeEnd("vanilla")위처럼 정말 간단한 스크립트도 jQuery보다 바닐라가 최소 3배 이상 빠른 속도로 실행합니다.
여기에 상술한 용량적 비용까지 합치면, 차이는 당연히 더 벌어지겠죠.
흔히들 간과하는 게, jQuery에서 $ 하나 추가하는 순간 함수가 하나 더 실행되는 겁니다.
$(elem)도 당연히 예외는 아니고요.
위 예시에선 0.0n ~ 0.n 밀리 초대의 일이지만, 각종 함수가 쌓이고 쌓이다 보면 그 결과는 쉽게 무시할 수 없게 비대해집니다.
억지로 두 가지로 나눠서 얘기했지만, 당연히 용량이 커지면 불러오는 시간도 길어지는 만큼 1번과 2번이 쉽게 떨어지는 문제는 아니긴 합니다.
끝내며
참 쓰고 보니 당연한 얘기만 늘어놨는데, 왜 당연한 문제를 해결하는 건 그리도 힘든 일인지 모르겠네요.
크로스 브라우징 - 이라 쓰고 IE 호환이라 읽는 - 때문에 쓰던 jQuery를 내다 버리고 언젠간 이유를 정리해놔야지 했다가 이제야 쓰게 되네요.
모쪼록 많은 분이 깔끔한 블로그를 운영하시는 날이 오길 바라며 이만 줄이겠습니다.