jQuery is not bad

하지만 오래된 방식이긴 하다.

7 min readJul 6, 2020

며칠 전 커뮤니티에서 보았던 글이 jQuery 에 대한 글이었고, 2020년이 된 지금 jQuery라는 라이브러리에 대한 오해가 많다고 생각해서 이 글을 작성한다.

많은 사람들이 JavaScript 라는 언어의 이상한 동작을 재미있게 여기지만, 강타입 언어를 주로 사용하던 사람들이 약타입 언어를 사용하면서 발생하는 특성을 이른바 ‘재미있다' 고 부른다고 생각하지, JavaScript 라는 언어 자체는 꽤 잘 짜여져 있다고 생각한다.

무엇보다 ES6 이후의 JavaScript는 그 이전과 비교하기 어려울 정도로 고도화되어가고 있으며, 이전에는 상상도 하지 못했을 법한 다양한 인터페이스들이 나오고 있다 (나는 무엇보다 콜백 지옥에서 벗어나게 해준 async / await에 감사하다).

2020년이 된 지금 가장 많은 오해를 받고있는 라이브러리는 jQuery라고 생각한다. 많은 사람들이 여전히 ‘저는 JavaScript를 처음 배우는 데 jQuery를 배워야할까요?’ 라는 질문을 할 정도로 인기였고, 아마 이후에도 한동안은 인기가 지속되리라 생각한다.

jQuery는 왜 인기 있고, 지금까지 그 인기가 이어지고 있는걸까?

영 별로인 DOM (Document Object Model)

DOM 에서 특정 요소를 제어하려면 document.getElementById('') 또는 Element.getElementsByClassName('') 같은 인터페이스를 사용해서 DOM Node를 가져오고, Node를 일일히 제어하는 방식을 취해야 했다.

인터페이스에서 알아볼 수 있겠지만 Id를 통해 가져오는 건 Node 를 반환하지만, Class를 통해 가져오는 건 NodeList 를 반환한다. 특정 클래스명을 가진 여러 개의 Node를 함께 제어하려면 while 이나 for 문을 이용하여 NodeList 를 일일히 탐색해야하는 데, 이런 데에서 발생하는 비용이 적지 않았다.

예를 들어 특정 클래스명을 가진 요소에 마우스를 올렸을 때 클래스를 추가한다고 가정하면 아래와 같은 코드를 작성해야했다.

var buttons = document.getElementsByClassName('button');
for(var i = 0; i < buttons.length; i += 1) {
  buttons[i].addEventListner('click', function() {
    buttons[i].className = buttons[i].className + " button-on";
  })
}

IE 8 이하에서는 addEventListener 를 지원하지 않고 attachEvent 로 지원하기 때문에 해당 코드에 대한 예외 처리를 한다고 하면 아래와 같았다. (코드 방식은 다 달라서 딱 이렇게 한다고 표현하기는 어렵고, Prototype 상속 방식으로 구현하기도 했다)

function addEvent(target, eventName, func) {
  if(target.addEventListener) {
    target.addEventListener(eventName, func);
  } else if(target.attachEvent) {
    target.attachEvent("on" + eventName, func);
  }
}var buttons = document.getElementsByClassName('button');for(var i = 0; i < buttons.length; i += 1) {
  addEvent(buttons[i], 'click', function() {
    buttons[i].className = buttons[i].className + " button-on";
  })
}

jQuery는 DOM 트리를 쉽게 탐색하고, 이벤트를 더 편리하게 삽입하는 데에 초점을 맞춘 라이브러리다. 위에서 저렇게 열심히 작성한 코드를 jQuery에서는 한 줄로 끝낼 수 있다.

$(".button").on("click", function() {$(this).addClass("button-on")})

사실 이게 jQuery가 인기 있던 이유다. jQuery를 바탕으로 하여 많은 프레임워크 / 라이브러리들이 다시 탄생했고, 그런 도구 중 하나인 Bootstrap은 지금에 이르러서도 많이 사용되고 있다.

jQuery의 인기는 필연적이다.

지금은 어떠한가?

지금은 DOM에 직접 접근해서 제어하는 방식을 취하지 않는다. 정확히는 개발자가 DOM에 직접 접근하지 않는다.

React의 JSX 문법이 DOM에 접근하는 것처럼 보일 수는 있지만, 실제로 DOM에 접근하는 모든 영역은 React가 스스로 처리하지, 내가 제어하는 영역은 React Element 객체다. 해당 객체에서 State가 바뀌면 React에서 해당 객체와 연결되어 있는 DOM을 re-rendering 시키는 방식이지, 내가 DOM을 직접 컨트롤하지 않는다.

jQuery와 React의 차이는 접근 방식의 차이지, 어떤 게 낫다 그르다라고 판단할 문제는 아니다. 다만 jQuery는 이제 너무 오래되었고, React는 그나마 새로운 것일 뿐이다.

더 본질에 집중하자면 우리가 가지고 있는 문제는 무엇이고, 어떻게 해결해야하는가에 집중해야지 어떤 도구를 사용하느냐에 집중할 문제는 아니라고 생각한다. 여러 접근 방식 중 현재 제품에 가장 효율적인 걸 사용해야하지, 반드시 React여서는 안되고, 반드시 jQuery여서도 안된다.

때로 사람들은 ‘이게 무조건 좋아’ 라는 식으로 이야기하는 경우가 있는데, 그런 접근 방식이 별로 도움이 되지 않는다는 건 이제 모두가 알 거라 생각한다.

앞으로는 어떻게 될까?

현대 프런트엔드 개발자들은 과거에 비하면 해야할 일이 많아졌다. 전통적인 백엔드 개발자들이 하던 업무 중 일부를 프런트엔드 개발 영역으로 가져왔고, 그로 인해 프런트엔드 개발 자체 복잡도가 높아졌기 때문이다.

다만 프런트엔드 자체로서 우리는 얼마나 발전을 이루고 있는가? 에서는 물음표를 표할 수 밖에 없다. 모두가 JavaScript라는 언어 자체와 React 같은 도구에 초점을 맞추고 있을 때 Browser API, HTML, CSS는 지속적으로 발전하고 있다.

우리는 어떤 문제를 해결하고자 하고 있는가?

나는 이 질문을 보내고 싶다. 우리가 해결하고자 하는 문제는 무엇인가? 우리가 해결하고자 했던 문제는 무엇인가?

React의 탄생은 웹 애플리케이션 내에서 렌더의 효과적인 제어를 위해, jQuery의 탄생은 DOM으로 인해 발생하는 여러 문제를 해결하기 위해, 그렇다면 지금 우리는 무엇에 집중해야할까?

나는 이 결론이 언젠가는 사용성 고도화라고 생각하고, 콘텐츠 전달 방식의 강화가 곧 웹의 발전이라고 생각한다.

우리가 처음 프런트엔드에 백엔드를 가져왔을 때, AJAX가 주는 이점은 사용자가 ‘새로고침을 하지 않아도 된다’ 였다. 실시간성을 보장하고, 새로고침을 하지 않아도 된다는 게 중요했다.

지금 우리는 어떤 문제에 초점을 맞추고, 어떤 문제를 해결하고 있을까? 그 문제를 해결하려면 어떤 지식을 알아야할까? 앞으로의 교육은 여기에 포커싱해야한다 생각한다.

결론

너무 오래 글을 쓰고 있노라니 글이 산으로 가는 경향을 보여서 요약한다.

무얼 배워도 상관 없지만 현재는 React가 유행이다.
하지만 앞으로는 어떻게 될 지 모르겠다.
그러니 도구를 배우지 말고 구조를 이해해라.

이 글은 언젠가 트위터와 페이스북에도 작성했던 내용이니,
도움이 되리라 생각하며 마무리한다.