2차 팀 프로젝트 - 음악 스트리밍 웹 어플리케이션

2022. 12. 11. 19:25Team Project

두번째 팀 프로젝트입니다.

 

이번에는 jsp를 기반으로한 음악 스트리밍 웹 어플리케이션 입니다.

 

기획 : 

첫번째 팀 프로젝트에서는 타겟팅을 하고 타겟에 맞는 어플리케이션을 개발하는 방향으로 진행되었지만,

이번 프로젝트에서는 조원들이 좋아하는 것들을 기반으로 하여 주제를 결정했습니다.

음악을 즐겨듣는 조원들이 많아서 실제 음악 스트리밍 사이트를 따라서 우리도 한번 만들어보자는 의견이 나왔고 모두가 찬성하여 음악 스트리밍 웹 어플리케이션을 만들게 되었습니다.

여기서 저는 음악 스트리밍, 좋아요, 재생 횟수 증감, ajax를 이용한 화면 전환 등을 담당했습니다.

 

구상 :

지금까지 공부했던 일반적인 회원가입, 로그인 등의 기능은 그대로 사용하고 음악 스트리밍 기능이 추가 되도록 했습니다.

핵심적으로는 음악 스트리밍이 되면서 페이지 전환이 일어날때 음악이 끊기지 않도록 하는 것이었습니다.

 

 

문제점:

이번 프로젝트를 하면서 제가 겪었던 문제는 크게 두가지가 있었습니다.

첫번째로, 지금까지 배웠던 화면 전환은 언제나 리프레시가 일어나면서 작동되었기 때문에 계속 음악이 끊기는 이슈가 있었습니다. 이 부분을 해결하기 위해 화면 전환을 AJAX를 사용하여 Header, Footer를 제외한 center 부분을 바꿔주기로 했습니다. 이렇게 문제를 해결했으나, 곧바로 다음 문제를 발견했습니다.

 두번째 문제는 ajax를 통해 화면 전환이 일어나기 때문에 url의 변화가 없었고, 뒤로가기 앞으로가기의 기능이 작동하지 않는다는 것이었습니다.

 이부분을 해결하기 위해 검색해본 결과 hash를 이용하는 방법을 이용하여 이 문제를 해결할 수 있었습니다. 페이지 전환이 일어날때마다 hash를 저장하고 이 hash를 기준으로 뒤로가기, 앞으로가기가 작동하게 할 수 있었습니다.

 

느낀점 & 개선점

 이번에는 지금까지 배운것 이상의 것을 필요로 하는 기능의 구현을 담당했기 때문에 모든 것을 직접 찾아서 공부하면서 구현해야했습니다. 부담감이 컸지만 결국 이를 해냈을 때에는 큰 성취감이 있었습니다. 특히나 제가 좋아하는 것으로 주제를 잡고 하니까 재밌게 개발할 수 있었습니다.

 하지만 강사님 曰 ajax를 통해 이렇게 화면이 통으로 바뀌는 경우는 보통 없고 ajax로 데이터를 송수신하여 이를 통해 화면 일부가 바뀌는 정도가 일반적이라 하셨습니다. 이 부분을 개선하면 좋겠지만 떠오르는 개선 방안이 없어서 해결할 수 없었습니다. 실제 음악 스트리밍 사이트는 어떠한 방법으로 작동되고 있는지를 알 수 있다면 참고하여 개발할 수 있을텐데 이 부분이 아쉬웠습니다.

 

깃허브 링크

https://github.com/MeowMeowPuppy/waterMelon.git