[항해99] 5기 B반 실전 프로젝트 회고록

🎈항해99, 6주간의 실전프로젝트가 막을 내렸습니다.

빠르고 정신없이 지나간 6주였지만 가장 성장할 수 있는 기간이었습니다. 팀원들과 함께 프로젝트를 완성시켰다는 성취감과  아직까지도 여운이 남습니다. 이 여운을 바탕으로 회고록을 작성하려 합니다.

 

 

💪프로젝트를 통해 배운 점

 

1. WebRTC 화상 기능 (SFU 방식 채택)

저희는 WebRTC 서비스를 구현하는데, SFU 방식을 채택했습니다. 그 이유는 처음에는 P2P 방식으로 구현했으나 다대다 통신에서 클라이언트에 부하가 급격하게 오기 때문이었습니다. 또한, P2P Mesh 방식을 사용할 경우, peer 간의 커넥션 절단 시 서버에서 확인하기 어려우며, 클라이언트 환경에 따른 지연 현상이 발생하기 때문에 SFU 방식을 채택하였으며, 이를 극복했습니다.

 

2. WebSocket와 Redux를 활용한 실시간 기능

 

프론트엔드에서는 실시간 유튜브 영상 컨트롤과 채팅 기능을 구현하기 위해 소켓통신과 redux 를 이용했습니다. 사용자의 유튜브 상태를 감지한 후, 변화 시 센드로 상태 메시지를 보내고, 이를 모든 구독자들에게 전달했습니다. 전달 받은 메시지는 타입을 갖고 있으며, 타입에 따라 리덕스를 이용해 모든 구독자의 유튜브 상태를 변화시켰습니다.

 

특히 WebSokcet 과 WebRTC 를 활용하면서 트러블 슈팅이 발생했습니다.

 

 

WebRTC 통신 과정에서 SDP 정보를 서버에 전달할 때, 가끔 Socket 통신이 커넥션되어 충돌되는 현상을 발견하게 되었습니다. 이 현상에 대응하기 위해 처음에는 setTimeOut을 주어 MVP 런칭을 했으나, 이후 자식 컴퍼넌트에서 이루어지는 소켓 통신을 부모 컴퍼넌트로 옮겨 순서대로 커넥션이 이루어지게 만들었습니다.

 

 

3. AWS Amplify를 이용한 무중단 배포

 

 

안전하고 확장 가능한 웹 어플리케이션을 구축하기 위해 AWS Amplify를 사용했습니다. AWS Amplify를 선택한 가장 큰 매력 포인트는 무중단 배포가 가능하다는 점이며, 그 과정이 git-flow 과정에서 자연스럽게 이루어질 수 있다는 점이었습니다. 사용방법은 먼저, AWS Amplify에 github 특정 브랜치 연결합니다. (저희는 main 브랜치를 배포 브랜치로 설정했기 때문에, main 브랜치를 연결했습니다.) 그럼, 기본 url을 제공받으면서 자동화 배포가 되는데요, Route53을 이용해 도메인 설정까지 끝내면 "HTTPS로 무중단 배포하기" 완성입니다.

 

 

 

 

 

 

 

 

4. 백엔드 개발자와 디자이너와의 협업과 팀장으로서의 책임감

Figma를 이용한 프로젝트 UI 구상

항해99 B반 5조 "홈트메이트" 프로젝트 리더로서 이번 프로젝트를 통해 팀의 분위기를 긍적적으로 만들고, 개발에 대한 책임감을 가진 경험을 했습니다. 또한, 실전 프로젝트에서는 디자이너와의 협업을 바탕으로 Figma를 통해 프로젝트를 구체화시키고, 어떤 기술이 들어갈 지 회의를 가지면서 현업에 투입 가능한 인재가 될 수 있는 경험을 얻었습니다.

 

5. 많은 사람 앞에서의 기술 발표 경험

항해99 5기 B반 5조 홈트메이트 발표장면

프로젝트 마지막 주차에 진행한 최종발표회에서의 기술 발표 경험은 가장 기억에 남는 경험 중 하나입니다. 팀원들과 함께 만들어 낸 프로젝트를 협업사들과 항해99 5기 동기들에게 발표함으로써 저희 팀 프로젝트의 아키텍처와 flow를 한번 더 곱씹을 수 있는 기회를 얻었습니다.

 

 

 

정말 큰 성장을 했으며, 여운이 많이 남은 6주간의 경험이였습니다.

아마도 이 실전프로젝트가 항해99에서 가장 큰 의미가 있는 프로젝트가 아닌가 생각합니다.

 

그 동안 B반 운영매니저를 담당해주셨던 "한현아 매니저님", 리액트 기술매니저를 담당해주셨던 "권지영 매니저님", B반 기술 튜터를 맡아주셨던 "유진호 튜터님" 감사드리며, 

 

이만 회고록을 마치겠습니다. :)

 

 

 

도메인 : https://www.hometmate.com/

홈트메이트 | 친구들과 즐기는 화상 홈트레이닝

 

노션 : https://www.notion.so/Home-T-Mate-b420be81dd3841c5a980bc99698897b9

홈트메이트(Home T Mate)

깃허브 : https://github.com/Home-t-Mate

Home-t-Mate