[유튜브 뮤직 클론코딩] 1. html 코드를 동적으로 생성하도록 수정하기

드디어 한미연합훈련이 끝났다. (만세.....) 인터넷 검색하면 나오는 그 훈련입니다. 보안문제 없어요!

훈련이 끝나고 기존에 웹개발 공부로 하고 있던 유튜브 뮤직 클론코딩을 이어서 진행하기 시작했다.

 

지금까지는 열심히 구글링하면서 찾아낸 자료로 다음과 같은 화면 구성까지 만들었다.

만들다가 나중에 알게된 건데, PC 유튜브 뮤직과 모바일 유튜브 뮤직 디자인이나 UI구성이 조금 다르다 ㅋㅋㅋ (당연한건가..?)

일단 모바일 버전을 보면서 따라 만들기 시작했으니까 계속 모바일 버전을 참고해서 만들기로 했다.

 

다크모드는 아직 따로 만들지 않았지만, 나중에 다크모드로 바꿀 예정이다.

내 친구는 저 노란색을 보면서 색이 이상하다고 좀 바꾸라고 했었는데,

저건 Element 영역을 확인하려고 임시로 칠해놓은 색이라 없앨 예정이다.. 

내 디자인 감성이 좋지 못한건 나도 알고 있다..

 

다시 이 글의 주제로 돌아와서...

지금까지 저렇게 디자인을 짜면서 나는 단 한줄의 js 코드도 작성하지 않았었다.

그 결과 내 html코드는 다음과 같이 되었다.

 

대충 전부 다 하드코딩했다는 내용

이렇게 하나하나 다 타이핑하면서, 노래가 한곡 추가될 때마다 기존 코드를 복사하고 붙여넣는 노가다를 뛰었다.

그래서 HTML 코드를 동적으로 생성하고 붙여넣는 방법을 고민하기 시작했다.

 

방법은 여러가지가 있겠지만, 현재 내가 찍먹으로 사용해본적 있는 도구중에서 HTML을 동적으로 생성하는 도구는 PHP, Flask, JavaScript 3가지였다.

 

찾아보니까 결국 두가지로 갈라지게 되었다.

서버사이드 렌더링이냐, 클라이언트 사이드 렌더링이냐

 

나는 자바스크립트를 이용한 CSR을 선택했다.

일단 자바스크립트를 먼저 연습하고나서 다른 프레임워크 공부를 넘어가는게 더 좋겠다는 생각이 들었기 때문이다.

 

그래서 template 태그로 반복되는 아이템 요소를 템플릿으로 만들어두고,

MDN template 태그 활용 예시글을 참고하여 importNode 함수를 이용해 동적으로 내용물을 복사 붙여넣기해서 넣어주기로 했다.

 

코드는 간단하다.

그냥 템플릿에 있는 html 요소를 그대로 복사해서 새 객체를 만든다음

그 안에 원하는 내용을 넣어서 메인 콘텐츠에 추가시켜주면 된다.

이 과정이 계속 반복되므로, 함수로 만들어주었다.

 

이렇게해서 동적으로 html 코드를 생성하는 것까지는 완성했다.

이제 이 함수를 계속 반복적으로 사용하여 내용을 추가해주면 된다.

 

아래는 그 결과물이다.

각 아이템마다 콘텐츠에 내용을 아무것도 넣지 않아서 빈 것으로 보인다.

하지만 아직 문제가 남아있다.

지금은 내가 메인 콘텐츠에 추가할 아이템을 템플릿으로 만들어두었는데,

해당 아이템의 콘텐츠로 올 수 있는 종류가 여러가지가 있다.

가로 슬라이더, 곡 리스트 슬라이드 등 여러 요소가 있는데,

이 요소를 모두 템플릿으로 만들고 함수를 이용해 생성하도록 하면 중복되는 부분이 생긴다.

 

그래서 콘텐츠에 추가할 "아이템", "슬라이더" 이 각각을 객체로 만들어서

 

let slider = new Slider();

slider.add("엘범아트 이미지 주소", "너랑 나", "아이유");

 

와 같은 형태로 각각을 일종의 클래스로 만들어서 인스턴스로 생성하고 싶다는 생각이 들었다.

 

이 부분은 아직 자바스크립트 언어에 대한 공부가 부족해서 구현하기가 힘들어, 더 공부하면서 리펙토링 해볼 예정이다.

그동안 클래스 언어를 사용하다 프로토타입 언어를 써보니 확실히 적응하기 힘들다..ㅋㅋㅋ

 

훈련도 끝났으니 열심히 Inside Javascript 를 정독해야겠다..

 

---------------------------------------------------------------------------------------

 

* 이 프로젝트에서 해보고 싶은 것

1. 클라이언트 사이드 html/css/javascript 만으로 구현해보기 (진행중..)

2. DB추가해서 DB연동해보기

3. 가능하다면 추천 시스템을 만들어서 노래 추천하는 기능 넣어보기..

 

 전역하기 전에 이 프로젝트만 하고 싶은 만큼 다 해보고 가도 꽤 많은걸 얻을 수 있을 것 같다. 제대하면 기존 프로젝트들 못했던거 이어서 해볼 생각이다.

맨날 장대하게 시작만 해놓고 접는 프로젝트가 늘어나는 느낌이라..