CeeVizor | Notion

🔎 프로젝트 개요 (Project Overview)

프로젝트명: "CeeVizor: 코드 실행 흐름과 메모리 구조를 시각화 하는 도구"
목적: 프로그래밍 학습자가 메모리 구조와 실행 흐름을 시각적으로 이해하도록 지원
특징: 단순 출력이 아닌 실행 중 메모리 변화를 단계별로 확인

🔥 주요 기능 (Key Features)

C 코드 실행 및 시각화 (추후 Python, Java 등 언어 확장 예정)
Tree-sitter 기반 정적 분석으로 변수/함수 파싱
GCC + GDB 기반 코드 흐름 동적 추적 (실행 흐름, 스택 프레임, 힙 할당/해제)
Stack / Heap / Data 메모리 단계별 갱신 후 시각화
React UI + D3.js 인터랙티브 시각화

🛠 시스템 아키텍처 (System Architecture)

[React Frontend]  ◀──▶  [FastAPI Backend]
        │                    │
        │    POST /compile   ├─ GCC 컴파일 / 실행
        │                    ├─ GDB 실행 추적(타임라인)
        │                    └─ Tree-sitter 정적 분석
        ▼
[메모리 변화 JSON]  →  시각화(Render)

🛠 기술 스택 (Tech Stack)

분류	내용
환경	Windows 11, WSL (Ubuntu 24.04.3 LTS)
개발 언어	Python (3.12.3), JavaScript
주요 라이브러리	React, FastAPI, D3.js
도구 및 시스템	GCC, GDB, Tree-Sitter, Docker, Npm
버전 관리	Git, GitHub

⚙️ 설치 및 실행 (Windows)

🔽 Windows 설치 가이드

⚙️ 설치 및 실행 (Ubuntu)

🔽 Ubuntu 설치 가이드

👨‍💻 팀 (Team Members)