원티드 X JUSTCODE Pre-Onboarding 3차 과제

👀 과제 소개

기업: (주)하이

과제: 오디오 재생 프로그램 만들

기간: 2022.10.10 ~ 2022.10.13

과제 설명: 오디오를 녹음하고, 재생하는 등 오디오 파일을 관리하는 프로그램을 개발합니다.

 

녹음 페이지

 

👨‍👩‍👧‍👦 팀 구성

FE : 김충만, 서지원, 이기완

 

 

⚙️ 기술 스택

• JavaScript
• React
• Styled-Components
• axois
• 협업 도구 : GitHub, Notion, zep

 

🔗 배포 링크

haii-audio

React App

 

---

 

🧑‍💻 내가 맡은 역할

• 녹음 페이지 UI
• 녹음 중일 때 UI 표시
• 초 단위로 최대 녹음가능 시간 설정 기능 구현
• 녹음이 되고 있는 시간 표기

 

전체적인 페이지의 UI는 자유롭게 개발하라는 과제 설명이 있어서 우리 팀은 녹음 어플은 사용자가 사용할 때 구현 설명이 필요 없이 사용이 가능하게끔 간단해야 한다고 생각해서 위와 같은 UI를 구현했다.

녹음 중일 때 UI는 녹음 버튼을 눌렀을 때 버튼은 정지 아이콘으로 변경되면서 녹음이 되고 있음을 나타냈다.

 

[최대 녹음가능 시간 설정]

• <select /> 내의 option 태그의 value값을 10초 단위로 지정.
• 오디오 이벤트 프로퍼티를 활용해 option의 values 값 이하 일 때 녹음이 멈추도록 구현

---

⭐ 느낀 점

샘플 UI 없이 우리의 아이디어를 통해 새로운 UI를 만드는 게 어려웠지만 자유롭게 창작할 수 있는 시간이어서 좋았다.

과제 설명 중 라이브러리 사용을 최소화하기를 원해서 라이브러리 없이 구현하기에 시간이 부족해서 다른 개발자들의 기술 블로그를 많이 참조해서 코드를 짰다.

이 과정에서 새로운 이벤트들과 이벤트의 프로퍼티와 메서드들을 많이 알게 되었다.

자바스크립트의 활용도는 얼마큼 자바스크립트를 알고 나만의 코드로 잘 활용하는지에 따라 결과물의 질이 달라지는 거 같다.