이번주엔 정말 많은 기능을 구현해낸것 같다.
예상했던것과 같이 정말 많은 어려움이 있었다. 화면단에 본인얼굴만뜨고 서로 공유가 되지않았던점, subscraber,publisher 구분이 안돼어 상대에게 현재 내 캠 상태가 공유 되지않았던점, audio 제어시 발생하는 하울링 문제 등 정말 많은 문제가 발생하여 코드분석을 다시하는 시간을 가지기도 하였다.
우리조는 webRTC가 가장 큰 첼린지라 생각하여 CRUD는 일단 뒤로 미루고 다같이 webRTC를 먼저 팠던것 같다. 역시 집단지성은 최고다. 어려움이 생길때마다 다같이 달려들어 같이 고민하니 혼자할때보다 훨신빠르게 문제가 해결되었던것 같다.
가장 어려웠던점은 subscraber,publisher를 나누는 작업이었던것 같다.
모두가 subscraber가 되고 모두가 publisher가 된다... 이말이 정말 너무너무너무 헷갈리고 어려웠다.
내가 이해했던대로 정리해보자면 다음과 같다.
publisher
미디어 권한을 가진 사용자 즉, 나자신
subscraber
구독자, 내가 아닌 다른사람
이 두개를 어떻게 나눌수있을지 정말 많은 고민을했고, 튜도리얼과, 다른프로젝트에서했던 코드들을 꼼꼼히 분석하며 정말 눈이빠지도록 공부를 했던것같다.
sendSignalUserVideo(video) {
const data = {
Svideo: video,
nickname: this.state.myUserName + "OV",
};
const signalOptions = {
data: JSON.stringify(data),
type: "userChanged",
};
this.state.session.signal(signalOptions);
}
{subscribers.map((sub, i) => (
<VideoWrap>
<Video
streamManager={sub}
key={i + JSON.parse(sub.stream.connection.data).clientData}
session={session}
username={userList[i]?.user.username}
ws={ws}
/>
</VideoWrap>
))}
위의 코드로 subscraber,publisher를 구분해냈다.
streamManager에 subscraber를 선언하여 props하였고 subscraber에만 key값으로
JSON.parse 값을 실어 보냈고, publisher에는 streamManager에 publisher만 선언하였다.
<MyVideo
streamManager={publisher}
OV={OV}
nickname={nickname}
session={session}
roomTitle={roomTitle}
myName={myName}
/>
이렇게 subscraber,publisher를 나누는데 성공하여, 화면단에 따로 뿌리는 작업하고 배포하여 조원들과 배포한 사이트에서 화상통신을 성공하였다.
이때 정말 얼마나 소리를 질렀는지...그렇게 또 세상 기쁠수가 있을까??? 저때를 생각하면 아직도 그 기쁨이 생생히 기억나는것 같다.
아직 세부적인 기능을 좀더 손봐야하지만 mvp완성까지 시간이 얼마 남지않았기에, 우선은 채팅기능을 먼저 구현하기로 하였다.
우리조는 처음에는 openvidu에서 채팅기능도 제공을 해서 websocket을 이용하지않고 openvidu로 모두 구현하려 했지만, mvp이후 추가적으로 구현할 친구초대, 강퇴기능 등 멀리봤을때 websocket을 사용하는것이 좀더 활용성이 있을것같아 openvidu가 아닌 stomp와 sockjs를 이용하여 실시간 채팅을 구현하기로 하였다.
실시간 채팅은 클론코딩 주차에 슬랙 클론코딩을 하면서 한번 다뤄봤기에 큰 어려움이 없을것으로 생각했었지만 역시, 뜻대도 한번에 되는것은 없다^^
어느정도 알고있다고 생각했던 웹소켓이었는데... 막상 연결해보니 연결이 잘 끊어지지않고, 이방저방 다들어가도 똑같은 메세지가 보이는 문제가 발생하였다.
생각을해보니 클린코딩주차때 disconnect를 제대로 구현하지 않았고, 채팅방을 나누는작업을 제대로 하지않았던것 이었다.
그래서 websocket 또한 또하나의 첼린지가 되어 조원들과 함께 문제를 풀어나갔던것 같다.
가장 어려움을 격엇던건 채팅방내용이 사라지지않고, 모든 룸에 입장할때마다 이전반에서 나눴던 대화내용이 따라오는것이었다.
처음에는 이 오류가 disconnect가 제대로 이루어지지않아서 생기는 문제라고 생각했다.
그래서 disconnect를 useEffect 선언하여 페이지를 벗어날때 disconnect가 실행되도록 코드를 작성했다. 하지만 계속해서 해당문제가 발생하였다.
원래라면 대화내용을 db에 저장해 해당 roomid의 대화내용을 db에서 불러오는방식으로 되어야하는데 우리서비스는 방에 인원수가 0명이되면 자동으로 폭파되도록 설계되어있어 대화내용을 저장하지않아 불러올수가 없는 구조였다.
그래서 우리는 대화내용을 초기화시켜버리는 방법을 택했다
React.useEffect(() => {
dispatch(chatActions.clearChat())
created();
return () => {
onbeforeunload();
};
}, []);
const clearChat = createAction(CLEAR_CHAT, (chat) => ({ chat }));
[CLEAR_CHAT] : (state, action) => produce(state, (draft) => { draft.list =[]}),
위의 코드와 같이 방에 입장할때마다 dispatch를해서 이전대화내용을 초기화 시키는 방법으로 해당문제를 해결할수있었고 무사히 mvp구현을 할수있었다.
요즘 시간이 너무 빨리간다. 코드짜는데 집중하다 정신차려보면 어느순간 밤이되어있고, 새벽까지 하는건 거의 Default값인것 같은 요즘이다.
6주동안 어떻게 잘해낼수있을까? 걱정했던게 우스울정도로 정말정신없이 지나가는것같다.
아침 9시 부터 새벽 3~4시까지하는데도 아직 나의 실력은 많이 부족하고 그래서 시간이 더더욱 부족한것같다.
정말 살면서 이렇게까지 열심히 잠안자고 공부를 해본적은 처음인것같다. 다행인건 이렇게 잠을줄여가며 공부를 해도 힘든마음보단 즐겁고 재밌는 마음이 큰것같다.
막힐때는 물론 답답하기도하고 때론 짜증도 나지만 막혔던문제를 풀어버리면 거기서오는 희열감을 말로 표현할수가 없는것같다. 정말 행복하다.
그리고 또하나, 내가 지금까지의 많은 어려움들 속에서 지치지않고 즐겁게 해결해나갈수있었던 것은 우리조원들 덕분인것도 있다.
처음에 실전프로젝트 참여할때 조원들간의 불화로인해 와해되어 하차하는 팀도 많다고 들었고, 실제로 현재 우리조를 제외한 다른조들은 벌써 다투기도하고, 하차하는사람 또한 발생하였다.
그래서 정말 걱정을 많이했는데 다행히 우리조는 모두가 항상 밝은에너지로 처음과 같은 맘으로 서로 존중하며 니일내일 따지지않고 나서서 행동하여서 그런지 정말 서로가 서로에게 힘이되어주는 존재가 되어가고있다.
이번 조원들과 함께하면서 많이 느끼는것은 '너' 부터가 아닌 '나' 부터 행동하면 서로를 존중할수있고, 배려가 우선이되어 팀활동하는데에있어 정말 큰 시너지효과가 난다는 것이다.
아직 3주라는 시간이 더남았는데 남은시간동안에도 팀원들과 서로 존중하고 배려하여 이번 프로젝트를 무사히 끝마칠 생각이다.
10조 화이팅!!!!!!!!