Act99 기술블로그

🎈항해99, 6주간의 실전프로젝트가 막을 내렸습니다. 빠르고 정신없이 지나간 6주였지만 가장 성장할 수 있는 기간이었습니다. 팀원들과 함께 프로젝트를 완성시켰다는 성취감과 아직까지도 여운이 남습니다. 이 여운을 바탕으로 회고록을 작성하려 합니다. 💪프로젝트를 통해 배운 점 1. WebRTC 화상 기능 (SFU 방식 채택) 저희는 WebRTC 서비스를 구현하는데, SFU 방식을 채택했습니다. 그 이유는 처음에는 P2P 방식으로 구현했으나 다대다 통신에서 클라이언트에 부하가 급격하게 오기 때문이었습니다. 또한, P2P Mesh 방식을 사용할 경우, peer 간의 커넥션 절단 시 서버에서 확인하기 어려우며, 클라이언트 환경에 따른 지연 현상이 발생하기 때문에 SFU 방식을 채택하였으며, 이를 극복했습니다. 2..

안녕하세요. 프론트엔드 개발자를 준비중인 이주석입니다. 이번에 "홈트메이트"라는 사이트를 개발해서 소개 차원으로 글을 적게 되었습니다. 저희 사이트는 WebRTC와 웹소켓을 이용해 유저들이 함께 유튜브 영상을 실시간으로 공유하고, 함께 화상으로 운동을 할 수 있는 사이트를 개발했습니다. 동시에 식단을 공유할 수 있는 Story 기능도 있습니다. 기술스택 - 메인 페이지 - 화상 홈트레이닝 페이지 - LiveNow 페이지 - 스토리 페이지 - 캘린더 페이지 저희 서비스의 특징은 아무래도 WebRTC와 WebSocket 을 이용한 실시간 홈트레이닝 서비스인데요, 친구들과 함께 유튜브 노래를 들으며 공부하거나 같이 유튜브 시청이 가능하니 한번 놀러와주세요! https://hometmate.com 홈트메이트 |..

웹소켓이란? 기본적으로 클라이언트와 서버의 관계는 stateless하게 이루어져 있습니다. 즉, 클라이언트에서 Request를 날리면, 서버에서 Response를 하는 과정으로 이루어져 있습니다. 제가 만든 그림....ㅋ.ㅋ 하지만 웹 소켓은 Statefull protocol 입니다. 즉, 요청을 매번 보내는게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술입니다. 웹소켓은 handShake 과정을 통해 Client 와 Server 접속을 유지합니다. 웹소켓이 기존의 일반 TCP소켓과 다른점은 최초접속이 일반 http request를 통해 handshaking 과정을 통해 이루어진다는 점입니다. Client 에서 랜덤하게 생성된 키값을 전송하고, Server는 ..

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

현재 Websocket을 이용한 실시간 채팅 구현중입니다. 방법은 express & socket.io 를 이용해 server를 파서, server to server 형태로 전송해 NextJS 에서 websocket 사용시 발생하는 cors 문제를 해결하려고 하고 있습니다. 테스트 중이며, 잘 구현되면 블로그에 게시하겠습니다. ^^

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

현재 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로 채팅을 구현하려고 한다. ㅠㅠㅠㅠ 오늘 내내 이 작업만 했는데 ..