프론트엔드에 실시간 가격을 표시하기전에 프론트엔드에서도 정리하고 추가 해야 할 내용이 있습니다. Hook이란 개념인데 쉽게 프론트엔드에서 백엔드에 요청하는 api모음으라고 생각하면 됩니다.
이전 실습들에서 차트와 테이블에 api를 요청해 데이터를 표시 했습니다. 여기에 비효율적인 부분이 있는데 같은 /api/v1/assets/ohlcv/{asset_id}요청인데 컴포넌트마다 매번 부르고 있습니다. 만약 v1이 v2로 변경되는 작업이 있다면 모든 파일을 찾아 변경해야 됩니다.
그래서 보통 frontend/src/hooks에 자주사용하는 api를 모아 놓습니다. 지금만들어 놓은 api사용 컴포넌트들의 훅을 정리하고 웹소켓 훅도 추가 하겠습니다.
Hook 이란?
Hook(훅)의 정의는“함수형 컴포넌트에서 React의 상태(State)와 생명주기(Lifecycle) 기능을 연동(Hooking)할 수 있게 해주는 API”라고 하는 어려운 정의가 있습니다. 이해할 필요가 없습니다.
다만 몇가지 기능이 있습니다.
하나, 관심사의 분리 (Separation of Concerns)
Hook을 사용하면 데이터 수집, 소켓 연결 등을 UI 의 차트표시 같은 코드로부터 완벽하게 격리하여 독립적으로 관리할 수 있습니다.
둘, 상태 로직의 재사용성 (Stateful Logic Reusability)
Hook은 계층 구조의 변화 없이 상태로 코드를 함수 단위로 추출하여 다른 컴포넌트에서 그대로 재사용할 수 있게 합니다.
섹, 클라이언트 사이드 추상화 (Client-side Abstraction)
추상화는 어려운 말인데 일종의 가상의 공간에 우리가 요구하는 api가 있다고 생각하면 되며 이는 코드의 결합도(Coupling)를 낮추고 응집도(Cohesion)를 높입니다.
넷, 선언적 데이터 흐름 (Declarative Data Flow)
Hook을 사용하면 “데이터를 어떻게(How) 가져올 것인가”가 아니라 “데이터가 무엇(What)인가”에 집중하게 됩니다.
🤖 실전! 컴포넌트 API 훅(Hooks) 사용 (2-15)
🧠 이번 실습의 목적
기존 차트컴포넌트와 테이블 컴포넌트의 백엔드 엔드포인트 요청을 개별 컴포넌트가 아닌 frontend/src/hooks에 만들어서 종합적으로 관리하는 과정입니다.
✨ 사용자의 의도(Vibe)
기존 frontend/src/components/charts/highchart나 frontend/src/components/tables에 있는 컴포넌트의 엔드포인트 요청을 훅(frontend/src/hooks)을 사용하는 것으로 변경하는 TODO를 만들고 실행해줘
- Assets : frontend/src/hooks/useAssets.ts
- Stocks : frontend/src/hooks/Stocks.ts
- Coins : frontend/src/hooks/Coins.ts
- 완료후 테스트
💻 AI가 생성한 코드 (Syntax)
- frontend/src/hooks/useAssets.ts, Stocks.ts, Coins.ts
- docker compose up -d –build frontend 후
- http://localhost:3000/assets-list, http://localhost:3000/line-chart 등 에서 확인합니다.
🤖 실전! 프론트엔드 실시간 가격 표시 (2-16)
🧠 이번 실습의 목적
자산 가격의 실시간 수집 후 방송되는 내용을 프론트엔드 Assets List에 표시 하는 과정입니다.
✨ 사용자의 의도(Vibe)
백엔드 컨슈머에서 수집된 자산의 실시간 가격을 프론트엔드의 AssetsList.tsx에 표시하는데 훅을 사용해서 표시하게 해줘
- websocket hook: frontend/src/hooks/useSocket.js
- 완료후 테스트
💻 AI가 생성한 코드 (Syntax)
- frontend/src/hooks/useSocket.ts
import { useState, useEffect, useRef } from 'react';// WebSocket 연결 상태를 관리하는 커스텀 훅export
function useSocket(url: string) { 생략 // 언마운트 시 연결 해제
return () => { if (socketRef.current) { socketRef.current.close(); } clearTimeout(reconnectTimeout); }; }, [url]);
return { lastMessage, isConnected };}
- 저는 backend/app/services/websocket/worker.py 라는 파일이 만들어 졌습니다.
- 실전 2-14에서 관리 코드를 작성할때 임시저장소에 기록하는 로직을 정확하게 포함하라는 지시를 하지 않아서 새로 생성합니다. 더 좋은 모델은 자동으로 만들었을수 있습니다.
- Assets List 에서 실시간으로 가격이 변동 되는지 확인합니다. (핀허브는 미국 주식 개장시간에 확인하세요!)
