군대에서 HTML/CSS/JS 공부용으로 시작한 프로젝트를 이어서 계속 해보고자 한다. 이번에는 노래 재생 기능을 추가해보았다. 노래 재생은 다음과 같이 간단한 과정으로 이루어진다. 1. 노래 리스트에서 노래 클릭 2. 해당 노래 정보를 플레이어에 표시 3. 노래 음원 재생 내가 노래 재생 기능을 구현하는 과정에서 고민한 부분을 기록하고자 한다. 1. 노래 리스트에서 노래 클릭 이 부분의 구현은 어렵지 않다. 노래 리스트를 생성할 때, 해당 요소에 click 이벤트 리스너를 추가해주면 되기 때문이다. 2. 해당 노래 정보를 플레이어에 표시 노래 정보를 플레이어에 표시할 때, 처음 생각한 아이디어는 아래와 같았다. 노래를 클릭하면 >> 해당 노래 정보를 '현재 재생중인 노래 정보' 로서 전역적으로 저장하고..
지난달까지는 이 프로젝트를 배포할 때 nodemon을 이용해서 배포를 하였다. nodemon으로 배포하고 있을 때는 소스코드를 수정한 결과물을 자동으로 반영해주어서 결과물을 확인하기 좋았기 때문이다. 하지만 단점도 있었다. 매번 프로젝트를 할 때마다 노드몬을 키고 끄는 작업을 반복해야했기 때문이다. 물론 노드몬 자체를 백그라운드로 실행시킬 수도 있겠지만 나중에 노드몬을 끌 때 프로세스 아이디를 읽고 꺼야하는 귀찮음이 있어서 하고 싶지 않았다. 이 작업이 너무 번거롭다고 생각해서 백그라운드에서 배포하는 방법을 알아보았다. 검색을 해보니 nodemon말고도 forever와 pm2 등 선택지가 더 있었다. 그 중에서 나는 forever를 선택했다. 그 이유는 다음과 같았다. forever start 명령어로 ..
사실 에러처리는 전에도 이미 해놨었다. 하지만 그때는 간단한 메세지를 alert 함수로 표현하는 식이어서 마음에 들지 않았다. 가능하면 alert는 사용하지 않는 것이 사용자 경험에 좋다고 들었기 때문이다. 그래서 로그인 화면에 에러메세지를 위한 공간을 만들고 평소에는 안보이게 해두다가 에러가 뜨면 보이도록 만들었다. ShowErrorMessage 함수를 만들어서 에러메세지를 표시하도록 했다. const ShowErrorMessage = function(errorMessage) { const error_msg_div = document.getElementById("error-msg"); error_msg_div.style.visibility = "visible"; error_msg_div.textCont..
지난 포스팅에 이어 로그인을 구현해보았다. 이 로그인 구현에 정말 시간을 많이 투자했다. 우선은 로그인 페이지 구현을 위해 프로젝트 구조를 수정했다. 현재는 이렇게 외부에서 요청이 들어오면 NGINX가 정적 html파일과 css. js 파일을 반환하면서 프론트를 서비스한다. 그리고 프론트에 뿌려줄 데이터는 다른 오리진으로 분리된 백엔드 서버에서 받아온다. 원래의 내 목표는 로그인에 성공하면 세션을 주어 로그인을 유지하는 기능을 구현하는 것이었다. 하지만 이렇게 구현하였더니 프론트가 유저 정보를 백엔드로 보내 로그인에 성공해도 세션이 백엔드 서버에 대해 생기는 문제가 발생했다. everdu.ga 라는 프론트 도메인이 있고 api.everdu.ga 라는 백엔드 도메인이 있을 때 로그인 처리를 백엔드에서 하면..
이번엔 지난번 포스팅에 적었던대로 데이터베이스를 연동하여 데이터를 가져오도록 해보았다. 우선 MariaDB 를 깔고, NodeJS 에 연동하기 위해 MySQL 모듈을 설치했다. 이걸 설치할 당시 가장 최근 버전이었던 10.8.3 버전을 깔았는데 오늘 다시 들어가보니 10.9 버전이 나왔다. 그런데 1년밖에 지원안하니까 10.6을 까는걸 권장한다고 나와있다.. 그리고 어제 설치할 때는 Harukasan 에서 다운로드를 할 수가 없었다. 그냥 아예 명령어를 복사 붙여넣기 했는데 404에러가 떴다. 그래서 YongBok.net 으로 받았다. 아직은 Express하고 mysql 밖에 없다 그리고 다음과 같이 코드를 작성했다. DB에 접속하기 위한 코드 부분을 따로 분리했다. DB서버와 nodejs 서버가 같은 ..
원래는 http 내장 모듈을 이용해서 해볼까 했는데, 검색을 해보니까 이 모듈을 이용해서 서버 프로그래밍을 하는 건 안될 것 같다고 생각했다. createServer() 메소드로 서버를 만드는데, 이 함수의 인자로 콜백함수가 있다. 그런데 이 콜백함수로 요청 객체가 넘어오는데, 라우팅을 처리할 때 이 요청 객체의 경로를 일일히 분기로 나눠서 처리해야 했기 때문이다. 물론 해결책이 있을 것 같긴했는데, 굳이 그렇게까지 http모듈을 사용하고 싶지는 않아서 express 모듈을 사용하기로 했다. 사용하다보니까 뭔가 플라스크랑 닮았다. 대부분의 웹 프레임워크가 다 거기서 거기인건가 싶기도 하고... 'URL' -> 해당 url 에 대한 콜백 함수 이 구조인건 똑같았다. 우선 메인페이지로 사용자가 접속했을 때,..
이제 분리한 API 서버 도메인에 접속되는 걸 확인했으니 프론트서버에서 백엔드서버로 요청을 보내고 응답을 받는 것을 테스트해보기로 했다. 현재 프론트에서는 아무런 프레임워크 없이 순수 바닐라 자바스크립트로 만들고 있기 때문에 자바스크립트에서 사용할 수 있는 가장 대표적인 내장 함수인 fetch API 를 사용했다. 우선 프론트엔드의 자바스크립트 파일에서 다음과 같은 코드를 작성했다. 이렇게 REST API 를 이용해서 데이터를 받아오고, 받아온 데이터로 화면에 UI를 뿌리는 것이기 때문에 첫번째 포스팅에서 동적으로 UI를 생성하도록 짰던 코드에서 fetch 를 호출하도록 했다. 이것도 일단 테스트니까 서버에서 받은 데이터를 콘솔에 출력하도록 해봤다. 다음으로 출력할 데이터를 보내줄 서버에 코드를 작성해야..
별도 포스팅으로 남기지는 않겠지만, 그동안 유튜브 뮤직에서 사용하는 모달을 만들었다. 모달에 애니메이션도 넣어보면서 css 의 animation 도 사용해보았다. 다른 사람의 코드를 볼 때는 엄청 어렵고 복잡해 보였었는데 애니메이션을 공부하고 보니 각 애니메이션을 단계별로 자세하게 적어서 복잡해보인 것일 뿐 각 단계를 뜯어보면 그렇게까지 복잡하지 않다는 것을 알 수 있었다. 이렇게 만들어졌다. 실제 유튜브 뮤직이랑 비교하면 아이콘도 조금 다르고, 모달에 메뉴도 더 넣어야되지만 일단 UI 넣는건 이정도까지만 해보기로 했다. 이제는 API 서버를 만들어서 프론트에서 백엔드로 HTTP 요청을 날려서 데이터를 얻어온 뒤, 얻어온 데이터를 잘 처리해서 UI에 뿌려주도록 분리된 백엔드를 만들어보려고 한다. 이를 위..
드디어 한미연합훈련이 끝났다. (만세.....) 인터넷 검색하면 나오는 그 훈련입니다. 보안문제 없어요! 훈련이 끝나고 기존에 웹개발 공부로 하고 있던 유튜브 뮤직 클론코딩을 이어서 진행하기 시작했다. 지금까지는 열심히 구글링하면서 찾아낸 자료로 다음과 같은 화면 구성까지 만들었다. 만들다가 나중에 알게된 건데, PC 유튜브 뮤직과 모바일 유튜브 뮤직 디자인이나 UI구성이 조금 다르다 ㅋㅋㅋ (당연한건가..?) 일단 모바일 버전을 보면서 따라 만들기 시작했으니까 계속 모바일 버전을 참고해서 만들기로 했다. 다크모드는 아직 따로 만들지 않았지만, 나중에 다크모드로 바꿀 예정이다. 내 친구는 저 노란색을 보면서 색이 이상하다고 좀 바꾸라고 했었는데, 저건 Element 영역을 확인하려고 임시로 칠해놓은 색이..
