Skip to content
최호빈 edited this page Dec 4, 2024 · 18 revisions

뻔한 일상에 웃음 한 방, FUNCH funch logo


안녕, 우린 팀 무지개치즈라고 해~



J067_김진영 J191_이인표 J266_최호빈 J279_홍정우
BE FE BE FE
@JYKIM317 @WilleLee @zzawang @HongBoogie




🤔 우린 어떤 실시간 스트리밍 플랫폼을 만들고 싶은가?

✔️ 쉽게 일상과 기분을 공유할 수 있다.
✔️ 누구나 간단하게 방송을 킬 수 있고, 누구나 쉽게 찾아와서 볼 수 있다.
✔️ 방송을 시청함에 있어 취향에 따른 분류가 잘되어 쉽게 접근할 수 있다.




🕗 개발 일지 (2024.10.28 ~ 2024.12.06)

Sprint 1 (2024.10.28 ~ 2024.11.08)

🌐 FE 🐿️ BE
개발 환경 세팅 RTMP Handshake 구현
개발 환경 세팅2 Typescript Path Alias 설정
개발 환경 세팅3 RTMP Packet 파싱 처리 및 생성
헤더 UI RTMP Connect 구현
로그인 Context 작성 RTMP createStream, Publish 구현
메인페이지 UI (서랍, 시청자 순 리스트) 미디어 데이터들을 영상으로 생성하기
변경 필요 사항 (2주차)
테마 변경?
서랍 UI 스트리머 정보 추가

Sprint 2 (2024.11.11 ~ 2024.11.17)

🌐 FE 🐿️ BE
hls.js로 데모 비디오 생성 영상을 Object Stroage에 저장할때 폴더 이름을 어떻게 해야할 까?
시청 페이지 UI 1 우리가 m4s를 결정한 이유
팔로우 버튼 UI & NoLiveContent 서버 생성하기
시청 페이지 UI 2 - 컨트롤러 진행 ObjectStorage에 저장할 때 기존 로직(fs.watch)과 Mount 도구를 사용했을 때의 속도 및 성능 비교
볼륨 컨트롤러 1

Sprint 3 (2024.11.18 ~ 2024.11.24)

🌐 FE 🐿️ BE
볼륨 컨트롤러 2 웹서버 무중단 배포와 TLS 암호화
폴더 구조 개선 DB 연동 & Type ORM 설정
스튜디오 도메인 헤더 Github 로그인
내 방송 페이지를 위한 공통 컴포넌트 작성 Live API
모달 및 로그인 모달 API2
내 방송 페이지 1 채팅 서버
내 방송 페이지 2
액션 작성 및 라이브, 로그인 컨텍스트 세터 개선
내 방송 페이지 3
채팅 1
로그인 1

Sprint 4 (2024.11.25 ~ 2024.12.01)

🌐 FE 🐿️ BE
카테고리 페이지 (/categories) Naver 로그인
미니 플레이어 사용 경험 개선 1 Follow API
라이브 섹션에서 SSE 통신 구글 로그인
방송 설정 페이지 LLHLS 삽질기
내 방송 페이지 4 CI/CD 구축
팔로잉 1 무중단 배포
미니 플레이어 사용 경험 개선 2
카테고리 상세 페이지
볼륨 컨트롤러 개선
로그인 2 & 네이버/구글 로그인
팔로잉 2
앞으로 해야할 일
라이브 프로바이더 및 라이브 섹션 개선
팔로잉 3
토스트

Sprint 5 (2024.12.02 ~ 2024.12.06)

🌐 FE 🐿️ BE
크로스 브라우징 검색 API
검색창 Redis에 토큰 저장
검색 페이지 CLOVA Studio로 번역하기
useHls 개선 (버퍼링) Redis Migration
NoFollowingLives
홈 RecommendedLives 클컴으로 리팩토링



❗ 트러블 슈팅

📮 FE 🎲 BE
컨트롤러 null 렌더링 시 탭 및 리더기로 태그에 접근할 수 없는 문제 RTMP Handshake 이후 연결이 되지 않았던 문제
컨트롤러 내 버튼을 클릭하는 경우 포커스 유지되어 비디오 컨트롤러가 지속 노출되는 문제 RTMP 미디어 데이터 수신 중 Timestamp의 부호가 음수였던 문제
브라우저 캐싱에 의한 방송 정보 전환 문제 RTMP Chunk가 잘못 파싱되어 발생한 문제
볼륨 레인지를 위쪽에서 왔다갔다 했을 때 더블 밸류 에러 발생 HLS 변환 중 원인이 식별 안되는 오류 개선
컴포넌트 리팩터링 후 이미지 추가 시 적용 안되는 문제 m4s 404 에러 개선
서랍 content에 호버링하면 스크롤이 생기는 문제 네트워크 대역폭으로 인해 발생한 파싱 문제 해결
소켓 에러 미쳐버릴 거 Jest Test 중 Path Alias 인식 안되는 문제
Fetch failed
미디어 서버의 CPU 과부하로 인한 성능 저하



📕 기술 스택

📮 FE 🎲 BE 🎈 공통
React RTMP Npm
Next HLS TypeScript
Tanstack-query Nginx Socket.io
Vitest NestJS
MSW Mysql
TypeORM
Jest
Redis