CryptoFolio 프로젝트 문서

<aside>

CryptoFolio는 업비트 API를 기반으로 실시간 암호화폐 시세, 트렌드 지표, 개인 포트폴리오 관리 기능을 제공하는 웹 서비스입니다.

</aside>

1. 프로젝트 개요

<aside>

목표: 실시간 암호 화폐 시장 정보와 사용자 맞춤형 투자 분석 도구 제공
특징
- Polling 기반으로 API를 주기적으로 호출하여 실시간 데이터 갱신
- 서버 Proxy를 통해 업비트 API를 중계하여 안정적인 데이터 제공
- 용도별로 ApexCharts(캔들) · Chart.js(포트폴리오)를 적용하여 시각화를 효율적으로 구성
- MongoDB 기반 사용자별 거래 데이터 저장 구조 설계
주소
- 배포: https://crypto-folio-harrykim24.vercel.app
https://github.com/HarryKim24/CryptoFolio

</aside>

2. 주요 기능

<aside>

인증/회원 관리: NextAuth.js 기반 로그인·회원가입, 프로필 수정·탈퇴
차트 & 시세 조회: polling 기반 실시간 업비트 시세, 암호화폐 차트
트렌드 분석: 환율·비트코인 추세·급등 코인 랭킹·주요 알트코인 거래량
포트폴리오 관리: 보유 자산 등록·삭제, 수익률 및 비중 계산
UI/UX: Tailwind CSS + Framer Motion + GSAP 애니메이션 </aside>

3. 기술 스택

<aside>

Frontend

Next.js 15(App Router), TypeScript
Tailwind CSS, Framer Motion, GSAP
Chart.js, react-chartjs-2, ApexCharts, react-apexcharts
Zustand

Backend

MongoDB Atlas
NextAuth.js, bcrypt.js
REST API, Axios

OPEN API

freecurrencyapi.com, 업비트 API </aside>

4. 페이지별 기능 상세

<aside>

1. 홈(/)
2. 차트(/chart)
트렌드(/trends)
포트폴리오(/portfolio)
세팅(/settings)
인증(/auth) </aside>

5. 폴더 구조

<aside>

src/
├── api/                    # 업비트 API 호출 함수
├── app/                    # Next.js App Router 디렉토리
│   ├── (auth)/             # 로그인 및 회원가입 페이지
│   ├── (home)/             # 메인 홈페이지
│   ├── api/                # 서버 API 라우트
│   ├── chart/              # 암호화폐 시세 및 차트 페이지
│   ├── portfolio/          # 사용자 포트폴리오 관리 페이지
│   ├── settings/           # 프로필 설정 페이지
│   ├── trends/             # 트렌드 데이터 분석 페이지
│
├── components/             # UI 컴포넌트 모음
├── hooks/                  # 커스텀 훅
├── lib/                    # 서버 비즈니스 로직 및 인프라 유틸
├── providers/              # 전역 Provider 컴포넌트
├── stores/                 # 상태 관리(Zustand) 스토어
├── utils/                  # 클라이언트 유틸 함수 및 데이터 처리
├── types/                  # 타입스크립트 타입 정의

</aside>

6. 데이터베이스 모델링

<aside>


erDiagram
  USERS {
    ObjectId _id PK
    string name
    string email
    string password
    Date createdAt
    Date updatedAt
  }

  ASSETS {
    ObjectId _id PK
    string userEmail FK
    string symbol
    string name
    number quantity
    number averagePrice
    Date date
    string type
    Date createdAt
  }

  USERS ||--o{ ASSETS : owns

</aside>

7. API 설계

<aside>

인증

POST /api/register – 회원가입
POST /api/auth/[...nextauth] – 로그인 및 세션 인증 처리
PATCH /api/settings/update – 프로필 수정 (이름·비밀번호)
DELETE /api/settings/delete – 회원 탈퇴

업비트 Proxy

GET /api/proxy/market – 마켓 목록 조회
GET /api/proxy/ticker – 시세 조회
GET /api/proxy/candles – 캔들(차트) 데이터 조회

포트폴리오

GET /api/asset – 자산 목록 조회
POST /api/asset – 자산 등록
DELETE /api/asset/[id] – 개별 자산 삭제
DELETE /api/asset – 전체 자산 삭제

환율

GET /api/exchange – 환율 조회 </aside>

8. 주요 이슈 & 해결

<aside>

초기 로딩 구간 렌더링 구조로 인한 LCP 저하 문제
브라우저 환경에서의 업비트 API CORS 차단
Vercel 환경에서의 WebSocket 연결 유지 제약 </aside>

9. 성과 & 회고

<aside>

프로젝트를 통해 Next.js App Router 환경에서의 컴포넌트 설계와 데이터 패칭 구조에 대한 이해를 중심으로, 아키텍처 설계와 배포 환경에 대한 경험을 종합적으로 쌓을 수 있었다.

App Router 기반에서 서버·클라이언트 컴포넌트의 역할을 분리하고 렌더링 책임과 데이터 패칭 위치를 명확히 하며, 초기 로딩 구간에서 불필요한 렌더링과 스크립트 실행을 제거해 LCP를 4.1초에서 1.1초로 약 73% 단축시키는 성능 개선을 달성했다. 이와 함께 LCP 이전 메인 스레드 작업을 최소화하여 초기 화면 안정성을 확보했으며, PageSpeed Insights 기준 접근성 및 SEO 점수 100점을 달성해 시맨틱 마크업, 메타데이터 구성, 링크 구조 측면에서도 사용자와 검색엔진 모두를 고려한 UI 품질을 확보했다.

또한 Vercel 서버리스 환경에서 WebSocket 연결 유지가 어렵다는 제약을 인지하고, 1초 주기의 Polling 기반 데이터 갱신 구조를 설계함으로써 실시간에 준하는 시세 갱신과 연결 안정성을 동시에 확보했다. 더불어 외부 API 호출을 서버 프록시로 일원화하여 브라우저 CORS 에러 발생 가능성을 제거하고, 배포 환경 변화에 영향을 받지 않는 안정적인 데이터 흐름을 구성했다.

마지막으로 차트 시각화 과정에서는 Chart.js와 ApexCharts를 비교·적용하며, 단순 통계성 데이터와 금융형 실시간 차트에 적합한 라이브러리를 구분해 선택하는 기준을 정립했다. 전반적으로 이번 프로젝트는 단순 기능 구현을 넘어, 환경 제약과 트레이드오프를 인식하고 그에 맞는 합리적인 기술 선택과 품질 지표 개선을 함께 달성한 경험이었다.

</aside>