jQuery 에서 Vanilla JavaScript 로 마이그레이션 하기

콘텐츠

jQuery 에서 Vanilla JS 로의 마이그레이션

jQuery 코드를 Vanilla JS 로 마이그레이션을 해야하는 이유는 jQuery 에서 벗어나기 시작한 새 시대의 웹 개발 글 에서도 가볍게 다뤄 본 적이 있다. 여러 이유가 있겠지만, JavaScript 기반의 새로운 라이브러리를 사용 할 때도 그렇고 jQuery 문법이 아닌 JavaScript 문법을 알고 있는 것이 유리하다 생각한다.

물론, 실제 웹 개발 시 둘을 혼용한다고 해서 아주 큰 문제가 생기진 않는다. 그럼에도 큰 기업일 수록 체계화 된 개발 방법론, 솔루션, 최신 라이브러리 사용을 지양하고 자신의 발전을 위해서도 과거의 기술이 아닌 최신 기술을 익히려는 목적 의식은 중요하다.

그렇지만 현실적으로 jQuery 기반으로 짜여진 소스 코드를 전부 JavaScript 로 하나하나 보면서 변경 하는 것은 생각 외로 공수가 들어가는 작업이다. 그래서 이번 글에선 어떻게 하면 jQuery 소스 코드를 그나마 손쉽게 JavaScript 로 변형 할 수 있을까에 대해 고민하고 이를 정리해보고자 한다.

jQuery 기본 문법에 대응하는 JavaScript

먼저 이를 수행해 주는 다른 방법을 사용하기 전에 jQuery 에서 사용 중인 기본적인 코드를 JavaScript 로 어떻게 구현할 수 있는지 부터 정리해 보려 한다.

그 이유는 변환 된 코드가 정상적으로 동작하지 않을 때 직접 변환도 할 줄 알아야 하고 이를 공부하면 jQuery, JavaScript 양쪽 모두의 기초가 더 늘어나게 될 것이라는 긍정적인 생각을 하였다.

1. 선택자 (Selectors)

jQuery:
- $(‘#element’)
자바스크립트:
- document.getElementById(‘element’)
- document.querySelector(‘#element’)

2. 클래스 추가 및 제거 (Add/Remove Classes)

jQuery:
- $(‘.element’).addClass(‘my-class’),
- $(‘.element’).removeClass(‘my-class’)
자바스크립트:
- document.querySelector(‘.element’).classList.add(‘my-class’)
- document.querySelector(‘.element’).classList.remove(‘my-class’)

3. 이벤트 핸들링 (Event Handling)

jQuery:
- $(document).on(‘click’, ‘.element’, function() {})
자바스크립트:
- document.addEventListener(‘click’, function(event) { if (event.target.matches(‘.element’)) {} })

4. AJAX 요청 (AJAX Requests)

jQuery:
- $.ajax({ url: “test.html”, success: function(result) {}})
자바스크립트:
- fetch(‘test.html’).then(response => response.text()).then(data => {})

5. DOM 조작 (DOM Manipulation)

jQuery:
- $(‘#element’).html(‘Hello World’)
자바스크립트:
- document.querySelector(‘#element’).innerHTML = ‘Hello World’

6. 애니메이션 (Animations)

jQuery의 애니메이션 메소드는 단순하게 바로 자바스크립트로 대체하는 것은 다소 복잡할 수 있다. 이 경우 JavaScript 만 아니고 CSS 애니메이션이나 requestAnimationFrame 같은 웹 API를 사용할 수 있다.

7. 유틸리티 메소드 (Utility Methods)

jQuery에서 제공하는 유틸리티 메소드들은 JavaScript의 내장 메소드나 다른 작은 라이브러리를 통해 대체할 수 있다.

ChatGPT 활용 하여 변환하기 – ⭐추천

요즘 코딩은 직접 코드를 짜는 것 보다 가장 효율적인 방법이 바로 ChatGPT 와 같은 대화형 AI 챗봇 서비스를 활용 하는 것이다. 내가 원하는 기능을 지닌 코드를 일반 대화문 으로 명령해서 사용해 보면 기초 코드는 사람보다 훨씬 깔끔하게 구현해 준다.

이를 응용해서 현재 내가 jQuery 로 구현 했던 코드를 입력하고 이를 JavaScript 로 변환해 달라 명령해 주면 쉽게 코드를 변환 할 수 있다.

사용해 보면 아주 감탄이 나올 정도의 수준으로 코드 변환 작업을 거의 완벽하게 수행한다.

※ 아래 코드는 ChatGPT 4 (유료 버전) 기준으로 작업을 진행 했다.

jQuery slideDown to JavaScript 변환

먼저 jQuery 코드 중 위에 바로 변환하기 어려웠던 animate 코드를 수정해보고자 한다. 다음 코드는 요소가 아래로 천천히 나타나는 slideDown 메소드를 사용한 코드와 결과다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
  <title>문서 제목</title>
</head>
<body>
<div id="redBox" class="boxs"style="display: none; width: 100px; height: 200px; background-color: red;"></div>
<br/>
<script src="jquery-3.7.1.min.js"></script>
<script>
$("#redBox").slideDown(2000, "linear", function() {
  //애니메이션 후 실행될 코드
});
</script>
</body>
</html>

HTML

출력 결과:

이 코드 중 jQuery 부분을 그대로 복사해 ChatGPT 에게 JavaScript 로 변환해 달라 요청해 보았다. 물어본 문장은 다음과 같다.

Q: $(“#redBox”).slideDown(2000, “linear”, function() { //애니메이션 후 실행될 코드 }); 이를 순수 JavaScript 코드로 변환해줘

그러자 하나의 JavaScript 코드를 알려 주었는데 적용하니 정상적으로 되지 않았다. 그래서 다음을 더 추가로 물어 보았다.

Q: <div id=”redBox” class=”boxs” style=”display: none; width: 100px; height: 200px; background-color: red;”></div> 예를 위의 코드에 적용하려면 어떻게 해야될까?

그래서 답변으로 나온 코드를 복붙하고 실행하니 정상적으로 코드가 동작했다. 최종적으로 작성된 코드는 다음과 같다.

변환 코드(JavaScript):

<!DOCTYPE html>
<html>
<head>
  <title>문서 제목</title>
</head>
<body>
<div id="redBox" class="boxs"style="display: none; width: 100px; background-color: red;"></div>
<br/>
<script>
// 요소 선택
var redBox = document.getElementById('redBox');

// 슬라이드 다운 함수
function slideDown(element, duration) {
  // 요소가 이미 보이는 상태라면 함수를 종료
  if (element.style.display !== 'none') return;

  element.style.removeProperty('display'); // display 속성을 제거하여 CSS에서 정의된 기본값(또는 이전 값)으로 돌아감
  var display = window.getComputedStyle(element).display;

  if (display === 'none') display = 'block';

  element.style.display = display;
  element.style.height = '0px'; // 높이를 0으로 설정하여 시작
  element.style.overflow = 'hidden'; // 높이 변경 중 내용이 보이지 않도록 설정
  element.style.transition = `height ${duration}ms linear`; // 트랜지션 설정

  // 브라우저에게 다음 화면 갱신을 위해 함수를 예약
  requestAnimationFrame(function() {
    element.style.height = '200px'; // 원래 높이로 변경
  });

  // 애니메이션 종료 후 콜백
  element.addEventListener('transitionend', function() {
    // 애니메이션 후 실행될 코드
    console.log('Slide down animation completed.');
    element.style.removeProperty('overflow'); // overflow 속성을 제거하여 내용이 정상적으로 보이도록 함
  }, {
    once: true // 이벤트 리스너가 한 번만 실행되도록 설정
  });
}

// 슬라이드 다운 애니메이션 실행
slideDown(redBox, 2000);
</script>
</body>
</html>