Act99 기술블로그

먼저, 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..

현재 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 방법을 진행했다. 이 방법은 정말 간단하게 구현이 가능한데, ..

내가 가지고 오는 코인API 데이터에는 이평선에 대한 정보가 없다. 따라서 이평선을 구현하는 함수가 필요하다. Functions 폴더에 ave-cal.ts 파일을 만들어준다. (평균을 구하는 함수) 그리고 다음처럼 구현했다. const aveCal = (close: number[], length: number) => { const cloXArray: [number, number][] = []; const calClo20: number[] = []; for (let i = 0; i a + b) / length ); } for (let..

드디어 이사를 완료했다. Nextjs 로 이사하면서 router를 설정할 필요가 없다는 장점 외에는 아직 큰 장점을 못느끼고 있다. (이제 막 시작하는 단계라 그런 것 같다.) 이사하면서 node version을 v16 으로 해서 Apollo codegen이 작동하지 않았다. 그래서 결국 수작업으로 타입들을 만들어주었다. (추후 해결할 예정) 그리고 결과물은 잘 나오는 것을 확인할 수 있다. 이젠 채팅기능을 구현할 차례이다. 코인차트 볼린저밴드를 구현한 후 바로 진행할 것이다. 채팅기능은 Apollo Client 를 이용해 작업할 예정이다. 따라서 NestJs에서 미리 백엔드 작업을 해야겠다. https://github.com/act99/stock-chat GitHub - act99/stock-chat:..

React를 하면서 항상 Next.js 를 사용해보려고 생각만 했는데 이번에는 실제로 사용해보려고 한다. Next js의 장점은 1. 자동 라우팅 (아주 매력적이다. 편안...) 2. SSR 구현에 용이하며 덕분에 SEO 최적화가 가능하다. (이건 직접 체감하기에는 오래걸릴 것 같다.) https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org 그럼 바로 작..