[express.js] (Template Engine)정적 파일을 동적으로

MVP Pattern을 사용하면 동적으로 데이터를 보여줘야되는데 정적 파일을 사용하면 힘이 들 수 있다. 그럴 경우 Template Engine를 사용하자.

Template Engine란?

• 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어

• 웹 템플릿 엔진은 view code(HTML)와 data logic code(DB connection)를 분리해주는 기능을 한다.

  

  서버 사이드 템플릿 엔진(Server Side Template Engine)

  • 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 HTML을 그려서 클라이언트에 전달해준다.
  • HTMl 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워 넣는 방식으로 동작할 수 있도록 해준다.

  클라이언트 사이트 템플릿 엔진(Client Side Template Engine)

  • HTML 형태로 코드를 작성할 수 있으며, 동적으로 DOM을 그리게 해주는 역할
  • 데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당한다.

  템플릿 엔진의 종류(자주 사용하는 것)

     - pug
     - ejs
     - hbs
     

  템플릿 엔진 사용법

  1. 패키지 설치(npm i hbs) 원하는 템플릿 엔진(hbs)
  2. 템플릿 엔진을 서버에 등록한다.

     // 서버 실행할 파일
      app.set("view engine", "hbs");
      app.set("views", path.join(__dirname, "views"));

     • view engine는 hbs를 사용한다.
     • 파일의 경로는 views 폴더이다.
  3. 템플릿을 생성한다.
     
  4. 생성한 hbs 파일에 {{변수}} 을 담으면 동적으로 데이터를 바꿀 수 있다. 그리고 hbs는 가상 경로 static에 있으니 static으로 이용해야한다.(img src , css)
     
     5. res.render를 이용해서 동적인 데이터를 정적인 파일에 담아준다.

     app.get("/", (rea, res) => {
     res.render("index", {
       imageTitle: "It is too",
     });
     });

     • "index" 파일 이름 index.hbs를 이용하고, imageTitle 동적 변수에 데이터를 넣어준다.