📋 오디오 녹음 & 재생 프로그램 만들기
오늘 새벽 5시까지 팀원들이랑 작업하고 와서 후기를 작성해보려고한다..
우리팀은 모두와 녹음본을 공유할 수 있는 공유 녹음기를 만들기로 했다.
📌 1. 과제 소개
Github : https://github.com/rlawlsyoung/pre-onboarding-4team-haii
배포 링크 : https://jocular-empanada-50806c.netlify.app/
프리온보딩 2주 차 첫 번째 과제는 HAII와의 기업 협업 과제인 녹음 기능이 있는 오디오 재생 프로그램 만들기이다.
나는 녹음 기능 및 Firebase Storage에 녹음본 저장 기능 파트를 맡았고 추가적으로 재생 페이지 재생시간 표기 및 버그 수정, 사이드바 편집 토글 추가 등을 구현했다.
📌 2. 프로젝트 진행 과정
우선 이번 프로젝트에서도 팀원들과 먼저 미팅을 진행했다.
첫 번째 미팅에서 우리는 어떻게 역할분담, 회의 시간 및 어떻게 프로젝트를 진행할지에 대해 토론하고 내가 단순하게 UI 초안을 만들었다.
🤔 내가 제안한 초안
보기엔 허접하지만 그래도 나름 도움이 됐던 것 같다.
회의 결과, 우린 Trello를 통해 티켓을 관리하고 매일 오전 10시 30분에 Standup Meeting을 진행하고 제출 전날 최종 점검시간을 가지기로 했다.
또 나는 녹음, 찬영님은 녹음파일 불러오기, 세영님은 재생을 맡게 되었다.
📌 3. 팀원의 코드 수정하기
팀원 모두 새벽 5시까지 작업하고 피곤한 상태로 급하게 제출하여 팀원의 페이지에 몇개의 버그 수정 및 추가해야할 부분이 꽤 많았다.
그래서 프로젝트 제출이 끝나고 따로 레포지토리를 포크 후 클론하여 재생 페이지 재생시간 표기 및 버그 수정, 사이드바 편집 토글 추가 등을 내가 직접 구현했다.
또, 내 코드와 팀원의 코드에서 일부 state를 Recoil을 통해 전역으로 상태를 관리하도록 수정했다.
타인의 코드를 보는 눈을 기르고 버그 수정과 다양한 기능을 구현해볼 수 있는 좋은 기회였다고 생각한다.
📌 4. 후기
이번 과제에서 Firebase를 처음 사용해보았는데, 사용하는 과정에서 수많은 에러를 겪었다.
그중 기억나는 에러 몇가지는 저장 요청을 보내도 POST 404에러가 뜨는데, 구글링을 아무리해도 해결 방법을 찾을 수가 없었다. 이것저것 시도해보다 결국 dotenv에 선언된 환경변수를 불러오는 과정에 문제가 있었던 걸 알게되었고, 값을 수정해 해결했다.
또 기껏 저장하고 불러와도 실행이 안되는 버그가 있었는데 이건 내가 저장할 때 이름 뒤에 mp3 확장자명을 추가하니 해결이 됐었다.
이것 말고도 수많은 에러를 마주쳤지만 (CORS 에러 등등) 결국 잘 작동하는걸 보니 너무 뿌듯했다.
또 팀원 모두가 Firebase때문에 새벽 내내 고생하다 급하게 배포해서 재생 파트에 약간의 버그가 있다.
새벽 5시까지 작업하면서 이 과제에 애정이 생겨서 그런지 나중에 내 개인 레포로 fork해서 버그를 수정하고 꼭 다시 배포해보고싶다!
