동적 카테고리 시스템 구현하기 2

Tools github-blog
#jekyll #github_pages #study-bloging

1부에서 Jekyll과 Liquid로 카테고리 시스템의 HTML 구조를 만들었습니다. 이번에는 JavaScript를 사용해서 사용자가 실제로 클릭하고 상호작용할 수 있는 동적 기능을 구현해보겠습니다.

DOM과 이벤트 리스너 기초

먼저 DOM(Document Object Model)에 대해 간단히 알아보겠습니다. DOM은 웹페이지의 HTML 구조를 JavaScript에서 조작할 수 있게 해주는 인터페이스입니다.

DOM 선택자 활용하기

// HTML이 이렇게 있다면
// <div class="subcategory-card" data-subcategory="genai-llm">
//     <h3 class="subcat-title">GenAI&LLM</h3>
// </div>

// JavaScript에서 이렇게 접근할 수 있어요
const card = document.querySelector(".subcategory-card");
console.log(card.dataset.subcategory); // "genai-llm"
console.log(card.querySelector(".subcat-title").textContent); // "GenAI&LLM"

이벤트 리스너 등록하기

카테고리 시스템에 필요한 이벤트 리스너들을 등록해보겠습니다:

// categories.html 하단에 추가
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 필요한 DOM 요소들 선택
    const categoryItems = document.querySelectorAll('.category-item');
    const postsContainers = document.querySelectorAll('.posts-container');
    const categoryContent = document.querySelector('.category-content');

    // 카테고리 클릭 이벤트 처리
    categoryItems.forEach(item => {
        item.addEventListener('click', function() {
            const category = this.dataset.category;

            // 모든 카테고리에서 active 클래스 제거
            categoryItems.forEach(cat => cat.classList.remove('active'));

            // 클릭된 카테고리에 active 클래스 추가
            this.classList.add('active');

            // 해당 카테고리의 컨텐츠 표시
            showCategoryContent(category);
        });
    });

    // 서브카테고리 클릭 이벤트 처리
    function setupSubcategoryEvents() {
        const subcategoryCards = document.querySelectorAll('.subcategory-card');

        subcategoryCards.forEach(card => {
            card.addEventListener('click', function() {
                const subcategory = this.dataset.subcategory;
                showPostsBySubcategory(subcategory);
            });
        });
    }

    // 카테고리 컨텐츠 표시 함수
    function showCategoryContent(category) {
        postsContainers.forEach(container => {
            if (container.dataset.category === category) {
                container.style.display = 'block';

                // 애니메이션 효과
                container.style.opacity = '0';
                setTimeout(() => {
                    container.style.opacity = '1';
                }, 50);
            } else {
                container.style.display = 'none';
            }
        });

        // 서브카테고리 이벤트 재설정
        setupSubcategoryEvents();
    }

    // 서브카테고리별 포스트 표시 함수
    function showPostsBySubcategory(subcategory) {
        const allPosts = document.querySelectorAll('.post-item');

        allPosts.forEach(post => {
            if (post.dataset.subcategory === subcategory) {
                post.style.display = 'block';
                post.classList.add('fade-in');
            } else {
                post.style.display = 'none';
                post.classList.remove('fade-in');
            }
        });
    }

    // 초기 로드 시 첫 번째 카테고리 활성화
    if (categoryItems.length > 0) {
        categoryItems[0].click();
    }
});
</script>

이벤트 리스너란? 웹페이지에서 사용자의 동작(이벤트)을 감지하고 반응하는 자바스크립트 함수입니다.

주요 이벤트 종류로는

  • click: 마우스 클릭
  • input: 입력 필드에 텍스트 입력
  • keydown: 키보드 누름
  • scroll: 스크롤
  • load: 페이지 로딩 완료

이벤트가 일어나면 어떤 동작을 할지 이렇게 하면 설정할 수 있습니다. 물론 매우 초보적인 내용이기 때문에 원하는 기능이 있다면 더 공부해야겠죠! 그치만 이 블로그에서 제가 하고싶은 동적 카테고리 시스템은 이 정도 입니다. 이제 사용자는 (제가 또 고장내지만 않는다면 … )카테고리를 클릭해서 전환할 수 있습니다.