What I Learned
협업을 배우다
실전 프로젝트 주차에 들어오면서 백엔드 3명과 프론트엔드 2명, 디자이너 2명이 한 팀이 되었다. 클론코딩 주차에서 백앤드와의 협업은 이미 경험했지만 디자이너분들과의 협업은 이번주차에 들어서면서부터 처음 시작되었다. 기획단계부터 MVP 실현까지 총 3주간의 시간이 주어졌고, 이 기간 내에 MVP를 구현하는 것이 우리 팀의 목표이다. 우리 팀은 오디오북 사이트를 구현하기 위해 필요한 기능과 서비스를 기획했고 그 후에 API를 설계한 후 본 작업에 들어갈 수 있었다. 프론트엔드는 기본적으로 디자이너분들과 소통하며 작업을 해야했기에 협업툴로 피그마와 노션을 활용했으며 피그마를 통해서 디자이너분들과 프론트의 즉각적인 피드백이 이루어졌다. 디자이너분들께서 작업해주신 것들을 보면서 CSS 작업을 시작했고, 추가적으로 필요한 기능도 상의를 하며 가능한 부분을 적용하고 제거하는 등 활발한 의사소통이 이루어졌다.
작업을 하면서 가장 많이 느낀 부분은 기획단계부터 내용 구성을 조금 탄탄하게 하고 시작하는 것이 좋다는 것이었고, 팀원들과의 의사소통이 중요하다는 것이었다. 팀원 모두 서로의 의견을 제시할 때 모두에게 좋은 방향으로 이야기하기 위해 노력하였고 그걸 바탕으로 기획 단계부터 원하는 방향으로 조율하는 것이 어렵지 않았던 것 같다.
팀의 부리더로써 팀 전체가 참여하고 동의해야하는 부분에 있어서는 리더와 충분히 상의를 하고 팀원들과의 의견을 조율해 적용하기 위해 노력하였고 프론트엔드와 디자이너 소통에 있어서도 피그마와 노션, 카톡을 통해 즉각적인 피드백이 이루어질 수 있도록 노력하였다.
문제해결능력 향상
또한 팀 내의 문제가 아닌 다른 조 팀원들의 문제도 같이 해결해줌으로써 지금까지 항해를 하면서 배워온 것들을 다시한번 되짚어볼 수 있는 시간을 가졌는데 그동안 배운 것들을 활용할 수 있게 된 것이 신기하기도 하고 뿌듯했다.
기능 구현에 있어 막혔던 부분과 해결방안
기본적으로 이번 주차에는 기본적인 UI 구현과 함께 오디오북 재생을 위한 오디오플레이어 재생기능을 구현하기 위해 노력하였다. 오디오 재생 기능을 추가하는 것 자체가 처음이라 구글링을 통해 정말 많은 정보들을 찾아보았고 그 중에서 React-h5-audio-player 라이브러리를 활용하여 오디오 UI를 구현했다. 처음에는 UI를 변경할 수 없는 줄 알았는데 개발자도구를 이용해 className을 가지고 와서 style을 적용하니 어느정도의 UI를 변경할 수 있다는 것을 알게 되었다.
그리고 React-h5-audio-player에 원하는 오디오를 넣기 위해서 src 부분에 파일경로를 직업 넣었더니 재생이 되지 않는 문제가 발생했는데 파일을 import 해서 가져온 후 그 부분을 넣어주니 재생 문제가 해결되었다. 여기에 더하여 플레이리스트에 있는 재생목록 버튼을 클릭했을 때 재생되는 목록이 바뀌어야하는데 이 부분에서 오랜 시간을 투자했던 것 같다. 처음에는 어떤 방식으로 접근해야할지 감이 오지 않아 구글링을 시작했고 그러던 중 문득 떠오른 생각이 useState를 활용하는 방법이었다.
처음 상태값을 첫 재생목록으로 주어지고 버튼을 클릭할 때 setState에 다음 재생목록을 넣어주는 방식이었다. 아직 서버에서 넘겨주는 데이터를 직접 넣어보진 않았지만 이 방식을 이용하여 서버에서 넘겨주는 데이터 src를 적용해보려고 한다.
<항해 99 8주차 실전 프로젝트>
프로젝트 기간 : 2022.04.21.~2022.06.02 (총 6주간)
서비스명 : EYAGI(이야기)
팀 노션 : https://www.notion.so/EYAGI-e8795cce63e142dd8166b15aac826b09
EYAGI(이야기)
정기회의 월요일 오후 2시 / 토요일 오후 6시 / 수요일 오후 9시
www.notion.so
