Act99 기술블로그

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

결국 웹 소켓 사용하는것은 다음으로 미루기로 했다. (실제 채팅 어플은 웹소켓을 이용하지 않는다고 하고 다른 방법으로 우회할 방법을 찾았다.) 그래서 사용한 방법은 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..

현재 Websocket 사용하는데 apollo client의 websocket 사용이 먹히지 않는다... const wsLink = process.browser ? new WebSocketLink({ uri: "ws://localhost:4000/graphql/subscriptions", options: { reconnect: true, }, }) : null; if (wsLink) { console.log("connected"); } 현재 이 부분에서 계속 에러가 생긴다. 백엔드 문제인지, 프론트쪽 문제인지 아직 정확하진 않으나. 이런 오류가 뜬다. 현재까진 잘 모르겠으나, url을 잘못호출하고 있는건지.. 일단 웹소켓없이 단순 CRUD로 채팅을 구현하려고 한다. ㅠㅠㅠㅠ 오늘 내내 이 작업만 했는데 ..

NestJS 에서 제공하는 WebSocket으로 진행을 하다, WebSocket connection 에러, Cors 에러가 계속 생기고, stackoverflow 를 계속 참조했지만 결국 일시적인 방편일 뿐 언제든지 다시 에러가 생겼다. (가령, 다시 CORS 에러가 뜬다거나 404 Not Found 에러가 갑자기 뜬다던가...) 이 에러로 반나절은 날린 것 같다.... 그래서 조금 안정적인 방향으로 채팅 백엔드를 구현하려고 하다가 다시 NestJS & TypeORM & GraphQL 을 이용하게 되었다. 먼저 Entity 칼럼들을 다 만들어준 후, Mutation 시 필요한 DTO 들을 만들어주었다. 또한, typeorm 을 사용하기 때문에 Query 와 Mutation, Subscription에 필요..

이번에는 채팅기능을 구현하려고 한다. 처음에는 Nestjs 와 Graphql 을 이용해서 CRUD를 만들고 gql 태그를 이용해 Apollo Client로 쿼리를 보내주고 Mutation 을 보내주는 형태로 채팅을 구현하려고 했다. 하지만 보통 실시간 채팅 앱 구현은 Websocket을 이용한다고 해서 채팅구현 로직을 바꾸게 되었다. 두 가지 방법을 모두 써서 괜찮은 것으로 구현하려고 하는데, 첫 번째는 NestJS 자체의 WebSocket을 이용해 실시간 채팅을 구현하는 방법 두 번째는 GraphQL 과 WebSocket을 이용해 채팅을 구현하는 방법 이렇게 두 가지 방법을 사용하려고 한다. 먼저, NestJS의 WebSoketGateway 방법을 진행했다. 이 방법은 정말 간단하게 구현이 가능한데, ..

이번에는 캔들 차트를 만들 차례이다. 기본틀은 거래량 차트 만들기와 같으며, 캔들차트 구현이라는 점에서 다르다. https://bugerstory.tistory.com/32 [React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기 (라이브러리 x) (SVG 연습용) React-Google-Chart 를 사용하던 중, 직접 차트를 만들고 싶은 충동이 생겼다. 먼저 handmade-chart.tsx 를 만들어주고 svg 를 이용해 차트 틀부터 만들어 주었다. (CSS 경우 tailwind를 사용하였다.) - handmade-.. bugerstory.tistory.com 해야 할 일 1. 데이터 불러오기 2. 금액 최소값과 최대값을 구한 후, 7개의 구분선으로 나누기. 3. 시가와 종가 데이터로 바 차트..

저번에 Nestjs 와 postgresql 을 이용해 주식데이터를 localhost:4000 에 띄워놨다. https://bugerstory.tistory.com/28 [Nestjs] CSV 파일을 postgresql 테이블로 옮기고 localhost 에 띄우기 필자는 현재 주식정보를 RestAPI 로 띄운 후, React를 이용해 브라우저 상에서 주식 차트를 구현시키려고 한다. 프론트엔드 공부를 하려했지만, 주식 api를 직접 빌드해서 사용하고 싶었기 때문에 작 bugerstory.tistory.com React 를 이용해 브라우저상에 차트를 띄울 예정이며, 먼저 apollo와 apollo-toolings 를 설치했다. https://github.com/apollographql/apollo-toolin..

필자는 현재 주식정보를 RestAPI 로 띄운 후, React를 이용해 브라우저 상에서 주식 차트를 구현시키려고 한다. 프론트엔드 공부를 하려했지만, 주식 api를 직접 빌드해서 사용하고 싶었기 때문에 작업을 시작했다. DB 관리는 postgresql 로 할 예정이며, Graphql 과 Typeorm, Nestjs 를 이용할 예정이다. (Nestjs를 배울 때 이 방식으로 배웠기 때문이기도 하며, Nestjs Doc을 보면 Typeorm과 Graphql 사용을 권장한다고 적혀있다.) ** postgresql 테이블에 CSV파일을 import 하고 nestjs와 연결하려면 Table을 직접 만드는게 아니라 Nestjs 를 이용해 table을 만들어주어야한다. ** (테이블을 미리 만들어놓고하다가 연동이 안..