군대에서 HTML/CSS/JS 공부용으로 시작한 프로젝트를 이어서 계속 해보고자 한다. 이번에는 노래 재생 기능을 추가해보았다. 노래 재생은 다음과 같이 간단한 과정으로 이루어진다. 1. 노래 리스트에서 노래 클릭 2. 해당 노래 정보를 플레이어에 표시 3. 노래 음원 재생 내가 노래 재생 기능을 구현하는 과정에서 고민한 부분을 기록하고자 한다. 1. 노래 리스트에서 노래 클릭 이 부분의 구현은 어렵지 않다. 노래 리스트를 생성할 때, 해당 요소에 click 이벤트 리스너를 추가해주면 되기 때문이다. 2. 해당 노래 정보를 플레이어에 표시 노래 정보를 플레이어에 표시할 때, 처음 생각한 아이디어는 아래와 같았다. 노래를 클릭하면 >> 해당 노래 정보를 '현재 재생중인 노래 정보' 로서 전역적으로 저장하고..
지난달까지는 이 프로젝트를 배포할 때 nodemon을 이용해서 배포를 하였다. nodemon으로 배포하고 있을 때는 소스코드를 수정한 결과물을 자동으로 반영해주어서 결과물을 확인하기 좋았기 때문이다. 하지만 단점도 있었다. 매번 프로젝트를 할 때마다 노드몬을 키고 끄는 작업을 반복해야했기 때문이다. 물론 노드몬 자체를 백그라운드로 실행시킬 수도 있겠지만 나중에 노드몬을 끌 때 프로세스 아이디를 읽고 꺼야하는 귀찮음이 있어서 하고 싶지 않았다. 이 작업이 너무 번거롭다고 생각해서 백그라운드에서 배포하는 방법을 알아보았다. 검색을 해보니 nodemon말고도 forever와 pm2 등 선택지가 더 있었다. 그 중에서 나는 forever를 선택했다. 그 이유는 다음과 같았다. forever start 명령어로 ..
별도 포스팅으로 남기지는 않겠지만, 그동안 유튜브 뮤직에서 사용하는 모달을 만들었다. 모달에 애니메이션도 넣어보면서 css 의 animation 도 사용해보았다. 다른 사람의 코드를 볼 때는 엄청 어렵고 복잡해 보였었는데 애니메이션을 공부하고 보니 각 애니메이션을 단계별로 자세하게 적어서 복잡해보인 것일 뿐 각 단계를 뜯어보면 그렇게까지 복잡하지 않다는 것을 알 수 있었다. 이렇게 만들어졌다. 실제 유튜브 뮤직이랑 비교하면 아이콘도 조금 다르고, 모달에 메뉴도 더 넣어야되지만 일단 UI 넣는건 이정도까지만 해보기로 했다. 이제는 API 서버를 만들어서 프론트에서 백엔드로 HTTP 요청을 날려서 데이터를 얻어온 뒤, 얻어온 데이터를 잘 처리해서 UI에 뿌려주도록 분리된 백엔드를 만들어보려고 한다. 이를 위..
