카테고리 없음

mvp 중간 발표 회고록

베스트오버 2023. 6. 28. 00:48

3주차까지의 후기 및 소감

이름 상태 후기 및 소감
마동휘 맑아요 열심히 하는 우리팀 좋아요b 🙂
공민영 맑아요 마지막까지 화이팅 하겠습니다😊
이준영 비바람 아직 해야 할 일들이 많아서 조금은 걱정되지만 같이 힘내 봅시다!
왕규원 적당해요 부족한 부분을 팀원분들과 달라붙어서 해결해가는 과정이 뿌듯합니다! 아직 갈 길이 멀지만 열심히 해보겠습니다!
김은수 맑아요 모두 화이팅!

MVP 중간발표 자료(기입)

  1. 프로젝트 정보
    • 서비스명: CLAID
    • 서비스 기획 의도: 음원파일 MR과 VOCAL로 분리 하는 기능을 제공하며 이를 활용해 ()을 공유할 수 있는 커뮤니티 사이트
    • 프로젝트 한 줄 설명: 음악과 ai(직접해야함)에 관심있는 사람들이 모이는 곳, CLAID!
    • 최종 MVP 스펙:
      • 일반로그인
      • 일반회원가입 이메일인증
      • 소셜로그인(kakao, Google)
      • 게시글 CRUD
      • 댓글 CRUD
      • 음악파일 첨부 및 재생
      • 게시글 미리보기에서 이미지를 통한 음악재생(hover를 통해 재생 표시)
      • 조회수 기능 - IP를 받아와 중복 방지
      • 오디오 파일 미리보기
      • 프로필 - 소셜로그인도 가능
      • 검색 기능
      • 음원파일 mr과 vocal로 분리하는 기능(다운로드 가능)
    • 서비스 배포 URL: CLAID.kr
    • 팀 노션 URL:

2. 기술적 의사결정 & 트러블슈팅 기록

  • 프로젝트를 진행하면서 직면한 문제를 어떤 과정으로 해결 하셨는지, 스택별로 기록 해 주세요
  • 기술적 의사결정을 기본으로, 트러블슈팅도 있다면 기록해둡시다.
  • 트러블슈팅
    • 일반 로그인 E-mail 인증
      • 목적
        • Email 인증 기능을 통해 email로 인증을 받아서 회원을 활성화 하려고 함
      • 설명
        • 일반 회원 E-mail 인증시 같은 코드인데도 사람에 따라서 작동이 되지 않는 경우 db를 지우고 마이그레션을 다시 해봤으나 문제 해결이 되지않음
      • 해결과정
        • 그래서 env 코드를 받아오는지 확인하기 위해 print로 찍어보니 출력이 되지않음 이메일 인증을 위해 필요한 정보를 .env 파일에서 받아오지 않고 직접 넣어주니 작동함 그러나 다른 .env 정보들은 받아 올 수 있는 것을 확인
        • 내 계정에 구글 보안설정에서 2단계 인증을 사용안함에서 사용으로 설정 변경했더니 해결 되었음
    • 구글 소셜 로그인시 redirect_uri_mismatch 가 뜨는 경우
      • 설명
        • 프론트엔드에서의 redirect_uri 와 구글 디벨로퍼즈에 등록된 앱의 redirect_uri 가 일치하였으나 redirect_uri_mismatch 가 뜨는 오류
        • 심지어 로그인이 될 때도 있고 redirect_uri_mismatch 떠서 로그인에 실패하기도 하는 등 다양한 경우가 있었음
      • 해결과정
        • 구글 디벨로퍼즈에 등록된 앱과 프론트에서 적어놓은 redirect_uri가 일치하는지 확인
        • 프론트에서 console을 이용하여 실제로 그 값이 찍히는지 확인
        • 튜터님과의 면담을 통해 문제해결
        • redirect_uri 는 변경하면 그 값이 적용되는데 최소 5분에서 최대 30분까지 걸린다고 함
        • 변경하고 기다리니 해결
    • user 환경 마다 다른 UI 이슈
      • 설명
        • user의 컴퓨터, user의 브라우저 마다 제각각인 UI
      • 문제원인
        • header.js에서 header.html을 가져와 <header>에 넣고 그 요소들을 base.js에서 <header> 안의 요소를 컨트롤 하려 했으나 순서가 뒤죽박죽
      • 해결 과정
        1. 한 팀원의 ‘Chrome’에서 UI가 다름.
        2. 코드가 다른지 원인 분석해봄.
        3. 브라우저 문제인지 재설치 함.
        4. ‘Edge’는 잘 됨.
        5. 타 팀원들도 다른 브라우저가 안되는 경우도 찾음.
        6. html이 모두 실행되고 나서 header.js 를 실행하기 위해 </body> 바로 위에 올림.
        7. header.js에 이벤트를 발생시키고 base.js에서 이벤트를 인식하는 것을 추가
    • ffmpeg binary not found
      • 설명
        • 음원파일 추출하려고 하면 에러발생, pip install ffmpeg를 했는데도 계속 같은 에러가 발생함
      • 문제원인
        • 처음에는 ffmpeg-python과 ffmpeg가 동시에 설치되어 있어서 생긴 에러라고 파악했음(그래서 해결과정의 1~3번 시도)
        • ffmpeg 실행 파일이 프로젝트 해당 드라이브에 설치되어있지 않아 생긴 에러였음(해결과정 5~8시도 후 에러 해결!)
      • 해결 과정
        1. pip uninstall ffmpeg
        2. pip uninstall ffmpeg-python
        3. pip install ffmpeg-python
        4. pip list에 보면 ffmpeg-python이 잘 들어가 있지만 음원 추출을 시도하면 같은 에러가 발생
        5. https://www.gyan.dev/ffmpeg/builds/ 사이트에서 ffmpeg 실행 파일(ffmpeg-git-full.7z)을 설치함
        6. 시스템환경변수에서 path에 ffmpeg파일 경로를 추가함 (ex)C:\Program Files\FFmpeg\bin)
        7. +그래도 계속 같은 에러가 발생함
        8. D드라이브에 있던 프로젝트 파일과 ffmpeg파일을 C드라이브로 이동하고 path 경로도 수정해줌
  • 기술적 의사결정도입 이유 의존성 패키지 관리를 쉽게 하기 위해 poetry를 사용하기로 함
    문제 상황 (보충 설명 있으면 좋음) 음원 분리를 하려고 spleeter로 poetry를 설치하려고 하였으나,poetry에서 캐시가 부족하여 설치가 불가능
    해결 방안 pip와 requirement.txt 를 이용해서 패키지 관리를 하기로 함
    의견 조율 음원 분리 기능은 핵심 기능이기 때문에 중요도가 높다는 의견이 많은 지지를 얻음
    의견 결정 poetry 사용을 중지하고 파이썬 의존성 관리자 중 pip를 이용하여 패키지 관리를 하기로 최종 결정함

 📢 중간 발표 이후 기재

 

3. 중간발표 피드백 기록

  • 월요일에 대면 피드백을 꼼꼼히 기록해두고, 개선이 필요한 사항에 적용해봅시다.
  • mr 분리
    • 프론트에서 되는지? >>> 백엔드에서 된다.
    • 나중에 기록을 확인할 수 있는지? >>> 아직은 없다.
  • poetry >>> pip 변경
  • 브라우저마다 ui가 다른 경우에 대해서 왜 브라우저마다 차이가 발생하였는지에 대한 추가 설명이 있었으면 좋겠다. 크롬은 Blink 렌더링 엔진과 V8 JavaScript 엔진을 사용하고, 엣지는 구버전의 경우 Trident/EdgeHTML 렌더링 엔진과 Chakra JavaScript 엔진을 사용하는 것에 그 이유가 있지 않을까 추측함

    1. 중간 발표 후 회고 (예시)

1) 미구현 된 MVP 기능

  • 좋아요
    • 내가 쓴 게시글 및 댓글 확인
    • 내가 좋아한 글,노래
    • 백엔드까지는 구현되었으나 프론트는 구현 전임
  • 실시간 채팅
    • 시작 전
  • 댓글
    • 좋아요 보여주기, 좋아요 높은 순으로 정렬?
  • 이미지를 통한 음악재생(hover를 통해 재생 표시) 토글을 이용해서 정지 이미지도 추가
  • 게시글 최신글/조회수 많은 순/좋아요 많은 순으로 정렬
  • 게시글 카테고리(공지,질문 등) 분류
  • 검색기능의 개선사항 태그

2**) 추가/개선 할 기능과 그 이유**

  • 댓글
    • 좋아요 보여주기, 좋아요 높은 순으로 정렬?
  • 좋아요
    • 기능 활성화
  • 이미지를 통한 음악재생(hover를 통해 재생 표시) 토글을 이용해서 정지 이미지도 추가
  • 게시글 최신글/조회수 많은 순/좋아요 많은 순으로 정렬
  • 게시글 카테고리(공지,질문 등) 분류
  • 검색기능의 개선사항 태그
  • MVP에서 개선할 기능 (이에 대한 개발 순서)
    • 프로필
      • 내가 쓴 게시글 및 댓글 확인
      • 내가 좋아한 글,노래
      • 내가 쓴 게시글 및 댓글 확인
      • 내가 좋아한 글,노래
    • 댓글
      • 좋아요 보여주기, 좋아요 높은 순으로 정렬?
    • 이미지를 통한 음악재생(hover를 통해 재생 표시)
      • 토글을 이용해서 정지 이미지도 추가
    • 게시글
      • 최신글/조회수 많은 순/좋아요 많은 순으로 정렬
    • 게시글 카테고리(공지,질문 등) 분류
  • 2주동안 개발할 추가 기능
    • ai 기능들이 배포 가능하면 (비용, 개발 문제)
      • ai관련한 기획
      • 게시글 올릴 때 설명을 적으면 표지 자동생성 했었는데 클립 사용) 용량문제로 배포에 문제
      • 음악 넣으면 장르를 알아서 분류/ 제목도 정해주고 (너의 목소리가 보여)
      • vocal 파일 → text 가사화
      • text → 그림
      • 그림으로 퀴즈
    • 불가능 하면 (비용, 개발 문제)
      • 알림
      • 다른 방향으로 기능추가
    • 공통
      • 테스트 코드 작성
      • 백오피스
      • 플레이리스트
      • 포인트
      • 결제

3**) 추가/개선할 기능을 어떻게 구현 할 것인지**

  • ex) 사용할 라이브러리와 그 이유
  • 실시간 채팅 → websocket(또는 socket.io) : 새로운 데이터가 들어오면 먼저 서버가 클라이언트에게 데이터를 전송하는 기술이므로 실시간 채팅 메세지를 주고받는 방식에 적합함

4. 앞으로의 계획 및 우선순위

  • 예시순위 구분 앞으로의 계획 (구체적으로) 마감예정일자
    1 MVP 초기 기획중 미흡하거나 미구현된 것들을 구현  
    2 MVP 배포문제로 ai를 어떻게 할 것인지 튜터님과 상담  
    3 개선 -좋아요기능 프론트엔드 구현  
    4 추가 플레이리스트  
    5 추가 -포인트, 북마크  
           

5. 앞으로 해야 할 일(4주차)

  • 팀 전체 (리더와 부리더님께서 필두로 정리해 주세요.)
    • [ ]
    • [ ]
    • [ ]
  • 팀원 개인별로 작성해 주세요.
    • [ ] 김은수: 미구현된 좋아요, 북마크 , 플레이리스트 기능 추가
    • [ ] 왕규원: 게시글 카테고리 분류
    • [ ] 이준영: 백엔드, 프론트 배포, 플레이어, 플레이리스트
    • [ ] 마동휘:
    • [ ] 공민영: