프론트엔드 개발 포트폴리오 | 게임 실시간 화상채팅 서비스

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘Steam Plus’를 소개합니다.

Sep 04, 2023

Contents

사용기술	기술 설명
recoil	리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다.
socket.io	Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합니다.
WebRTC	WebRTC는 브라우저에서 P2P(peer-to-peer) 통신을 가능하게 하는 기술입니다. 이 기술은 별도 플러그인 없 브라우저 내장 기능으로 제공되며, 브라우저 간에 영상 및 음성 데이터를 실시간으로 전송할 수 있습니다.
json-server, glitch	db.json 파일을 사용하면 데이터베이스 서버를 구축하지 않아도 되고 Glitch에서는 개발자가 손쉽게 프로젝트를 공유하고, 팀원과 함께 작업할 수 있기 때문에 개발 프로세스가 편리해집니다.

WebRTC n 대 n 실시간 화상채팅 관련

❓문제파악

문제원인 소캣 io 와 webrtc 로 화상통화를 할 때 로컬환경에서는 문제가 없으나 배포시 간헐적으로 연결이 되지 않는 이슈.

❗원인분석

서버 상황에 따라 Caller가 일부 ICECandidate를 Offer보다 먼저 발송하게됨.

✔️문제해결

아이스 캔디데이트를 받는 소캣 on 부분에 setTimeout으로 지연시간을 주어 해결.

친구 기능 관련 랜더링 문제

❓문제파악

친구요청과 같은관련 이벤트시 발신, 수신자의 랜더가 바로 일어나지 않음

❗원인분석

쿼리가 남아있어서 이벤트가 일어나기 전 데이터가 남아있음.

✔️문제해결

sender : useMutation안의 onSuccess에 refetchQueries혹은 invalidateQueries를 사용

caller : socket.io를 사용해 이벤트를 클릭하면 해당 친구 아이디로 상대 클라이언트 소캣을 추적하여 랜더가 일어나게 함.

이름	담당
고현석	socket.io 백앤드 서버 구축,실시간 팀 텍스트, 화상채팅기능. 방생성, 설정기능, 메인페이지 활성화된 채널 기능
신정근	메뉴기능, 친구 요청,수락, 거절,삭제, 유저 검색, 실시간 1대1 채팅 socket.io, 커뮤니티 댓글CRUD,컨텍스트메뉴
손유진	부디자이너, 검색기능, 랜딩페이지
차상현	미드필더, 커뮤니티 게시글 CRUD, 스팀로그인
이채은	디자이너