네트워크 요청 (AJAX)

JSON 데이터 가져오기

jQuery의 $.getJSON 기능을 순수 자바스크립트로 구현하는 방법입니다.

// jQuery
$.getJSON('/api/data', function(response) {
  console.log(response);
});

// Vanilla JS (IE10+)
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status >= 200 && this.status < 400) {
    const resData = JSON.parse(this.response);
    console.log(resData);
  }
};
xhr.send();

POST 요청 보내기

서버로 데이터를 전송할 때 $.ajax 대신 사용할 수 있는 코드입니다.

// jQuery
$.ajax({
  type: 'POST',
  url: '/api/submit',
  data: payload
});

// Vanilla JS (IE8+)
const netRequest = new XMLHttpRequest();
netRequest.open('POST', '/api/submit', true);
netRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
netRequest.send(payload);

DOM 요소 제어 및 조작

클래스(Class) 관리

요소의 클래스를 추가하거나 제거하는 작업은 최신 브라우저에서 매우 간단해졌습니다.

// 클래스 추가
// jQuery: $(node).addClass('active');
if (node.classList) {
  node.classList.add('active');
} else {
  node.className += ' active';
}

// 클래스 제거
// jQuery: $(node).removeClass('active');
if (node.classList) {
  node.classList.remove('active');
} else {
  node.className = node.className.replace(new RegExp('(^|\\b)' + 'active'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

// 클래스 존재 여부 확인
// jQuery: $(node).hasClass('active');
node.classList.contains('active');

요소 삽입 및 이동

특정 요소 전후에 콘텐츠를 추가하거나 자식 요소를 관리하는 방법입니다.

// 뒤에 삽입 (After)
// jQuery: $(node).after('<p>Hello</p>');
node.insertAdjacentHTML('afterend', '<p>Hello</p>');

// 자식으로 추가 (Append)
// jQuery: $(parent).append(child);
parent.appendChild(child);

// 앞에 추가 (Prepend)
// jQuery: $(parent).prepend(child);
parent.insertBefore(child, parent.firstChild);

요소 탐색 (Traversing)

부모, 자식, 형제 노드를 찾는 네이티브 속성입니다.

// 자식 노드 찾기
// jQuery: $(node).children();
const children = node.children;

// 부모 노드 찾기
// jQuery: $(node).parent();
const parentNode = node.parentNode;

// 다음 형제 요소 찾기
// jQuery: $(node).next();
const nextEl = node.nextElementSibling;

// 이전 형제 요소 찾기
// jQuery: $(node).prev();
const prevEl = node.previousElementSibling;

이벤트 처리

이벤트 바인딩 및 해제

이벤트 리스너를 관리하는 표준 방식입니다.

// 이벤트 연결 (On)
// jQuery: $(node).on('click', handler);
node.addEventListener('click', handler);

// 이벤트 해제 (Off)
// jQuery: $(node).off('click', handler);
node.removeEventListener('click', handler);

// 문서 로드 완료 (Ready)
// jQuery: $(document).ready(function() { ... });
document.addEventListener('DOMContentLoaded', function() {
  // 실행 코드
});

유틸리티 함수

배열 및 객체 반복

jQuery의 $.each를 대체하는 표준 문법입니다.

// 배열 반복
// jQuery: $.each(items, function(i, item) { ... });
items.forEach((item, index) => {
  // 로직 수행
});

// DOM 요소 컬렉션 반복
const elements = document.querySelectorAll('.target');
Array.prototype.forEach.call(elements, (el, i) => {
  // 로직 수행
});

기타 유틸리티

문자열 정제, 배열 확인 등의 기능들입니다.

// 공백 제거 (Trim)
// jQuery: $.trim(text);
text.trim();

// 배열 여부 확인 (Is Array)
// jQuery: $.isArray(obj);
Array.isArray(obj);

// 현재 시간 (Now)
// jQuery: $.now();
Date.now();

// 객체 확장 (Extend - Shallow)
// jQuery: $.extend({}, objA, objB);
const merged = Object.assign({}, objA, objB);

시각적 효과

표시 및 숨기기

애니메이션 없이 요소를 즉시 제어할 때 사용합니다.

// 숨기기 (Hide)
// jQuery: $(node).hide();
node.style.display = 'none';

// 보이기 (Show)
// jQuery: $(node).show();
node.style.display = '';

페이드 인 (Fade In)

현대적인 방식은 CSS Transition을 활용하는 것이지만, 자바스크립트로 구현할 경우 다음과 같은 로직을 사용합니다.

function triggerFadeIn(element) {
  let opacityValue = 0;
  element.style.opacity = 0;
  
  let startTime = null;
  const duration = 400;

  function animationStep(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = timestamp - startTime;
    element.style.opacity = Math.min(progress / duration, 1);
    
    if (progress < duration) {
      window.requestAnimationFrame(animationStep);
    }
  }
  window.requestAnimationFrame(animationStep);
}