[항해99 - 11주차] 실전프로젝트 3 (webRTC - openvidu)

⚓ 항해99 - 11주차 회고록 (실전프로젝트 3)

 

intro

어제, 기술 매니저님의 중간 점검이 있었다.

우리 조는 적은 인원인데도 불구하고, 진행속도가 제일 빠르다고 말씀해주셨다. 😎

우리 조 최고!를 외치며 회고록을 시작해본다.

 

start

이번 주는 openvidu를 사용해서 화상채팅 방 구현을 완료했고,

추가로 방 생성, 방 목록, 방 입장 기능까지 구현했다.

서버의 빠른 open과 빠르게 나온 api들 덕분이다! (백엔드님들 최고!)

 

기존 openvidu 코드는 방 목록과 입장해서의 채팅방 페이지가

방에 입장이 됐다를 판단하는 값을 기준으로 UI만 바뀌는 구조였는데

우리 서비스는 [방 생성 페이지 -> 채팅방 페이지] 또는 [방 목록 페이지 -> 채팅방 페이지]

이렇게 페이지가 이동 되어야하는 구조기 때문에 우리 서비스에 맞게 코드를 다시 작성했다. 

 

이 과정에서 [방장 : 방 생성 -> 채팅방 입장] 그리고 [참여자: 방 목록 -> 채팅방 입장]이라는

2개의 방 입장 로직이 필요했기에 어떻게 코드를 짜야 효율적으로 구현할 수 있을까 고민을 했다.

결과는 컴포넌트를 2개로 나눠서 처리했다.

ChatRoom 이라는 공통 모듈에 props를 전달받게 했고,

ChatRoomMaster 와 ChatRoomSubscriber 라는 공통 모듈을 상속받은 컴포넌트 2개를 만들어서

api 응답 값을 각각 전달하고, 방장인지 아닌지 상태에 따라 맞게 작동되는 처리를 했다.

하나의 컴포넌트 안에서 처리하기에는 코드 작성이 어려웠지만

컴포넌트를 분리해서 처리를 했더니 생각보다 쉽게 구현이 됐다.

그리고 컴포넌트 분리의 장점은, 코드가 짧아지다보니 가독성도 좋아진다는 점이다! 🕵️‍♀️

 

이렇게 이번 프로젝트의 서비스 기본 로직은 구현이 됐으니

이제 추가 디자인에 맞는 UI 개발과 화면 캡쳐, 실시간 페이지 검색, 재 정렬,

새로고침 시 webRTC 토큰 재갱신(백엔드와 협업이 필요)등 디테일한 기능 개발을 해야한다.

 

end

아직 프로젝트가 진행 중이지만, 짧은 기간동안 많이 느낀 점은

프론트엔드는 디자이너와 백엔드, 양쪽 모두 소통을 잘 해야한다는 점이다.

즉, 서비스의 프로세스와 UI 그리고 개발까지 잘 알고 있어야 한다.

 

프로젝트 1차 마무리까지 일주일 남았다.

일주일동안 빡세게 개발해서 꼭 예쁘게 완성해보겠다!

 

 

우와! 했던 순간