Skip to content
Jinyoung Kim edited this page Dec 3, 2024 · 18 revisions

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

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


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

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

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



🕗 개발 일지

📮 FE 🎲 BE
개발 환경 세팅 RTMP Handshake 구현
개발 환경 세팅2 Typescript Path Alias 설정
개발 환경 세팅3 RTMP Packet 파싱 처리 및 생성
헤더 UI RTMP Connect 구현
로그인 Context 작성 RTMP createStream, Publish 구현
메인페이지 UI (서랍, 시청자 순 리스트) 미디어 데이터들을 영상으로 생성하기
변경 필요 사항 (2주차) 영상을 Object Stroage에 저장할때 폴더 이름을 어떻게 해야할 까?
테마 변경? 우리가 m4s를 결정한 이유
서랍 UI 스트리머 정보 추가 서버 생성하기
hls.js로 데모 비디오 생성 ObjectStorage에 저장할 때 기존 로직(fs.watch)과 Mount 도구를 사용했을 때의 속도 및 성능 비교
시청 페이지 UI 1 웹서버 무중단 배포와 TLS 암호화
팔로우 버튼 UI & NoLiveContent DB 연동 & Type ORM 설정
시청 페이지 UI 2 - 컨트롤러 진행 Github 로그인
볼륨 컨트롤러 1 Live API
볼륨 컨트롤러 2 API2
폴더 구조 개선 채팅 서버
스튜디오 도메인 헤더 Naver 로그인
내 방송 페이지를 위한 공통 컴포넌트 작성 Follow API
모달 및 로그인 모달 구글 로그인
내 방송 페이지 1 LLHLS 삽질기
내 방송 페이지 2 CI/CD 구축
액션 작성 및 라이브, 로그인 컨텍스트 세터 개선 무중단 배포
내 방송 페이지 3 검색 API
채팅 1 Redis에 토큰 저장
로그인 1
카테고리 페이지 (/categories)
미니 플레이어 사용 경험 개선 1
라이브 섹션에서 SSE 통신
방송 설정 페이지
내 방송 페이지 4
팔로잉 1
미니 플레이어 사용 경험 개선 2
카테고리 상세 페이지
볼륨 컨트롤러 개선
로그인 2 & 네이버/구글 로그인
팔로잉 2
앞으로 해야할 일
라이브 프로바이더 및 라이브 섹션 개선
팔로잉 3
토스트
크로스 브라우징
검색창
검색 페이지
useHls 개선 (버퍼링)
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
Tanstack-query Nginx TypeScript
Vitest NestJS Socket.io
MSW Mysql
TypeORM
Jest
Redis



🖥️ funch 가이드라인

⚙️ 규칙 및 컨벤션

🐯 그라운드 룰

🏛️ Git Convention

🕌 코드 Convention

⚖️ 프로젝트 Convention

🖼️ 이슈 & PR 템플릿

👨🏼‍💻 프로젝트 기획

📜 프로젝트 구조

🔒 프로젝트 아이디어

💬 최종 기획서

✔️ 피그마

📕 공용 문서

💿 기술 스택

☘️ 트러블 슈팅

🍱 학습 정리

🌁 개발 일지

🎽 참고 문서

📈 인프라 & ERD

🕹️ Product Backlog

🖲️ Sprint Backlog

Clone this wiki locally