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