[Toy Project - Omuk] 3. 템플릿 엔진 설치 - 서버 사이드 렌더링

서버 사이드 렌더링

웹 사이트를 렌더링하기 위해서 두 가지 방식으로 웹 사이트를 표시해줄 수 있다. 이때, 클라이언트에서 렌더링 하느냐, 혹은 서버에서 렌더링하느냐의 차이가 발생한다.

 

클라이언트에서 렌더링 하는 방식을 클라이언트 사이드 렌더링(CSR)이라고 하며, 서버에서 렌더링 하는 방식을 서버 사이드 렌더링(SSR) 이라고 한다.

 

클라이언트 사이드 렌더링은 사용자가 원할 때마다 서버에 요청하여 데이터를 받아오는 등으로 사이트의 일부를 변경시키는 방식으로 사이트를 렌더링한다. 자바스크립트가 DOM을 통해서 HTML 을 수정하는 것 또한 CSR이다. 요즘은 React, Vue, Angular 등이 주된 기술로 자리잡았으며 React가 가장 각광받고 있다.

 

서버 사이드 렌더링은 서버에서 모든 것을 처리한 후에 HTML 파일을 전송하는 방식이다. 서버 과부하나 TTV-TTI 등의 문제가 있지만 프런트엔드까지 구현하기에는 역부족이기에 일단 서버 사이드 렌더링으로 웹 사이트를 보여주고자 한다.

 

핸들바

서버 사이드 렌더링에 사용할 HTML 템플릿 엔진으로는 Pug(Jade), EJS, Nunjucks 등이 있다. 템플릿 엔진은 특정 템플릿 양식에 데이터를 삽입하여 HTML로 전환할 수 있게 해주는 툴이다. 이번에는 여러 번 사용해본 Handlebars를 다시 사용해서 구현해보도록 한다. npm을 통해서 설치하도록 한다.

 

npm i express-handlebars

 

이후 메인 파일로 돌아가서 아래와 같이 스크립트를 입력한다.

 

 

import expressHandlebars from "express-handlebars";

...

app.engine("handlebars", expressHandlebars.engine());
app.set("view engine", "handlebars");
app.set("views", "./views");

 

위와 같이 익스프레스에 handlebars가 템플릿 엔진임을 저장하고, views 폴더가 어디에 위치하였는지도 저장한다.

 

이렇게 해도 되는데, 기본 레이아웃을 설정하면서 뷰를 저장하는 방법도 있다.

 

app.engine(
  "handlebars",
  expressHandlebars.engine({
    defaultLayout: "main",
  })
);
app.set("view engine", "handlebars");

이렇게 하면 기본 레이아웃을 설정하면서 뷰의 위치가 저장되므로 따로 뷰 폴더를 정하지 않아도 된다. 하지만, 폴더 명은 views, 레이아웃은 views/layouts 에 저장해야만 한다.

 

레이아웃

레이아웃은 기본적인 사이트의 구조이다.

 

옥션이나 교보문고 등을 보면 사이트에서 다른 사이트로 이동하더라도 기본적인 틀 자체는 변하지 않는다. 이런 것처럼 여러 사이트에서 공통적으로 사용하는 사이트 양식을 레이아웃이라고 한다. 레이아웃을 설정하면 조금 더 효율적으로 뷰를 작성할 수 있으며, 수정이 용이하다.

 

기본적으로 필요한 것들을 미리 작성하도록 했다.

 

head에 메타데이터들을 저장해주고, css를 지정한다. body에는 {{{body}}}라는 값을 넣었는데, 이는 우리의 메인 컨텐츠가 담길 부분이다. 이제 루트 라우트로 접속했을 때 표시할 HTML을 작성해보자.

 

이렇게 해서 https://localhost:3000/ 에 접속하면 화면에 Hello World!라는 글을 띄우게 된다.

 

그러면 모든 과정을 마쳤으므로 본격적으로 렌더링을 하도록 한다.

 

경로에 따른 렌더링

 

라우트 파일로 이동하여 뷰 엔진에 렌더링할 수 있도록 코드를 작성한다.

 

단순히 접속하는 것이기에 get 메서드를 사용한다. 이때 응답에 대한 렌더링으로 home 파일을 사용하였다. 이때, layout이 기본적으로 views/layouts/main.handlebars로 지정되어 있으므로 따로 지정할 필요는 없다. main.handlebars말고 다른 레이아웃을 사용하기 위해서는 매개 변수를 두 개 사용하며 두 번째 인자로 layout을 프로퍼티로 하고 값을 변경하여 다른 레이아웃을 불러온다.

 

예를 들어, test.handlebars 라는 레이아웃과 연동하고 싶다면

app.get("/path", (req, res) => {
	res.render("views", { layout: "test" });
});

이렇게 작성해준다. 실제로 테스트 해보면 아래와 같은 화면이 나온다.

 

당연히 layouts 폴더에 test.handlebars 라는 파일이 있어야 하며, 그 파일에 메인 콘텐츠가 담길 {{{body}}} 을 작성해주어야 가능하다.

 

물론 css로 HTML 을 꾸미는 것도 필요하지만, 당장에는 필요하지 않고 백엔드 기술 구현이 우선이기 때문에 다음에는 서버에 필요한 미들웨어들을 설정해보도록 하겠다.