jquery를 사용하지 않게 된 이유

[ jQuery ]

jQuery는 JS를 작성하는것은 재밌어야 한다는 모토를 가진 JS 라이브러리

적게 쓰고 많은 일을 하게(write less, do more) 도와주는 JS 라이브러리라고 생각하면 됨

일반적으로 반복적인 작업을 수행하고 불필요한 마크업을 제거, 짧고 이해하기 쉬운 코드를 작성할 수 있게 해줌

 

예를 들어 jQuery가 등장하기 이전에는 XMLHttpRequest를 사용하여 비동기 통신을 처리해야 했음

let xhr = new XMLHttpRequest();
xhr.open('POST', '/test');
xhr.send();
xhr.onload = function () {
  if (xhr.status != 200) {
    console.error(`${xhr.status}: ${xhr.statusText}`);
  } else {
    console.log(xhr.response);
  }
};
xhr.onprogress = function (event) {
  if (event.lengthComputable) {
    console.error(`Received ${event.loaded} of ${event.total} bytes`);
  } else {
    console.error(`Received ${event.loaded} bytes`);
  }
};
xhr.onerror = function () {
  console.error('Request failed');
};

 

하지만 jQuery의 Ajax를 이용하면 코드가 훨씬 간단해짐

$.ajax({
  type: 'post',
  url: '/test',
  async: true,
  headers: {
    'Content-Type': 'application/json',
  },
  dataType: 'text',
  data: JSON.stringify({
    id: id,
    name: name,
  }),
  success: function (result) {
    console.log(result);
  },
  error: function (request, status, error) {
    console.error(error);
  },
});

 

▶ jQuery 특징

• HTML/DOM 조작: HTML 요소를 쉽게 선택하고 조작할 수 있음
• 이벤트 처리: 다양한 이벤트를 간단하게 처리할 수 있음
• 크로스 브라우징: 다양한 브라우저 간 호환성 문제를 해결해 줌
• 애니메이션: 간단한 애니메이션 효과를 쉽게 구현할 수 있음
• 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원
• 플러그인: 플러그인을 쉽게 구현하거나 확장할 수 있음

 

▶ jQuery를 사용하지 않게 된 이유

jQuery는 초기 웹 개발 환경에서 큰 혁신을 가져왔으나, 시간이 지나면서 몇 가지 한계가 드러남

성능 최적화 문제와 유지보수의 어려움이 그 주요 원인

• 성능 문제: jQuery는 Vanilla JS에 비해 로드해야 할 패키지가 많아 간단한 코드를 작성하더라도 성능적으로 떨어짐
• 유지보수 어려움: jQuery는 모듈화나 컴포넌트화와는 거리가 있어 대규모 애플리케이션에서 유지보수하기 쉽지 않음
• 브라우저 성능 저하: 현대의 웹 애플리케이션에서는 사용자에 의한 동적인 DOM 조작이 잦음 jQuery를 이용하면 배치와 화면 표시 과정에서 많은 연산이 발생해 브라우저 성능이 저하되는 문제가 있음

이 외에도

 

웹 표준 API의 확장 : 제이쿼리가 없어도 쉽게 사용 가능해진 웹 api

웹 표준이 개선되어 여러 브라우저는 표준을 지키는 방향으로 나아가고 있음 이런 노력으로 WEB API가 발전하였음

fetch API, DOM API(classList, querySelector, querySelectorAll)와 같은 jQuery의 대체제가 등장함

 

예를 들어 위에 비동기 통신 예시를 fetch를 사용하면 훨씬 간단해짐

fetch('/test', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    id: id,
    name: name,
  }),
})
  .then(response => console.log(response))
  .catch(error => console.error(error));

 

웹브라우저 환경의 변화 : 빨라진 자바스크립트 성능과 브라우저 호환성이 좋아짐

초기 웹 개발에서 jQuery는 다양한 브라우저 간의 호환성 문제를 해결하는데 큰 역활을 했지만 최신 브라우저들은 대부분 ECMScript 표준을 잘 준수하고 있어 이러한 호환성 문제가 크게 감소하게 됨

 

제이쿼리가 본격적으로 인기를 얻기 시작했던 2007~2008년에는 인터넷 익스플로러가 웹브라우저 시장에서 점유율이 가장 높았고, 인터넷 익스플로러는 버전 업데이트 속도가 느리고 데스크톱 기반의 윈도우 운영체제에 주력했다는 특징이 있어 생산성과 가독성이 높은 코드를 작성하기 위해 제이쿼리가 사용되었음

하지만 윈도우, 맥 등 데스크톱 OS와 모바일 OS까지 지원하는 크롬이 등장하며 점유율을 높게 장악했는데 크롬은 빠른 버전 업데이트를 추구하여 웹 표준을 신속하게 반영함

 

가상 돔을 사용하는 라이브러리의 등장 : 성능적으로 개선된 방법인 가상돔을 사용하는 라이브러리

React와 같은 라이브러리는 가상 DOM을 사용하여 웹 애플리케이션의 성능을 크게 향상시켰음

가상 DOM은 실제 DOM 조작을 최소화하여 애플리케이션의 성능을 높이며, jQuery가 제공하지 못하는 선언적이고 모듈화된 프로그래밍 패러다임을 제공함 이를 통해 개발자는 더 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있음

 

▶ React와 jQuery  비교

React와 jQuery의 가장 중요한 차이는 가상돔 사용과 컴포넌트 기반 아키텍처

 

DOM 컨트롤

React는 가상 DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상시킴

jQuery는 우선 최초로 DOM 을 찾으려면 document 에서부터 쭉 타고 내려오면서 찾아야함

이렇게 되면 원하는 태그를 찾을 때까지 최상단 엘리먼트에서 트리 탐색을하며 내려오니까 더 많은 검색이 발생함

실제 DOM을 직접 조작하므로 더 많은 DOM 조작이 필요한 등의 성능 저하가 발생함

 

예를들어 document.getElementById('myDiv')로 간단하게 찾는 한줄코딩이라면, jQuery는 수없이 많이 랩핑된 소스에서 $('#myDiv')을 찾게 됨으로써 불필요한 리소스로 인한 동작의 저하가 발생 할 수 있음

 

컴포넌트 기반 아키텍처

React는 컴포넌트를 사용하여 UI를 작성하고 관리하며, 각 컴포넌트는 독립적으로 작동하며 재사용 가능함

이를 통해 코드 모듈화와 유지 보수를 용이하게 함

jQuery는 이러한 컴포넌트 기반 아키텍처를 제공하지 않으며, 코드는 주로 이벤트 핸들러와 DOM 조작 함수로 이루어져 있음 따라서 모든 로직이 한 곳에 집중되어 있어 코드가 길어지고 유지보수하기 어려움

 

😉🤔

처음에는 단순히 jQuery가 무엇인지, 왜 요즘에는 덜 사용되는지를 알고 싶었지만, 실제로 조사해보니 웹 개발 환경의 변화와 기술 발전이 얼마나 빠르고 다채롭게 이루어지고 있는지를 알게 됨

 

jQuery는 처음에는 웹 개발에 혁신을 가져온 도구였음 단순하고 직관적인 API로 복잡한 DOM 조작을 쉽게 만들고, 다양한 브라우저 간의 호환성 문제를 해결해주었기 때문 하지만 웹 표준 API의 발전과 브라우저 성능의 향상, 그리고 React와 같은 가상 DOM을 사용하는 라이브러리의 등장은 jQuery를 뒤편으로 보내버림

 

React의 컴포넌트 기반 아키텍처와 가상 DOM의 도입은 코드의 재사용성과 유지보수성을 크게 향상시켰음 이러한 기술적 발전은 단순히 새로운 도구를 사용하는 것을 넘어, 전체적인 개발 패러다임의 변화를 가져옴 예를 들어, React의 컴포넌트 기반 구조는 대규모 애플리케이션에서도 코드의 모듈화와 재사용을 용이하게 하고, 선언적 프로그래밍 스타일은 상태 관리와 UI 갱신을 더욱 직관적으로 만들어 줌

 

결국, 기술은 끊임없이 발전하고 변화함 jQuery가 혁신적이었던 시절이 있었듯이, 현재는 React와 같은 가상 돔을 사용하는 라이브러리가 그 자리를 차지하고 있음 이러한 변화 속에서 중요한 것은 트렌드를 새롭게 갱신하고 새로운 기술을 배우고 적응하며, 이를 통해 더욱 효율적이고 생산적인 개발을 할 수 있는 능력이 필요하다는 것을 다시 한번 느낌 앞으로도 계속해서 변화하는 웹 개발 환경을 주시하며, 최신 기술을 습득하고 적용할 수 있도록 노력해야 겠음