EZBIT

스마트한 가상화폐 모의투자 서비스

Light & Freely & Easy라는 컨셉을 가진 EZBIT입니다.
누구나 가볍게 이용하는 모의투자를 경험하세요!
30,000,000원의 시드머니를 가지고 시작할 수 있습니다.
투자 타이밍 잡기 연습, 파일럿이 만들어주는 포트폴리오 경험 등 다양한 투자를 시도해보면서 당신의 투자 감각을 올려보세요😊

📋 목차

• 🗓️ 개발 기간
• 👤 체험 계정
• 🎧 앱 다운로드 및 실행
• 🛠 개발 환경
• ✨ 주요 기능
• 📁 프로젝트 구조
• 🏗️ 시스템 설계
• 🤺 스킬 포커스
• ⚡ 성능 최적화
• 📈 회고

🗓️ 개발 기간

2025.07.01 ~ 2025.07.25

👤 체험 계정

Email, PW

• test123@example.com
• 123567as#

접속 링크

https://www.ezbit.vercel.app

🎧 앱 다운로드 및 실행

Repository Clone

git clone https://github.com/window-ook/EZBIT.git

프론트엔드 앱 실행

cd frontend
pnpm install
pnpm dev

백엔드 앱 실행

cd backend
npm install
npm run dev

🛠 개발 환경

Front-End

Back-End

Open API

CI/CD

✨ 주요 기능

📈 실시간 거래소

업비트 WebSocket으로 실시간 현재가, 호가, 체결 내역 데이터를 제공합니다.
Highcharts의 캔들스틱 차트로 다양한 분봉 차트를 제공합니다.
사용자는 시장가로만 즉시 매수와 매도 주문할 수 있습니다.

🚀 포트폴리오 파일럿

세팅된 옵션 중 선택해서, 자신이 보유한 원화 이내에 원하는 금액만큼 포트폴리오를 만들어드립니다.
각 옵션은 총 5개의 코인으로 20%씩 비중을 갖습니다.

• 라이징 스타: 실시간 TOP 5
• 베스트 셀러: 24시간 거래대금이 가장 높은 코인 TOP 5
• 자이언트: 시가총액 TOP 5

📰 트렌드 뉴스 제공

달러, 엔, 위안, 유로 환율 정보와 TOKEN POST의 시황, 글로벌 토픽 기사를 제공합니다.
그리고 유튜브에서 핫한 비트코인 관련 영상을 클릭하면 유튜브로 이동하여 시청할 수 있습니다.

💰 보유 자산 대시보드

현재가 기준 실시간 평가손익, 수익률, 도넛 차트 기반 보기 쉬운 매수 비중 정보를 제공합니다.
그리고 종목별 상세 정보를 테이블에서 확인할 수 있습니다.

📁 프로젝트 구조

아키텍처 다이어그램

디렉토리 구조: Feature Based

backend/
├── server.js            # Express.js + Socket.IO 서버
└── ...

🖥️ frontend
├── actions/              # Server Actions (Next.js 15)
│
├── components/
│   ├── exchange          # 거래소
│   ├── my-assets         # 보유 자산
│   ├── shadcn-ui         # shadcn/ui 컴포넌트
│   └── ...
│
├── hooks                 # 커스텀 훅
│   ├── socket            # WebSocket 통신
│   ├── supabase          # Supabase CRUD 서버 액션 사용, 인증 관련
│   ├── trends            # 트렌드 페이지 데이터
│   └── upbit             # Upbit REST API 조회 서버 액션 사용
│
└── ...

백엔드와 프론트엔드는 독립적인 멀티레포로 격리했습니다. 상호 의존성이 없고, 백엔드는 가벼운 BFF이기 때문이죠.
프론트엔드의 디렉토리는 모두 역할 기반으로 분류되어 있습니다.
이 방식은 컴포넌트나 훅, 함수, 타입 등 어떤 파일이든지 위치가 직관적이기 때문에
안정성과 확장성 면에서 매우 유리하고, EZBIT 규모의 서비스에 적합한 구조라고 생각했습니다.

🏗️ 시스템 설계

Supabase 스키마(PostgreSQL)

-- 사용자 정보
users {
  user_id: UUID PRIMARY KEY
  holding_krw: NUMERIC DEFAULT 30000000
  total_invested: NUMERIC DEFAULT 0
  nickname: STRING
}

-- 보유 종목
holdings {
  user_id: UUID FOREIGN KEY
  market: STRING
  total_bid_volume: NUMERIC
  total_bid_amount: NUMERIC
  avg_bid_price: NUMERIC
}

-- 거래 내역
history {
  id: UUID PRIMARY KEY
  user_id: UUID FOREIGN KEY
  market: STRING
  order_type: BID | ASK
  volume: NUMERIC
  trade_price: NUMERIC
  total_amount: NUMERIC
}

총 3개의 테이블로 구성했습니다.
모든 테이블은 RLS(Row Level Security) 정책을 적용하여, 모든 CRUD에 대한 외부의 비인가 요청을 방어합니다.

비동기 데이터 플로우

DB 조회, 업비트 API 리퀘스트

컴포넌트 ↔ useQuery 커스텀 훅 ↔ 서버 액션 ↔ Supabase
컴포넌트 ↔ useQuery 커스텀 훅 ↔ 라우트 핸들러 ↔ Upbit API

Websocket 통신

컴포넌트 ↔ useSocket 커스텀 훅 ↔ Express.js 백엔드 ↔ Upbit Websocket

DB 생성/삭제/업데이트, 인증 관련

컴포넌트 ↔ useMutation 커스텀 훅 ↔ 서버 액션 ↔ Supabase

🤺 스킬 포커스

ErrorBoundary를 이용한 선언적 에러 처리

@frontend/app/exchange/page.tsx

<section className="flex flex-col md:flex-row justify-center gap-2">
  {/* 오더북 테이블 */}
  <ErrorBoundaryWrapper
    featureName="오더북 테이블"
    message="오더북 테이블 로딩 중 문제가 발생했습니다."
  >
    <Suspense fallback={<LoadingSpinner size="2xl" />}>
      <OrderbookTable />
    </Suspense>
  </ErrorBoundaryWrapper>

  {/* 주문하기 폼 */}
  <ErrorBoundaryWrapper
    featureName="주문하기 폼"
    message="주문하기 폼 로딩 중 문제가 발생했습니다."
  >
    <Suspense fallback={<LoadingSpinner size="2xl" />}>
      <UserDataPrefetcher>
        <OrderForm />
      </UserDataPrefetcher>
    </Suspense>
  </ErrorBoundaryWrapper>
</section>

`ErrorBoundaryWrapper`는 에러가 터진 기능과, 맞춤 메세지를 나타내는 커스텀 Wrapper Component입니다.
선언형 프로그래밍을 사용하여 프로젝트 전체에 일관된 에러 UI를 제공하기 위해 구현했습니다.
그리고 Suspense를 사용하여 로딩 상태 처리도 선언형 프로그래밍 방식으로 구현했습니다.

zod를 활용한 유효성 검사

@frontend/schema/**

/** 닉네임 변경 폼 유효성 검증 */
export const changeNickNameSchema = z.object({
  nickname: z
    .string()
    .min(1, '닉네임은 1자 이상이어야 합니다.')
    .max(20, '닉네임은 20자 이하여야 합니다.')
    .regex(/^[a-zA-Z0-9가-힣]+$/, '특수문자는 사용할 수 없습니다.')
    .refine(
      async (data) => {
        const supabase = createBrowserSupabaseClient();
        const { data: existingNickname } = await supabase
          .from('users')
          .select('nickname')
          .eq('nickname', data)
          .single();
        return existingNickname === null;
      },
      {
        message: '이미 존재하는 닉네임입니다.',
        path: ['nickname'],
      }
    )
    .refine((data) => data.trim() !== '', {
      message: '닉네임은 비어있을 수 없습니다.',
      path: ['nickname'],
    }),
});

/** 매수 주문 유효성 검증 */
export const bidSchema = z.object({
  price: z
    .number({ invalid_type_error: '매수 가격은 숫자여야 합니다.' })
    .min(0, { message: '매수 가격은 0 이상이어야 합니다.' }),
  quantity: z
    .number({ invalid_type_error: '주문수량은 숫자여야 합니다.' })
    .min(0, { message: '주문수량은 0 이상이어야 합니다.' }),
  total: z
    .number({ invalid_type_error: '주문총액은 숫자여야 합니다.' })
    .min(5000, { message: '최소 5,000원 이상이어야 합니다.' }),
});

/** 매도 주문 유효성 검증 */
export const askSchema = z.object({
  price: z
    .number({ invalid_type_error: '매도 가격은 숫자여야 합니다.' })
    .min(0, { message: '매도 가격은 0 이상이어야 합니다.' }),
  quantity: z
    .number({ invalid_type_error: '주문수량은 숫자여야 합니다.' })
    .min(0, { message: '주문수량은 0 이상이어야 합니다.' }),
  total: z.number({ invalid_type_error: '주문총액은 숫자여야 합니다.' }),
});

...

zod의 메서드 체이닝으로 직관적이고 효율적인 유효성 검증 로직을 구현했습니다.
React Hook Form의 useForm과 함께 조합하여 폼의 상태 관리와 유효성 검증, 에러 핸들링까지 담당합니다.

최적화된 웹소켓 데이터 페칭과 클라이언트 상태 동기화

EZBIT의 BFF로서, Express.js 기반의 Socket.IO 프록시 서버를 구현했습니다.

• 3계층 캐싱: ticker, orderbook, trade 데이터 Map 구조 캐싱
• 스마트 구독: 클라이언트별 선택적 마켓 구독/해제
• 자동 재연결: 최대 5회 재시도, 고정 5초 지연
• 중복 방지: sequential_id 기준 중복 체크
• 순서 보장: timestamp 기반 데이터 순서 유지
• 타입별 분리: ticker, orderbook, trade 이벤트 독립 처리
• 메모리 최적화: 순환 버퍼로 trade 데이터 50개 제한
• 스로틀링: 100ms 단위 업데이트 제한으로 성능 향상
• Connection Pool: 클라이언트 수에 따른 지능형 연결 관리
• Graceful Shutdown: SIGTERM/SIGINT 신호 처리로 안전한 종료

그리고 받아온 데이터를 TickerProvider 내부에서 메모이제이션을 통해 최적화된 상태로 관리합니다.

• TickerProvider: 코인 한국명, 선택한 코인, 모든 코인의 실시간 현재가 등 상태 공유
  • useMemo로 contextValue 최적화하여 불필요한 리렌더링 방지
  • useCallback 참조 동일성 체크로 setState 최적화
  • 마켓 선택 시 초기 오더북/체결내역 데이터 병렬 페칭

데이터 캐싱과 서버 상태 관리

React Query로 클라이언트에서 외부 API와 Supabase DB에서 페칭하는 데이터는 캐싱하여 관리했습니다.

• 캐싱 전략: 글로벌 QueryClient로 기본 옵션 설정
• 프리페칭: prefetchQuery, dehydrate, HydrationBoundary를 통해 SSR 데이터 프리페칭
• 상태 동기화 및 낙관적 업데이트: useMutation으로 이루어지는 매수/매도 주문 즉시 UI 반영

⚡ 성능 최적화

React 렌더링 최적화

• 컴포넌트 메모이제이션: React.memo
• 계산 최적화: useMemo
• 이벤트 핸들러 최적화: useCallback

폰트 로딩 최적화

• next/font/local 사용: Pretendard Variable + NEXON Gothic 3종 (Light/Regular/Bold)
• Display Swap: 폰트 로딩 중 시스템 폰트로 대체하여 FOUT 방지(시스템 폰트가 Fallback)
• Preload: 중요 폰트 우선 로딩으로 CLS 최소화

번들 최적화

• dynamic import: 당장 보이지 않는 컴포넌트는 ssr: false와 함께 레이지 로드

이미지 최적화

• 캐싱과 저용량 확장자CDN 업로드, .avif 파일 사용

실시간 데이터 최적화

• 중복 업데이트 방지: timestamp + 값 비교
• 메모리 효율적 구독: Set 자료구조 활용

const currentMarkets = new Set(markets.map((m) => m.market));

• 순환 버퍼: Trade 데이터 최대 50개 유지 (MAX_TRADES_COUNT = 50)

캐싱 전략

• TanStack Query: API 응답 캐싱, 프리 페칭
• WebSocket 데이터: 백엔드 Map으로 프리캐싱

📑 회고

새로운 시도 & 새롭게 알게 된 것

새로운 시도

선언형 프로그래밍
웹소켓 BFF 구축과 클라이언트 통신 최적화

새롭게 알게 된 것

• WebSocket 연결 관리의 복잡성
  • 클라이언트 수에 따른 연결 풀 관리, 중복 방지, 순서 보장, 메모리 최적화 등 실시간 통신에서 고려해야 할 요소들이 생각보다 많았습니다.
• Context API의 최적화 포인트
  • useMemo와 useCallback을 활용한 Provider 최적화가 대규모 실시간 데이터 업데이트에서 얼마나 중요한지 알게 되었습니다.
• BFF 패턴의 실용성
  • 단순히 API 프록시를 넘어서 데이터 가공, 캐싱, 연결 관리까지 담당하는 BFF의 역할이 실시간 서비스에서 필수적임을 깨달았습니다.