메인페이지 소켓, 렌더링 최적화등 리팩토링

[kongyb]

요약

• 메인페이지가 먹통이 되는 현상을 방지하기위해 1초주기로 http요청을 보내 데이터를 전달받는 방식을 소켓으로 변경
• 디테일 페이지 실시간 코인가격정보 컴포넌트가 가격이 변경된 코인컴포넌트만 리렌더링이 일어나도록 수정
• 캔들차트에서 거래가 이루어지지 않아 데이터가 없는 분봉에 대해 시간정보가 나타나지 않는 오류 수정
• 실시간 코인 가격 정보 컴포넌트에서 이름명으로 정렬되지 않는 부분에 hover 이벤트 걸려있던 부분 수정

예상 작업 내용 (커밋단위)

• [ ] 메인페이지가 먹통이 되는 현상을 방지하기위해 1초주기로 http요청을 보내 데이터를 전달받는 방식을 소켓으로 변경
• [ ] 디테일 페이지 실시간 코인가격정보 컴포넌트가 가격이 변경된 코인컴포넌트만 리렌더링이 일어나도록 수정
• [ ] 캔들차트에서 거래가 이루어지지 않아 데이터가 없는 분봉에 대해 시간정보가 나타나지 않는 오류 수정

[baldwinIV]

디테일 페이지 실시간 코인가격정보 컴포넌트가 가격이 변경된 코인컴포넌트만 리렌더링이 일어나도록 수정

이거 좀 츄라이 해봤는데 어떤 방식으로 진행하실 예정이신지 궁금합니다.

[kongyb]

디테일 페이지 실시간 코인가격정보 컴포넌트가 가격이 변경된 코인컴포넌트만 리렌더링이 일어나도록 수정

이거 좀 츄라이 해봤는데 어떤 방식으로 진행하실 예정이신지 궁금합니다.

CoinPriceTab컴포넌트에 React의 memo를 적용하여 해결했습니다. RealTimeCoinPrice로 전달되는 props는 여러개의 코인들의 가격정보가 들어있는 CoinPriceObj타입이지만, 각각의 가격정보를 나타내는 컴포넌트(CoinPriceTab)에 전달되는 props는 CoinPrice타입이므로, 1초동안 변경된 이력이 있는 CoinPrice타입의 props가 변경된 코인의 컴포넌트만 리렌더링하도록 할 수 있었습니다.

export interface CoinPrice {
  logo: string
  name_kr: string
  name: string
  price: number
  signed_change_price: number
  signed_change_rate: number
  acc_trade_price_24h: number
}

export interface CoinPriceObj {
  [key: string]: CoinPrice
}

[baldwinIV]

저도 메모 써보려다가 잘 안되서 퇴각했는데, PR이 기다려지네요