Kanary

Projects | | Links: Frontend Repo | Team Repo | Demo

Kanary

쿠버네티스 클러스터의 리소스 정보를 직관적으로 시각화하여 클러스터 상태를 한눈에 파악할 수 있는 대시보드

1. Overview

Kanary는 쿠버네티스 클러스터의 리소스 정보를 직관적으로 시각화하여 클러스터 상태를 한눈에 파악할 수 있도록 돕는 대시보드입니다.


Kanary Architecture

Kanary Architecture Diagram


2. Role & Responsibilities

Frontend 개발

  • 프로젝트 전체 기여도 40%
  • 쿠버네티스 클러스터 대시보드 전체 UI/UX 설계 및 개발
  • 리소스(파드, 노드, 볼륨 등)를 테이블 형태로 클러스터 상태 시각화
  • react-force-graph를 활용하여 각 파드의 CPU와 MEM 사용률을 물병에 물이 찬 형태로 시각화해 직관성 극대화
  • Axios를 통한 REST API 연동 및 데이터 관리
  • 팀 프로젝트 결과물 발표 및 데모 시연


3. Problem Statement

초기 구현한 대시보드에서는 다음과 같은 문제가 있었습니다.

각 리소스(Pods, Nodes, Volumes 등)마다 개별 페이지로 구성되었으며, 페이지 이동 시마다 매번 새로운 API 호출이 발생하였습니다.

API 호출에서 DOM 렌더링 완료까지 평균 약 4초가 소요되어 사용자 경험(UX)이 저하되었습니다.

4. Methods

페이지 렌더링 속도 개선

성능 개선을 위해 React-Query 라이브러리의 useQuery 훅을 도입하였습니다.

React-Query의 useQuery를 사용하여 동일 데이터 요청의 캐싱 및 자동 갱신을 지원했습니다.

페이지 재방문 시 API 재호출 없이 캐시된 데이터를 즉시 활용하여 렌더링 속도를 대폭 개선하였습니다.

구분적용 전적용 후
렌더링 속도약 4초즉시(0.3초 이하)

결과적으로 사용자 경험이 크게 향상되었으며, 반복적인 API 요청 감소로 서버의 부하도 줄어들었습니다.

Used Skills

  • JavaScript
  • HTML5 / CSS3
  • React
  • Kubernetes
  • Axios
  • React-force-graph
  • React-Query