Act99 기술블로그

프로젝트 완료가 다 되었다. 사용한 기술스택은 다음과 같다. 먼저 결과물부터 보면, 이렇게 상대방과 본인이 실시간으로 채팅이 가능하게 만들었다. 웹 소켓에 대한 이해를 하고 넘어가느라 오래걸렸다. 먼저 참고 영상은 다음과 같다. https://www.youtube.com/watch?v=a_xo-SbIfUQ&t=3197s Websocket과 Express를 이용해 realtime chat을 만드는 영상이며, 많은 영상과 github, medium 들을 찾다가 이 영상이 제일 유익해서 링크를 남겨놓았다. 먼저, 웹소켓이란 서버와 클라이언트 간의 소켓 연결을 유지해 양방향통신과 데이터 전송이 가능하게 만든 기술이며, 서버와 클라이언트 간의 웹소켓 연결은 HTTP 프로토콜로 이루어지지만 정상적으로 연결된다면 웹..

실시간 채팅구현을 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..

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