1. 블로그 만들기 - 폴더 탐색

github page에 블로그 제작을 기획하며 핵심 기능으로 2가지를 생각했다. 그중 하나가 폴더 탐색이다. 폴더 탐색은 폴더에 트리 구조로 작성되는 포스팅들을 하나 씩 탐색하는 것으로 폴더와 파일을 탐색하며 네비게이션 생성과 포스팅 변환 등의 작업을 진행한다.

트리 탐색

• 사실 폴더 탐색이라고 했지만 개념은 자료구조의 기초인 트리 탐색을 활용한 기능이다. 트리 탐색에는 전위, 중위, 후위 순회등 다양한 방법이 있지만 해당 블로그에서는 전위 순회 방식을 사용하여 폴더와 파일을 탐색하며 작업을 진행한다. 전위순회는 부모 노드에서 자식 노드 방향으로 탐색을 진행하는 방식으로 구현방법 재귀 함수로 간편하고 폴더의 구조를 네비게이션 디자인을 구조화 하기에 적합하기에 선택하게 되었다.

코드 분석

• 마크다운으로 작성되어 있는 포스팅 폴더를 root부터 전위 순회 방식으로 탐색하며 포스팅 파일을 찾으면 작업을 시작한다.

const treeTraver = (root) => {
    // root에 있는 폴더와 파일의 리스트
    const node = fs.readdirSync(root)

    // 폴더와 파일 리스트를 순차적으로 확인하며 폴더일 경우와 파일인 경우에 따른 기능 개발
    node.map((v) => {
        const isDir = fs.statSync(`${root}/${v}`).isDirectory()

        if(isDir) {
            // 폴더 인 경우 해당 폴더를 root로 또 다시 내부 아이템 분석
            treeTraver(`${root}/${v}`)
        } else {
            // 파일일 경우 파일 내용 변환 및 네이게이션 작성
            const contents = fs.readFileSync(`${root}/${v}`, 'utf8')

            const naviCode = `<a href="url">${v}</a>`
        }
    })

}

// 포스팅이 작성되어 있는 root 폴더의 경로
treeTraver('/post')

• 사실 코드 자체의 원리는 어렵지 않다. 본 블로그에서는 이 코드를 기반으로 파일의 내용을 변환하고 네비게이션 사이드바를 제작하는 코드를 추가하여 제작되었다. 이 블로그를 제작할때 핵심 테마인 '마크다운으로 작성하고 폴더 구조 기반으로 웹 페이지로의 변환한다.'에 맞춰 폴더를 순회하며 모든 작업을 진행한다.