✔️ 스트리머는 기분이나 방송의 전반적인 분위기를 분위기 카테고리
로 표현할 수 있어요.
✔️ 마음에 든 스트리머를 팔로우하여 해당 방송을 쉽게 찾아볼 수 있어요.
✔️ 로그인 하지 않더라도 방송을 시청하거나 다른 시청자들과 익명으로 소통할 수 있어요.
✔️ 익명 유저의 닉네임과 표시 색상을 웹소켓 서버에서 랜덤하게 생성하면, 클라이언트에서 채팅 UI로 표현해줘요.
![최종_1](https://private-user-images.githubusercontent.com/103445254/392396629-304d8b08-a2d0-40b0-971d-ad59d169c588.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NTA0NTEsIm5iZiI6MTczOTU1MDE1MSwicGF0aCI6Ii8xMDM0NDUyNTQvMzkyMzk2NjI5LTMwNGQ4YjA4LWEyZDAtNDBiMC05NzFkLWFkNTlkMTY5YzU4OC5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNjIyMzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYTU2MjUzM2I4NjQ3M2QzZTdkODBlMTQ0MzAzYzEwMDJkYzk3ZDI5ODhjYjBmMWZlY2ZkMjI0NjBhYjhiZGQ2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.wicC7KRWqMR50y0_KGX8BiNJC65pGTMif-U-HYRAGpU)
✔️ Object Storage에 API를 통해 업로드하지 않고, mount하여 속도를 500ms
이상 단축시켰어요.
✔️ 더 적은 레이턴시를 위해서 다양한 시도를 했어요. 그 결과 최소 레이턴시를 3초
로 줄일 수 있었어요.
- 🌜 ObjectStorage에 저장할 때 기존 로직(fs.watch)과 Mount 도구를 사용했을 때의 속도 및 성능 비교
- 🔩 LLHLS 삽질기
- 🏸 미디어 서버의 CPU 과부하로 인한 성능 저하
![latency](https://private-user-images.githubusercontent.com/103445254/391878062-dad73daa-5fac-4bd4-9b90-0c34c3c268a1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NTA0NTEsIm5iZiI6MTczOTU1MDE1MSwicGF0aCI6Ii8xMDM0NDUyNTQvMzkxODc4MDYyLWRhZDczZGFhLTVmYWMtNGJkNC05YjkwLTBjMzRjM2MyNjhhMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNjIyMzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZjc3NWJlYTdkMGExNThmOTk0MDlkZGU0MjRjNWFjMzE5ZTJiNzdjYjBlY2I0ZjNkZDljMTE2ZmU5Nzk1OTQwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Bt__XSWOFpCWl3bNr5aFLLtMm6gURRvp_sSk_LgAHX8)
✔️ 라이브 섹션을 하나의 페이지가 아니라, 레이아웃에 존재하는 컴포넌트로 구현했어요.
✔️ 라이브 컨텍스트 프로바이더를 통해 라이브 정보 및 화면 경로 정보 등을 관리하고, 이에 따라 UI를 변경해요.
🚨 미니 플레이어로 전환되더라도 SSE 및 채팅 웹 소켓 통신이 끊기면 안돼요.
- 각 컴포넌트가 화면 상에 노출되지는 않되, DOM에는 상존하도록!
- 🌄 라이브 섹션에서 SSE 통신
- 🌟 채팅 1
- 💺 소켓 에러 미쳐버릴 거
✔️ 컨텍스트로 모든 상태를 관리할 수 있겠다고 판단하여 전역 상태 관리 라이브러리는 사용하지 않아요.
✔️ 미디어 서버를 우리 상황에 맞게 직접 구현했어요.
- 다양한 프로토콜을 지원하는 미디어 서버가 불필요하여 RTMP 프로토콜만을 지원하는 미디어 서버를 구현하고 싶었어요.
- 구현 과정에서 많은 트러블 슈팅 경험을 겪었고 이 과정을 모두 문서화 했어요.
✔️ 사용자는 자신의 채팅을 한국어, 영어, 일본어, 중국어로 번역할 수 있어요.
✔️ 글로벌 스트리머 & 사용자들과 언어의 장벽 없이 소통할 수 있어요.
✔️ 개발과 리팩토링의 주기를 반복하며 코드 가독성과 안정성을 높여요.
✔️ 라이트하우스와 GPT에게 주기적으로 서비스 및 코드에 대한 피드백을 요청하고, 이를 반영해요.
![refactor](https://private-user-images.githubusercontent.com/103445254/391880799-d277e082-0e25-458d-a5ea-b312d78d9f37.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NTA0NTEsIm5iZiI6MTczOTU1MDE1MSwicGF0aCI6Ii8xMDM0NDUyNTQvMzkxODgwNzk5LWQyNzdlMDgyLTBlMjUtNDU4ZC1hNWVhLWIzMTJkNzhkOWYzNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNjIyMzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kYzQ3MjA4OWM3ZmQwZTc1ZGFhNzU1NDMwNTE5YzIxNDQ2ZDE2ZmJkMTJlOGEyM2QzNjI4ZDJhNTg0NzJlYzU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Kd0RnkCQcvpH8VwOXsKT5C6kNCS9uC737ifeC13Ao1k)
분야 | 기술 | 선택 이유 |
---|---|---|
공통 | TypeScript Socket.io |
|
FE | Next.js React Tanstack-query |
|
BE | Nginx NestJS MySQL Redis |
![infra](https://private-user-images.githubusercontent.com/103445254/391830013-87a52eff-5117-4d8c-a759-a506de88f980.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NTA0NTEsIm5iZiI6MTczOTU1MDE1MSwicGF0aCI6Ii8xMDM0NDUyNTQvMzkxODMwMDEzLTg3YTUyZWZmLTUxMTctNGQ4Yy1hNzU5LWE1MDZkZTg4Zjk4MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNFQxNjIyMzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZDgwZjU2ODZmNTU0MmM5YjQ5ODA5ZjE5NDgyNjU0YTU1OWU3OTk5MTc0NDhmOWQyYjgyODE2ZWI0YzEwNDMwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.gg4C-AgGtQ9MvHDEuieKi55GOyxpaUAmPMG8Gbxwtpg)
J067_김진영 | J191_이인표 | J266_최호빈 | J279_홍정우 |
---|---|---|---|
BE | FE | BE | FE |
@JYKIM317 | @WilleLee | @zzawang | @HongBoogie |