Act99 기술블로그

이번의 결과물은 이렇다. 이번에는 코인 거래량 대비 최고, 최저 / 전일대비 최고 상승, 하락률 정보 카드를 만들 것이다. 먼저, 거래량 데이터는 적게는 수백만 많게는 수십억 단위이기 때문에 단위 변경이 필요하다. ES2020 부터는 number 값을 원하는대로 변경시켜주는 (가령, 거리단위, 화폐단위 등등 나라별도 가능) 기능이 생겼다. 바로 Intl.NumberFormat 이다. 사용법은 단순하다. const MilBilCal = (value: number) => { let formatter = Intl.NumberFormat("en", { notation: "compact" }); return formatter.format(value); }; export default MilBilCal; "en" ..

이번에는 주식사이트의 홈 화면을 구현하려고 한다. 대부분 코인거래소 홈 화면은 코인들의 표가 나타난다. (현재가, 상승 하락률 저가, 고가 등등) 이번에 데이터를 가져올 사이트는 코인랭킹 이라는 사이트이며, RTK(Redux toolkit) 을 이용해 가져올 것이다. 먼저 결과물부터 게시하면, 이런식으로 구현을 했다. 구현을 위한 코드는 아래와 같다. RTK Service 코드는 다음과 같이 구성했다. const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": process.env.NEXT_PUBLIC_CRYPTO_API_KEY, }; const baseUrl = "https://coinrank..

반응형 웹사이트 구현을 위해 useWindowSize라는 hooks를 만들어 구현했지만, 콘솔창에 이런 에러가 발생했다. 그래서 디테일하게 찾아보니 분석을 해보니 width 와 height params 문제이며, useWindowSize 를 이용했을 때 너비와 높이의 initialValue가 NaN으로 잡혔다가 refresh가 되면서 value가 생성된다. 하지만 차트를 구성하는 svg 는 width, height에 반응하기 때문에 변경하기 어렵다. 따라 이 한줄로 일단 에러를 멈출 순 있었다. let SVG_CHART_WIDTH = typeof width === "number" ? (width > 768 ? 768 : width * 1) : 0; 에러는 멈췄지만 refresh를 계속하면 콘솔에 에러가 ..

실시간 채팅구현을 Apollo client useQuery 를 이용해 만들 방법을 생각하다가 apollo client docs 에서 polling 과 refetch 개념을 찾았다. https://www.apollographql.com/docs/react/data/queries/ Queries Fetch data with the useQuery hook www.apollographql.com polling의 경우 타이머 설정 후 타이머 설정 시간마다 실시간으로 refetch를 해주는 기능으로, 쉽게 말해 settimeout 같은 느낌으로 데이터 refetch를 시켜준다. 코드는 다음과 같다. const { data } = useQuery(GET_CHAT, { variables: {}, pollInterva..

저번주 토요일? 부터 지금까지 아폴로 클라이언트 웹 소켓(using GraphQL) 문제가 풀리지 않고 있다. github 커뮤니티나 stackoverflow 에서는 Nextjs SSR 과정에서 발생하는 문제라고 하는 등 다양한 의견이 나오고 있는데, 무슨 짓을 해도 문제가 풀리지 않고 있다. 일단 다음단계로 넘어가고 차근차근 문제를 알아봐야겠다. Error: Unable to find native implementation, or alternative implementation for WebSocket! 문제

실시간 db 구축 및 연동을 위해선 websocket이 무조건적으로 필요하게 되었다. 여기서 나는 다시 한번 느낀 바가 있다. 바로 RTFM(Read the fuxx'in Manual) 바로 RTFM 을 해야한다는 것... 메뉴얼과 Docs만 잘 읽어도 어느정도 문제를 풀 수 있음에도 항상 스쳐 지나가듯이 읽는 내 자신을 반성했다. 하지만 아직 해결된 것이 아니다. NextJs Websocket 설정상에서 오류가 발생한다. (docs 그대로 설정해도 오류가 생기고, stackoverflow에서도 같은 문제가 발생한다고 한다. React와 달리 NextJs 에서는 Websocket 문제가 자주 발생한다고 하는데 아직 원인은 모르겠다. 따라서 백엔드 구성만 여기에 적어놓을 것이다.) 그럼 왜 백엔드 쪽에서 ..

먼저, Graphql Query문을 만들어주었다. (localhost/xxxx/graphql 에서 쿼리상태 확인 가능) const GET_CHAT = gql` query frontChatQuery { chats { createdAt updatedAt user text } } `; 다음 query 변수의 타입들을 설정해주었다. (apollo codegen 사용하면 편리.) export interface frontChatQuery_Chat { __typename: "Chat"; createdAt: Date | undefined; updatedAt: Date | undefined; user: string; text: string; } export interface frontChatQuery { chat: fr..

결국 웹 소켓 사용하는것은 다음으로 미루기로 했다. (실제 채팅 어플은 웹소켓을 이용하지 않는다고 하고 다른 방법으로 우회할 방법을 찾았다.) 그래서 사용한 방법은 Subscription이 아닌, Query & Mutation 으로만 구현한 것이다. 먼저 Mutation 타입들을 만들어주었다. - frontChatMutation.ts export interface CreateChatDto { user: string; text: string; } export interface frontCreateChatMutation_createChat { __typename: "CreateChatDtoOutput"; ok: boolean; error: string | null; } export interface fron..