Home

Camon의 Wiki에 오신 것을 환영합니다!
여기에는 저희 팀이 프로젝트를 진행하면서 겪은 문제 해결 과정, 개발 일지, 기술적 고민 등을 기록하고 정리했습니다.
이 Wiki는 단순한 기록을 넘어, 저희의 성장 과정과 경험을 공유하기 위한 공간입니다.

저희 팀의 여정을 통해 여러분도 새로운 아이디어와 인사이트를 얻어가시길 바랍니다! 🎯
목차를 통해 궁금하신 내용을 찾아보세요. 🙌

목차

👥 우리 팀만의 강점, 개발 문화
🧑‍💻 개발 일지
💥 트러블 슈팅
🤔 고민
📚 학습 정리
💭 6주를 보내며

👥 우리 팀만의 강점, 개발 문화

6주 동안 Cam' On 서비스를 개발하며 형성된 우리 팀만의 개발 문화에 대해 소개합니다.

💎 우리 팀 문화의 장점

1. 모든 팀원이 흐름을 이해

   • 팀 내 모든 구성원이 프로젝트의 로직과 흐름을 이해.
   • 특정 팀원에게 의존하지 않고, 누구나 문제를 해결할 수 있는 환경.

2. 기술 격차 해소

   • 어려운 작업을 특정 팀원에게 맡기지 않고, 모두가 참여.
   • 학습과 경험을 공유하며, 팀 전체의 기술 수준을 균형 있게 유지.

3. 효율적인 협업

   • 팀원 간 신뢰와 소통을 바탕으로 문제를 빠르게 해결.
   • 실시간으로 가설을 세우고 검증하며, 끊임없이 성장하는 팀워크.

🔜 더 많은 개발 문화에 대해 궁굼하다면, 우리팀의 개발 문화 바로가기

⬆️목차로

🧑‍💻 개발 일지

6주의 과정을 담은 Cam' On의 주요 서비스에 대한 구현 과정에 대해 설명하고 있습니다.

🌟 방송 송출 및 시청 구현

• WebRTC와 Mediasoup을 활용해 실시간 방송 송출 및 시청 기능을 구축.
• 방송 시작/종료 UI를 간소화하여 사용자 경험을 최적화.
  방송 송출 및 시청 구현

📸 실시간 썸네일과 녹화 기능 구현

• Mediasoup과 FFmpeg을 활용해 실시간 썸네일 생성 및 녹화 데이터 저장 기능 구현.
• 저장된 녹화본은 Object Storage를 통해 관리.
  실시간 썸네일과 녹화 기능 구현

🔜 더 많은 개발 일지를 한 눈에 보고 싶다면, 개발 일지 view All

⬆️목차로

💥 트러블 슈팅

6주 동안 Cam' On 서비스를 개발하며 겪었던 문제들을 확인할 수 있습니다.

❓ FFmpeg를 이용한 실시간 HLS 변환에서 CPU 과부하 발생

• 문제: WebM 영상을 HLS로 실시간 변환하면서 CPU 사용량이 급격히 증가해 스트리밍 품질 및 녹화 영상에 문제가 발생.
• 해결: 실시간 변환 대신 WebM 원본 저장 후, CPU 부하가 낮을 때 큐를 통해 순차적으로 HLS 변환을 수행.
  방송 녹화 시 CPU 과부하 문제를 해결해보자

❓ requestAnimationFrame의 콜백함수 재귀호출로 인한 부하 문제 해결

• 문제: 캔버스에 영상이 재생되는 것처럼 보이게 하려고 캔버스 draw 함수가 계속 재귀호출되어 클라이언트 부하 문제 발생.
• 해결: 카메라와 화면 공유 하나만 송출될 때는 캔버스가 아닌 원본 비디오 트랙을 송출하도록 변경.
  카메라와 화면 공유 on off 상태에 따라 송출하는 비디오 트랙 교체하기

❓ Git Action에서 도커 이미지 빌드 시간 단축

• 문제: GitHub Actions에서 Docker 이미지를 빌드하는 데 시간이 과도하게 소요됨
• 해결: BuildKit을 활성화하고 type=gha로 Docker 레이어 캐시를 저장 및 재사용하여 빌드 시간 단축
  Git action에서 도커 이미지 빌드 시간을 단축시켜보자

🔜 더 많은 트러블 슈팅을 한 눈에 보고 싶다면, 트러블 슈팅 view All

⬆️목차로

🤔 고민

6주 동안 Cam' On 서비스를 개발하며 고민했던 내용을 확인할 수 있습니다.

🔍 Release 브랜치? 필요한가?

• 고민 이유: 기존 Git Flow 전략에서 Release 브랜치를 사용하는 것이 효율적인지 의문. CI/CD 자동화 과정에서 불필요한 브랜치 관리로 복잡성이 증가할 우려.
• 결론: Release 브랜치를 생략하고 develop 브랜치에서 주요 검증 후 main에 직접 배포하도록 결정.
  Release 브랜치? 너 필요해?

💬 실시간 채팅 구현: 인메모리 방식을 선택한 이유

• 고민 이유: Redis와 같은 영구 저장소 대신 인메모리를 사용하는 것이 적절한지 논의.
• 결론: 성능 최적화와 낮은 지연 시간을 위해 인메모리 방식을 채택.
  실시간 채팅 구현: 인메모리 방식을 선택한 이유

🔜 더 많은 고민을 한 눈에 보고 싶다면, 고민 view All

⬆️목차로

📚 학습 정리

팀원 별 학습한 내용이 궁금하시다면, 아래 링크를 클릭하여 확인하세요.

작성자	학습 정리
광현	Mediasoup 기본 개념 DLTS와 Signaling Tell, Don't Ask (TDA) 원칙이란 VPC(Virtual Private Cloud) 학습 정리 순환참조: A 서비스 ‐ B 서비스 vs. A 서비스 ‐ B 레포지토리 Dto 메서드 전략
지연	WebRTC란? 자바스크립트 패키지 매니저(npm, yarn, pnpm) shadcn/ui을 이용해 UI 개발 생산성 높이기 React 이벤트 핸들러 네이밍(on vs handle) React-router-dom의 createBrowserRouter을 사용해보기 fetch vs axios
희선	WebRTC에 대해서 알아보자 FFmpeg에 대해서 알아보자 OAuth의 개념과 동작 원리 모노레포와 터보레포란?
승헌	Mediasoup의 디자인 Mediasoup의 연결 방식에 대해서 알아보자 Logging webRTC로 실시간 방송이 가능할까?

⬆️목차로

💭 6주를 보내며

팀원 별 6주간 어떤 성장이 있었는지 궁금하시다면, 아래 팀원 별 링크를 클릭하여 확인하세요.

작성자	학습 정리
광현	광현's 6주 회고
지연	지연's 6주 회고
희선	희선's 6주 회고
승헌	승헌's 6주 회고

⬆️목차로