Claude Visualizer

완료·2025-03·backend

Node.jsExpressWebSocketHTML/JS

Overview

코드 프로젝트의 파일/폴더 구조를 실시간으로 스캔하고, 인터랙티브한 웹 인터페이스에서 탐색할 수 있는 시각화 도구입니다. Express 서버가 파일 시스템을 감시하고, WebSocket으로 브라우저에 실시간 변경사항을 전달합니다.

01실시간 파일 스캔: Node.js fs 모듈로 프로젝트 디렉토리 재귀 탐색

02WebSocket 양방향 통신: 파일 변경 감지 → 브라우저에 즉시 업데이트 전달

03인터랙티브 UI: 트리 구조 탐색, 파일 선택, 스프라이트 기반 아이콘

04포트 9000: Express 서버 + WebSocket 서버 단일 프로세스

Problem

대용량 프로젝트(node_modules 등)를 스캔하면 서버가 멈추는 문제

Solution

.gitignore 패턴을 파싱하여 불필요한 디렉토리를 스킵하고, 파일 탐색을 비동기 스트림으로 처리하여 논블로킹 스캔 구현