모니터링 대시보드
Node.js JavaScript Vue.js Express

연구실에서 진행한 연구 과제에서 물리 머신과 가상 머신의 상태를 모니터링하는 웹 기반 대시보드를 개발했습니다. 서버는 Express 프레임워크로 개발하였고 MySQL 데이터베이스에 업데이트되는 실시간 머신 정보를 WebSocket으로 연결된 클라이언트에 전송합니다. 머신의 실시간 모니터링 정보를 요약해서 Card 형태로 보여주는 컴포넌트는 Vue.js로 구현하였습니다. 상단 테두리의 색을 통해 머신의 상태를 나타내며, 정보가 업데이트될 때마다 머신의 이름 옆 도트를 깜빡여 연결 상태를 확인할 수 있도록 했습니다.