탭

<div class="tab-wrapper">
* {
const tabWrapper = $('.tab-wrapper');
// 모든 탭 래퍼 선택


탭 기능 리팩토링
// 모든 탭 래퍼에 탭 기능 적용
const tabWrappers = document.querySelectorAll('.tab-wrapper');

tabWrappers.forEach(wrapper => {
  const links = wrapper.querySelectorAll('.tab-menu a');
  const contents = wrapper.querySelectorAll('.tab-content > div');

  // 각 링크에 클릭 이벤트 추가
  links.forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();

      // 모든 active 제거
      links.forEach(l => l.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // 클릭한 링크와 해당 콘텐츠에 active 추가
      link.classList.add('active');
      const target = document.querySelector(link.getAttribute('href'));
      target.classList.add('active');
    });
  });
});

이벤트 위임으로 더 간단하게
// 이벤트 위임 방식
document.querySelectorAll('.tab-wrapper').forEach(wrapper => {
  wrapper.addEventListener('click', e => {
    const link = e.target.closest('.tab-menu a');
    if (!link) return;

    e.preventDefault();

    // active 토글
    wrapper.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
    link.classList.add('active');
    document.querySelector(link.getAttribute('href')).classList.add('active');
  });
});

이벤트 위임의 장점

성능: 이벤트 리스너 수 감소
동적 요소: 나중에 추가된 요소도 작동
메모리: 메모리 사용량 감소