videoPlayer.pug

Project using node.js/Cloning Youtube 2020. 8. 29. 08:10

View

pug의 기능 중 mixin이라고 있다. 여러 페이지에서 중복되는 코드 블록을 떼어내서 하나의 파일로 만들고 include를 통해서 다른 파일들이 이 mixin 모듈을 사용하는 것이다.

사용하는 방법은 include로 먼저 파일을 불러오고
"+<mixin 이름>({ mixin을 부르는 파일에 있는 변수 명(videoDetail 변수 명) : mixin의 변수 명(videoPlayer의 변수 명) })"
를 하면 된다.

mixin 파일은 pug와 똑같은 방식으로 작성하되 맨 위에
mixin <mixin 이름>(mixin 파일이 정의하는 변수 명={})
을 추가하면 된다.

그렇게 되면 다음과 같이 videoPlayer가 화면에 나온다. (화면이 검은 이유는 내가 올린 영상의 thumbnail이 검은색이기 때문이다.)

소스 코드