이 블로그 웹 기능 정리

// data.js
// 블로그의 카테고리와 게시글 목록을 관리함
// categoryMap에는 카테고리 이름을 넣고,
// posts 배열에는 실제 글의 제목, 요약, 파일명, 태그를 넣음

const categoryMap = {
    'CPP': { name: 'C / C++' },
    'CS': { name: 'Computer Science' },
    'WEB': { name: 'Web' },
    'NTT': { name: 'Nand2Tetris' }
};

const posts = [
    {
        id: 110001,
        category: 'WEB',
        date: '2026-05-20',
        title: '블로그 웹 기능 정리',
        summary: '현재 블로그가 글을 불러오고 보여주는 방식',
        fileName: 'WEBBlogFeature.md',
        tags: ['Web', 'Blog']
    }
];

// app.js
// hash route를 사용하여 화면을 바꿈
// 예시:
// #home              : 홈 화면
// #category/WEB/1    : WEB 카테고리 1페이지
// #post/110001       : 특정 게시글

function router() {
    const hash = location.hash || '#home';

    if (hash === '#home') {
        renderHome();
    } else if (hash.startsWith('#category/')) {
        renderCategory(hash);
    } else if (hash.startsWith('#post/')) {
        renderPost(hash);
    }
}

// 게시글 로딩 방식
// posts 배열에서 fileName을 찾고,
// posts 폴더 안의 Markdown 파일을 fetch로 가져와서 화면에 출력함

fetch(`posts/${post.fileName}`)
    .then(response => response.text())
    .then(markdown => {
        document.querySelector('#content').innerHTML = marked.parse(markdown);
    });

<!-- 글 작성 방식 -->
<!-- 1. posts 폴더에 Markdown 파일을 만든다 -->
<!-- 2. data.js의 posts 배열에 글 정보를 추가한다 -->
<!-- 3. category, tags 값으로 카테고리와 태그 필터가 자동으로 작동한다 -->

# 제목

본문을 Markdown으로 작성한다.

```cpp
// 코드 블록도 사용 가능
int main() {
    return 0;
}
```