📋 HAII 공유 녹음기
🏢 협업 기업 : (주)하이
- FE : 김진영 박찬영 정세영
- 개발기간 : 10/11(화) ~ 10/14(금) 10:00
사용한 기술 스택
FE :JavaScriptReact.jsRecoilstyled-componentMUI등
주식회사 하이와 함께한 인턴십 과제입니다.
과제 내용은 제목 그대로 녹음 및 재생이 가능한 오디오 플레이어를 만드는 것 입니다.
저희 팀은 모두와 함께 녹음본을 공유할 수 있는 공유 녹음기로 만들기로 결정했습니다.
또 이번 과제는 라이브러리 (CSS 관련 제외) 사용을 최소화하라는 기업의 요구사항이 있어서 최대한 라이브러리 사용을 지양했습니다.
🔗 링크
🔧 내가 구현한 기능
1. 녹음 기능
맨 처음, 녹음 버튼을 누르면 사용자에게 마이크 사용 권한 허락을 요청하고, 사용자가 권한을 허락하면 녹음이 되고 카운터가 증가합니다.
또 삼항 연산자를 통해 녹음버튼의 클래스를 설정해 녹음 중일 땐, REC에 빨간 불이 들어오고 애니메이션이 작동되도록 구현했습니다.
그리고 녹음 정지 버튼을 누르면, 위 타이머가 초기화되고 바로 Firebase Storage에 녹음본이 저장되도록 구현했습니다.
녹음 후 상단 우측의 메뉴를 누르면 Firebase에 저장된 음원 파일들을 나열되고 그걸 누르면 재생되는 방식입니다.
2. 타이머 설정
슬라이더를 통해 최소 3초, 최대 180초 타이머를 설정할 수 있게 했습니다.
또 슬라이더에 디바운싱을 적용해 슬라이더를 움직일 때 마다 렌더링이 과하게 되는 것을 방지했습니다.
3. 재생 페이지 재생시간 표기 및 버그 수정
wavesurfer-js 라이브러리에서 현재 재생시간 및 전체 재생시간을 추출해내 디스플레이하도록 수정했습니다.
또 재생 중 사이드 바에서 다른 곡을 선택하면 버튼이 그대로 일시 정지 상태로 나타나는 버그와 곡을 선택하고 녹음 페이지에 갔다가 다시 돌아오면 환영 메세지와 wavesurfer가 동시에 나오는 등 다양한 버그를 수정했습니다.
4. 사이드바 편집 토글 추가
토글 기능을 넣어 실수로 오디오 파일을 삭제하는 경우를 최소화하도록 수정했습니다.
5. Recoil을 통한 전역 상태 관리
팀원들과 제 코드 중 일부 state를 Recoil을 통해 전역으로 상태를 관리하도록 수정했습니다.
👨🔧 팀원의 코드 수정하기
팀원 모두 새벽 5시까지 작업하고 피곤한 상태로 급하게 제출하여 팀원의 페이지에 몇개의 버그 수정 및 추가해야할 부분이 꽤 있었습니다.
그래서 프로젝트 제출이 끝나고 따로 레포지토리를 포크 후 클론하여 위에 작성한 내가 구현한 기능의 3번과 4번을 추가적으로 구현하고 Recoil 라이브러리를 통해 전역으로 상태를 관리하도록 수정했습니다.
타인의 코드를 보는 눈을 기르고 버그 수정과 다양한 기능을 구현해볼 수 있는 좋은 기회였다고 생각합니다.
🤯 기억에 남는 트러블
처음 사용해 본 Firebase를 사용하는 과정에서 수많은 에러를 겪었습니다.
과제 제출 전날, Firebase에서 불러오기를 맡으신 찬영님과 계속해서 에러와 싸우다가 Firebase는 추가 과제인데 포기를 해야 하나 고민하다 결국 한번 손댄 거 끝까지 해보기로 마음을 먹었습니다.
처음엔 저장 요청을 보내도 POST 404에러가 뜨는데, 구글링을 아무리 해도 해결 방법을 찾을 수가 없었습니다. 이것저것 시도해 보다 결국 dotenv에 선언된 환경 변수를 불러오는 과정에 문제가 있었던 걸 알게 되었고, 값을 수정해 해결했습니다.
또 기껏 저장하고 불러와도 실행이 안되는 버그가 있었는데 제가 저장할 때 이름 뒤에 mp3 확장자명을 추가하니 해결이 됐었습니다.
이것 말고도 수많은 에러를 마주쳤지만 (CORS 에러 등등) 결국 제출 당일 새벽 5시에 불러오기까지 성공적으로 끝마쳐서 너무 뿌듯했던 기억이 있습니다.
💪 내가 성장한 부분
1. 팀워크
새벽 5시까지 팀원들과 다 함께 과제를 수행하며 효율적으로 협업하는 방법을 배웠습니다.
또 팀 프로젝트에서 제가 굉장히 중요하게 생각하는 즐겁고 편한 분위기 형성하는 방법도 터득할 수 있었습니다.
2. Firebase 사용
전부터 Firebase를 사용하여 미니 프로젝트를 진행해 보고 싶다고 생각하고 있었는데, 이번 프로젝트를 통해 직접 공부해 보고 실제로 적용해 볼 수 있는 좋은 기회였던 것 같습니다.
3. 타인의 코드를 이해하는 능력
짧은 기간동안 진행됐던 프로젝트인 만큼, 버그와 수정해야할 부분도 많았는데 그걸 혼자 수정하다보니 타인의 코드를 수정해야할 일이 매우 많았습니다.
타인의 코드를 수정하려면 먼저 이해를 해야하다보니 자연스럽게 타인의 코드를 이해하는 능력이 늘게 되었습니다.
