플러스프로젝트 배경
1) 문제점 - 실시간 화면은 대부분 "잘 될 때"만 검증하고 끊겼을 때 대응은 뒤로 미룸 - 연결이 끊겨도 마지막 값이 그대로 남아있어 사용자가 실시간인 줄 착각하기 쉬움 - 상태 관리 라이브러리·차트 라이브러리를 그대로 얹으면 번들이 무거워짐 2) 프로젝트 목표 - WebSocket 연결이 끊겨도 상태를 명확히 알리고 자동으로 재연결 - 차트 라이브러리 없이 SVG로 직접 그려 가벼운 실시간
프로젝트 성과
정적 빌드 gzip 66KB
차트 라이브러리와 상태 관리 라이브러리 없이 React + WebSocket만으로 구현해 정적 빌드 결과가 gzip 66KB, API 키 없이도 동작
재연결 지수 백오프
WebSocket 끊김 시 재시도 횟수에 따라 대기 시간을 지수적으로 늘려 서버 재접속 폭주 없이 자동 복구
핵심 기능
SVG 직접 렌더링 차트
차트 라이브러리 없이 SVG path를 직접 계산해 실시간 시세를 그리고, 정적 빌드를 gzip 66KB로 유지
진행 단계
기획 및 요구사항 정의
2026.07.
차트 라이브러리 없이 SVG로 직접 그릴 범위와 WebSocket 재접속 전략(지수 백오프) 범위를 먼저 결정
프로젝트 상세
1) 포트폴리오 소개 WebSocket으로 실시간 데이터를 받아 즉시 다시 그리는 대시보드입니다. 잘 돌아갈 때가 아니라 끊겼을 때를 기준으로 만들었습니다. 2) 작업 범위 기획부터 프론트엔드, UI/UX까지 전 과정을 단독으로 진행했습니다. 3) 주요 업무 - 연결이 끊기면 지수 백오프로 재연결 (대기 상한 15초, 성공 시 카운터 초기화) - 연결 중·실시간·재연결 중 상태를 화면에 그대
