📌WIL을 적기 전 참고하기
✍️WIL이란?
이번 주 동안의 회고를 4F를 통해 기록하는 것
✍️What is 4F?
Fact : 이번주 있었던 일, 내가 한 일
Feeling : 나의 감정적인 반응, 느낌
Finding : 그 상황으로부터 내가 배운 것, 얻은 것
Future : 배운 것을 미래에 어떻게 적용할 것인가
✍️Fact: 이번주 있었던 일
- 소켓 io 이용한 실시간 영상 통신
- 대시보드 레이아웃 완성
- 대시보드 api 연결함
- 라이브러리 이용한 동접 인원 차트 만들어봄
✍️Feeling: 이번주 내 감정
이번 주는 실전 프로젝트 들어온 이후 가장 바쁜 주였다. Mvp 구현 관련해서 내가 호기롭게 웹소켓 연결해보겠다고 했는데 생각보다 어려워서... 공식 문서도 보고 줌 클론코딩도 하면서 이래저래 이해하기 위해 노력했다. 힘들고 초조했지만 어떻게 되긴 됨. 그리고 트러블 슈팅과정에서 내가 내 문제를 해결하는 것도 중요하지만 너무 힘들다면 팀원들에게 상황을 공유하는 것이 큰 도움이 된다는 것을 깨달았다. 통신과 관련된 이슈를 백엔드 팀원이 보시고 해결해주셨기 때문이다. 모르는 것은 공식문서를 찾아보며 찾되 안되면 도움을 꼬옥 청하자!
✍️Finding : 그 상황으로부터 내가 배운 것, 얻은 것
socket.io가 프론트엔드 쪽에 더 친화적이라 자료를 찾는 건 어렵지 않았는데, 백엔드와 통신하는 것과 영상 송출과 관련해서 엄청 시간을 썼다. 시그널링 하는 부분에서 며칠을 머리뜯으면서 원인을 찾기 위해 싸웠다. 혼자서 해결하지 못해 매니저님 세분께 도움을 요청했었는데... 기다리는 동안 백엔드 분과 처음부터 만들면서 해결했다. 문제는 2가지로, 첫번째는 먼저 들어온 peer를 peerA라고 한다면 PeerA와 peerB중 peerB는 offer과 answer를 적절히 받아 localdescription과 remoteDescription이 옳게 처리되는데 peerA는 자기 sdp만 받아 localdescription과 remoteDescription이 일치하는 문제였다. 이것과 관련해서 시니어멘토님께서 피드백 주시기를
- connectionState: "failed" 부분을 확인하기 위해서 스트림 정보가 peerConnection에 제대로 등록처리 되는지 확인하기
- iceServers 설정이 제대로 되어있는지 다시 한번 확인하기
- 로컬pc 방화벽에 대한 설정도 검토하기
- 로직상으론 소켓연결 및 peer 생성, 스트림정보 등록, sdp 공유, 소켓 통신을 통한 candidate 등의 로직은 존재하는것으로 보임.
- peerA가 방장일텐데, B가 연결이 정상적으로 된거면 connection failed가 나오는게 이상함. 현재 상황이 연결자체가 불가능한지 아니면 방장의 미디어 스트림이 연결되지 않은건지 확인해보기
로 피드백을 주셨다. 시간관계상 백엔드 분과 함께 만든 것을 적용해서 저 원인을 정확히 파악하지 못 했지만 어차피 서버도 내 노드로 만들어놨기때문에 저 피드백을 기반으로 원인을 찾아볼 예정이다...
두번째로는 영상 송출과 관련된 문제이다. 시그널링이 잘 구현되는 것을 백엔드와 확인하고 나서 상대방 영상이 안 보이는 이슈가 있었는데, 그건 addTrack이라는 함수를 addStream으로 변경하고, data.streams[0]이라고 배열로 받던 값을 data.stream으로 바꾸면서 해결했다. 사실 addStream으로 줌 강의는 진행됐는데 구식이라는 말을 듣고 addTrack으로 변경했던 건데 내가 카메라 옵션을 제외해서인지, 아니면 우리 코드에 addTrack이 맞지 않았던 건지 addStream으로 하니 돼서 지금은 그걸로 쓰고 있다.
✍️Future: 배운 것들을 어떻게 적용할까 ?
위의 트러블 슈팅이 이번 주 내게 찐한게 남은 고통이지만, 문제를 해결해나가는 과정에서 얻은 것들이 많았다. 챗GTP에게 의존을 많이 했었는데 저런 문제나 Chart 라이브러리 관련 이슈를 해결하는데는 공식문서나 npm 사이트를 뒤져보는게 더 도움이 됐다. 이번 주 내 경험을 토대로 트러블 이슈를 더 빨리 해결할 수 있도록 해야겠다.
