2주차 멘토링 일지 - boostcampwm2023/web07-GBS GitHub Wiki

✔️ 아젠다 및 질문

BE 2주차 구현 내용

obs rtmp-reciever encoding-server hls
node-media-server 모듈을 사용해서 encoding-server로 전송 m3u8, ts 인코딩 후 Object Storage로 전송 일단 서버 없이 Object Storage에 바로 접근

너무 라이브러리를 갖다 쓰기만 한 것 같기도 한데 어떻게 생각하시나요?

H264 포맷 문제가 있었습니다.

해결은 했는데 왜 발생한 건지 정확히 이해는 하지 못했습니다.

그리고 라이브러리 코드를 덮어쓰는 방식으로 문제를 해결 했는데

이렇게 해도 문제가 없을지, 더 좋은 방법이 있는지 궁금합니다.

  • 자고 일어나니까 또 안되네요..

  • 코드 덮어쓰는 방법으로 로컬에선 잘 돼요

FE 2주차 질문

현재 디렉토리 구조가 합리적인지

📦src
 ┣ 📂assets  // 사진 or 로고 등
 ┣ 📂components // 재사용 가능한 컴포넌트들
 ┣ 📂pages // 페이지
 ┣ 📂types // 타입들
 ┣ 📂services // 외부 api 연결
 ┣ 📂stories // 스토리북
 ┣ 📂utils // 공통으로 사용하는 함수들 저장
 ┣ 📂styles // 폰트, 색상 등을 저장
 ┣ 📜App.tsx
 ┗ 📜main.tsx

프론트엔드 배포관련해서 어떤 도구를 사용하면 좋을지?

  • firebase
  • github pages
  • vercel

등등

✔️ 멘토링 내용

  • 데일리 스크럼 동안 현재 프로젝트에 어떤 문제가 있는지 등을 이야기 하면서 뜨는 시간을 줄이는 것이 좋을 것 같다.

  • 페어프로그래밍에 너무 몰두? 집중? 할 필요는 없다.

  • HLS 와 여러 프로토콜 동작 방식과 호환 기기 리서치 및 공유

  • ERD, API 설계

  • 멘토링 피드백

    • 데일리 스크럼 때 단순한 일정공유가 아닌 현재 어떤상황에 있고, 어떤 일에서 문제가 생겼고 등등 커뮤니케이션을 많이 하면 좋을 것 같다 -> 일정이나 작업순서를 바꾸는 등 시간을 재정비해서 프로젝트 속도를 향상 시킬 수 있을 것 같다.
    • 페어프로그래밍 하면 얻는것은 많지만, 일을 나눠서 할때 어떻게 일을 나누고, 소통해서 일을할 수 있는지 경험해보는것도 좋을 것 같다. -> 중간 이후부터는 일을 나눠서 하는게 더 좋을 것 같다. -> 아예 한 주 단위로 서로의 일을 바꿔서 하면은 배우는 것도 많고, 서로의 코드도 볼 수 있는 기회가 되지 않을까 생각한다.
    • 스타일드 컴포넌트 vs 이모션
      • 사실 유의미한 차이는 없음.
      • 사용하고 싶은 것 사용하면 될듯
    • 데일리 스크럼을 할 때 그냥 같이 한번에 적고 올려라.
      • 가능하면 같은 역할을 하는 도구는 한개만 써라. (노션이나 깃허브 위키 등등) 디렉토리 구조 관련
    • Chakra 등의 ui를 참고해서 컴포넌트의 1차적으로 구분을 지어놓고 그 안에 세부 컴포넌트들을
    • types 그 페이지에서 쓰이는 타입은 굳이 여기에 안넣어도 됨.
    • Services 외부 api만 받을지, 내부 처리 로직을 넣을걸지? 도 정하면 좋을 것 같다.
    • 스토리북도 계속 작성하다가보면은 UI가 바뀌거나 했을 때 계속 바꿔줘야하기 때문에 시간이 부족하다면 최소한의 컴포넌트만 스토리북으로 작성해도 됨.
    • Hook, state 등도 추가되면 좋을 것 같음.
    • 테스트는 시간 없으면 과감하게 버리기. 배포 관련
    • 시간 투자를 굳이 안해도 된다.
    • 원준 : 개발쪽에 집중하고 싶다
    • 상원 : 배포도 경험해보고 싶다
    • 일단 csw가 진행할듯

✔️ 체크리스트

  • 스트리밍 수신 서버 세팅
  • 스트리밍 서버에서 OBS로부터 온 데이터 수신 기능 구현
  • 인코딩 서버 세팅
  • 스트리밍 서버에서 인코딩 서버로 데이터 송신 기능 구현
  • 인코딩 서버에서 object storage에 m3u8, ts 파일 생성 후 저장
  • object storage에서 바로 브라우저로 스트리밍 데이터 송신
  • 사용자가 "방송정보" 버튼을 누를 경우, 방송 제목, 방송 설명, 카테고리를 설정할 수 있는 화면이 뜬다.
  • 사용자는 방송을 송출할 수 있는 endpoint를 확인 할 수 있다.
  • 해당 방송이 종료되었다는 신호를 서버에서 받으면 종료한다.
  • 처음 방송 접속 시 방송화면, 채팅 화면, 방송정보 화면을 볼 수 있다.
  • 방송정보는 방송을 켠 스트리머 이름, 시청자 수, 방송 설명 등을 포함하여 출력한다.
  • 시청자 수는 10초마다 새로 반영된다.
  • 기술 스택의 선정 이유 혹은 구현 방식에 대해 나만의 근거를 가지고 설명할 수 있다.
  • 이번주 스프린트 계획을 세웠고, 목표한 만큼 구현하고 있다.
  • 다른 팀원의 과제가 무엇이고 왜 그 일을 하고 있는지 설명할 수 있다.
  • 기술적 도전 과제를 중심으로 기획서와 백로그 및 feature list 등이 완비되었다.