INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
프론트엔드
INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
두줄요약
Vue.js SSR과 Canvas API로 INVESTING.COM 클론 코딩 파일럿 프로젝트를 진행한 경험을 정리했습니다. 실시간 시세, 차트, 검색, 댓글 기능과 함께 협업 방식과 기술적 고민을 공유했습니다.
핵심 내용
- INVESTING.COM 금융 서비스 클론 코딩 파일럿 프로젝트의 전반적 구현 경험 공유
- Vue.js SSR, Canvas API, TypeScript, SASS, 모노레포, OAuth 2.0, JWT, MongoDB 기반의 프론트엔드·백엔드 구조 소개
- 실시간 시세, 차트, 검색, 댓글, 즐겨찾기, 다크모드 등 주요 기능과 협업 방식 정리
구조와 흐름
- 프로젝트 개요와 기술적·기능적 요구사항 정의
- 공통 기능과 개별 기능으로 업무 분담 후 구현
- 프로젝트 구조, 기술적 고민, 회고 순으로 정리
선택 이유
- 금융 데이터와 차트 중심 서비스 구현을 통해 실무 적응에 필요한 도메인·기술 습득 목적
- 모노레포와 공통 패키지로 협업 및 코드 재사용성 강화
- SSR과 Canvas 기반 차트로 성능과 구현 경험을 함께 확보
성능/운영 포인트
- 초기 렌더링 SSR, 이후 CSR 전환으로 성능 최적화
- Long Polling, SSE 등 실시간성 확보 방식 검토와 적용
- 비동기 로딩·에러·빈 상태 처리로 사용자 경험 보완