Playlist

프로젝트의 결과물이 궁금하신 분은 아래를 참고해주세요. 글은 프로젝트 전반적인 과정에 걸친 내용입니다

 

Github 저장소(프로젝트 기능 소개)

LIVE DEMO(사용해보기)

프로젝트 동기

백엔드 위주로 공부하다 프론트엔드를 본격적으로 공부한지 4개월쯤 됐습니다. 우아한 테크캠프를 통해 많은 경험을 했고 혼자 간단히 배운 내용을 정리할겸 토이 프로젝트를 해보기 위해서 시작했습니다.

토이프로젝트를 하며 react, redux, redux-saga, styled-components, custom hooks, lazy loading ... 이런 기술을 배워보고싶었습니다.

UI/UX

프론트엔드를 본격적으로 공부하며 프로젝트의 UI/UX를 신경 써야될 듯 했습니다.

전 UX가 프론트엔드에서 중요하다고 생각합니다

 

색상은 아래와 같이 파란색과 분홍색을 섞어 사용했습니다. 조금 편안한 분위기를 내고 싶었습니다.

 

또 노래를 play하는 부분에서는 많이 즐겨듣는 유튜브의 플레이리스트들 썸네일처럼 CD, 테이프 플레이어 느낌으로 하고싶었습니다.

 

사실 디자이너가 아니기에 많은 부분을 신경쓰진 못했지만 컨셉에 맞게 색상과 UI를 구상해봤습니다.

 

사용 기술

- react

- redux

- typescript

- styled-components

- webpack

- babel

 

프로젝트를 개발하며 redux의 사용과 custom hooks를 나누어 개발하는게 목표였습니다.  크기가 작은 토이프로젝트라 둘다 많이 경험하진 못했지만 이번 기회에 사용했던 점이 만족스럽습니다.

신경 쓴 부분

사용자 친화적인 서비스

 

- 스페이스바를 통한 노래 재생/정지

- 방향키를 이용한 노래 앞으로, 뒤로가기

- 노래 종료 시 다음곡 재생 

- 플레이리스트 모달을 통해 노래를 들으며 다른 플레이리스트로 이동

 

위와 같이 어쩌면 Player에는 당연한 기능을 고민하고 구현했습니다.

 

Hooks를 이용한 로직 분리

 

audio를 관리하는 hooks를 분리해서 개발했습니다.

useAudioPause, useAudioTimeline 각각 노래 재성/정지, 노래 시간대 관리에 대한 hooks입니다.

각각 독립된 로직으로 구분되며 서로 관리할 대상이 명확히 달라 구분해 사용했습니다.

 

앞으로?

간단한 토이 프로젝트로 시작하긴 했지만 앞으로도 조금씩 새로운 기능을 추가하고 개선해갈 계획입니다. 물론 경험하고 싶은 기술이 있다면 얼른 적용해볼 수도 있을 듯 합니다 :)

 

다음 마일스톤은 아래와 같습니다

 

1. 반응형 UI/UX

반응형을 고려해서 처음에 개발을 시작했는데 직접 구현하진 못해 반응형을 꼭 구현해볼 생각입니다.

 

2. 성능 최적화

lazy loading이나 그 외 여러 방식을 사용해 성능 최적화를 해볼 생각입니다 ㅎㅎ

 

3. youtube와 연동

저작권 문제로 저작권이 없는 음악들만 서버에 직접 저장해 사용하고 있지만 이 부분을 개선해서 유튜브와 연동해보는..? 그런 실험도 해볼 생각입니다

 

느낀점

사실 큰 프로젝트는 아니지만 이번 기회에 react의 상태관리를 더 깊게 고민해보고 여러 hooks를 사용한게 큰 경험이라고 생각합니다.

토이 프로젝트지만 재밌게 했고 앞으로도 조금씩 개선해보겠습니다