File
Manager

— Overview

브라우저에서 바로 동작하는 파일 탐색기 + 코드 에디터 데모. JSON으로 정의된 디렉토리 트리를 재귀적으로 렌더링하고, CodeMirror를 통해 HTML·CSS·JS·PHP 등 다국어 구문 강조 편집을 지원한다.

파일 생성·삭제·저장·미리보기와 함께, 실행 가능한 확장자(.php, .sh 등)와 Path traversal·PHP 태그 인젝션을 차단하는 업로드 보안 필터가 내장되어 있다.

— Core Logic

트리 전체를 탐색하는 재귀 헬퍼 두 개(findNode, findParent)가 상태 변이의 핵심이다. 선택·이름 변경·삭제 모두 이 두 함수로 대상 노드를 찾은 뒤 불변 방식으로 트리를 갱신한다.

// 재귀 트리 탐색 — O(n) DFS
function findNode(node, id) {
    if (node.id === id) return node;
    if (node.children) {
        for (const child of node.children) {
            const found = findNode(child, id);
            if (found) return found;
        }
    }
    return null;
}

function findParent(node, id) {
    if (node.children) {
        for (const child of node.children) {
            if (child.id === id) return node;
            const found = findParent(child, id);
            if (found) return found;
        }
    }
    return null;
}

file-manager.js — tree traversal helpers

파일 저장 전, 확장자와 콘텐츠를 두 단계로 검사해 서버 실행 가능한 파일을 차단한다.

// 1단계: 확장자 블랙리스트
const BLOCKED_EXTENSIONS = [
    '.php', '.phtml', '.exe', '.sh',
    '.bash', '.asp', '.aspx', '.jsp',
];

// 2단계: 콘텐츠 패턴 검사
const BLOCKED_PATTERNS = [
    { pattern: /\.\./, desc: 'Path traversal (..)' },
    { pattern: /^\.ht/, desc: '.ht* 서버 설정 파일' },
    { pattern: /<?php/i, desc: 'PHP 태그 인젝션' },
];

file-manager.js — security filter

— How It Works

1. 앱 초기화 시 file-tree-data.js의 JSON 트리를 로드하고 각 노드에 고유 ID를 재귀 할당한다.
2. 트리 패널을 재귀 렌더링한다. 디렉토리 클릭 시 expandedDirs Set을 토글하고 리렌더링한다.
3. 파일 클릭 시 findNode로 노드를 찾고, CodeMirror 인스턴스에 파일 내용과 언어 모드를 주입한다.
4. Save 버튼을 누르면 보안 필터를 통과한 뒤 state.tree의 해당 노드 content를 업데이트한다.
5. Preview 버튼을 누르면 저장된 HTML을 srcdoc로 iframe에 주입해 즉시 렌더링한다.