Express (Node.js) Home controller 2

자주 사용되는 코드를 반복해서 작업하는 것을 피하기 위해 views폴더에 mixins 폴더를 생성하고

템플릿을 만들어준다.

 

mixin() 함수 

pug의 함수로서 반복되는 html 또는 어떤 코드덩어리를 함수 형태로 만들 수 있도로 기능을 제공한다

사용법은 mixin 함수명()이렇게 쓰고 아래 코드를 쓰고서 

사용할때는  + 함수명을 써주면 된다.

 

pugjs.org/language/mixins.html

Mixins – Pug

그렇다. 반복되는 코드블럭을 반복작업 필요없이 효과적으로 여러 곳에서 쓸 수 있도록 함수화 시켜주고

pug에 방식으로 include시켜주고 템플릿에 추가해주는 것이다.

자 그럼 홈화면에 video를 뿌려보자. 

먼저 mixin폴더에 videoBlock.pug파일을 만들어 주고

함수를 만들어주자

videoBlock이라는 mixin함수를 선언하고 인자로 video라는 빈객체를 넣어준다

그리고 videoBlock이라는 클래스명을 가진 박스를 만들고

그안에 video태그, h4태그 h6태그들을 만들어 준다 각 클래스들을 더해서~~

video태그에는 video객체에 videoFile 프로퍼티의 값을 가져온다.

h4태그에는 video객체에 title을  h6는 views 프로퍼티의 값을 가져온다.

그리고서 home.pug로 이동해보자

mixins폴더에 videoBlock을 인클루드(임포트?) 해주고 

+videoBlock을 통해서 함수를 실행 해준다. 함수에 인자를 전달하고 그 것은 videos에서  가져온 각 item들의 객체 정보를 넣어준다.

이정보는 이미 db.js라는 가짜 데이터 베이스를 통해 만들어 준 데이터이다.

 

그런데 문제가 생겼다... 보안 문제인건지... 일단 해결책은 세가지

app.js에  미들웨어 하나를 더 추가해 주는건데.

함수 하나를 만들어서 보안을 넘기는 것과

helmet미들웨어에  helmet({ contentSecurityPolicy: false }) 를 통해 보안 정책을 false시켜주는것

또는

meta(http-equiv="Content-Security-Policy" content="default-src *") 를 main.pug head밑에 추가해주는 것이 있다고 한다.

필자는 두번째 내용으로 진행하겠다~

그리고 비디오 플레이어는 controls프로퍼티를 써주자~

 

마찬가지로 search 템플릿도 수정해주자.