visualize-js-async : Node.js 비동기 흐름 시각화 서비스

2025학년도 1학기 경희대학교 소프트웨어융합캡스톤디자인 프로젝트 입니다.

🚀 프로젝트 소개

visulaze-js-async 는 VS Code 개발 환경에서 Node.js 비동기 실행 흐름을 시각화해서 보여주는 Visual Studio Code Extension 입니다.

• JavaScript 비동기 흐름을 시각화해주는 기존 서비스로 JavaScript Visualizer 9000 과 같은 웹 서비스는 존재하지만 VS Code 개발 환경 내에서 바로 실행해볼 수 있는 서비스가 없었습니다.
• visaulize-js-async 는 VS Code 개발 환경 내에서 간단하게 extension을 실행시키고 Node.js의 비동기 흐름을 시각화해서 보여줍니다.

✨ 주요 기능

코드 분석

• VS Code Command Palette (Ctrl + Shift + p) 에서 visualize-js-async 명령어를 통해 extension을 실행시킬 수 있습니다.

  

• 코드 분석 버튼을 클릭하면 extension이 사용자의 현재 코드를 분석하여 비동기 흐름 단계들을 생성합니다.

  

비동기 흐름 시각화

• 재생 버튼을 누르면 비동기 흐름을 애니메이션 형태로 보여줍니다.

  

• 다음-> 버튼을 누르면 순차적으로 실행하면서 비동기 흐름을 파악할 수 있습니다.

  

⚒️ 개발 환경

• Node.js (22.13.0)
• TypeScript (5.8.3)
• Visual Studio Code API (1.75.0)

⚙ 아키텍처 설계

📺 데모 영상

• Demo Video: https://youtu.be/i71Jtg79N5E