Node.js - express (2) 템플릿 엔진 사용하기

 

 

이번 포스팅에서는 express를 이용해 웹서버를 구축할 때 템플릿 엔진을 사용하는 방법에 대해 알아보도록 하자. 템플릿 엔진으로는 nunjucks를 사용하고자 한다.

 

 

< 목차 >

1. 템플릿 엔진 nunjucks
2. nunjucks 세팅하기
3. 템플릿 엔진을 이용해 변수 다루기

 

 

 

< 템플릿 엔진 nunjucks >

템플릿 엔진에는 ejs, pug, jade, nunjucks 등등 다양한 종류의 템플릿 엔진이 있다. 우리가 사용할 템플릿 엔진은 이러한 여러 템플릿 엔진 중 nunjucks라는 녀석이다. 템플릿 엔진을 사용하는 이유는 HTML 파일을 만들어 주기 위해서이다. 앞서 우리가 express를 이용해 요청이 들어온 웹브라우저에게 응답을 보낼 때는 res.send() 메소드를 사용해 웹브라우저에게 랜더할 페이지의 내용을 작성하여 보냈었다. 우리가 제작한 웹페이지를 express를 통해서 넣으려고 할 때 이렇게 res.send()의 인자값으로 해당 HTML 내용들을 전부 작성해 넣는 건 무척 불편한 일이다.

 

템플릿 엔진을 사용하면 express를 사용하여 서버를 구축할 때 HTML의 영역과 서버의 영역을 구분해서 작업할 수 있다. 즉, HTML이 하는 역할 부분과 express가 하는 역할 부분을 구분해서 작업하기 위해 우리는 템플릿 엔진을 사용한다. res.send() 의 인자값으로 랜더할 웹페이지의 모든 HTML 내용을 넣는 것이 아니라 HTML 파일만을 인자값으로 넣어 해당 HTML 파일이 랜더될 수 있도록 한다면 훨씬 편하게 작업을 진행할 수 있기 때문이다. 

 

nunjucks는 express와 같은 외부 라이브러리이기 때문에 우선 vsCode(Visual Studio Code) 에디터의 터미널에서 "npm install nunjucks --save"를 입력해 패키지 설치를 진행해주도록 하자. 주의할 점은 express 패키지를 설치할 때와 마찬가지로 우리가 작업하고 있는 디렉토리 안에서 설치를 진행해 주어야 한다는 점이다.

 

설치가 완료된 후 package.json 파일을 살펴보면 위와 같이 "dependencies" 항목에 "nunjucks"가 추가된 것을 확인할 수 있다. package.json 파일의 "dependencies" 항목을 통해 현재 우리가 사용하고 있는 외부 라이브러리 리스트들을 살펴볼 수 있다.

 

 

 

< nunjucks 세팅하기 >

npm install nunjucks --save를 입력해 nunjucks 패키지를 설치했다면 require() 함수를 사용해 nunjucks 모듈을 가져오는 작업을 진행해줘야 한다. 아래와 같이 express 세팅이 완료된 상태에서 nunjucks 모듈을 가져오는 구문을 추가하자.

const express = require("express")
const app = express()

app.get("/express", (req, res)=>{
    res.send("<h1>Hello express</h1>")
})

app.listen(3000, ()=>{
    console.log("server onload")
})

// nunjucks 모듈 가져오기

const nunjucks = require("nunjucks")

그리고 app.set() 메소드와 nunjucks.configure() 메소드를 사용해 express에서 nunjucks를 사용하기 위한 세팅 작업을 진행해주도록 하자.

// nunjucks를 사용하기 위한 express 세팅

app.set("view engine", "html")
nunjucks.configure("./views", {
    express: app
})

app.set() 메소드의 첫번째 인자값으로는 "view engine"을, 두번재 인자값으로는 "html"을 넣어준다. 이는 템플릿 엔진을 사용하겠다는 의미이고 템플릿 엔진의 파일 형식이 html이라는 뜻이다. nunjucks.configure()의 첫번째 인자값으로 들어간 "./views"는 디렉토리 경로를 뜻하고 있으며 이는 현재 디렉토리에 있는 views 폴더 안에 html 파일들을 넣어두고 관리하겠다는 의미이다. 두번째 인자값으로 들어간 객체에는 express: app이라는 내용을 담아서 express가 app 객체라는 내용을 알려주면 된다.  

 

세팅 작업을 마쳤다면 nunjucks.configure()의 첫번째 인자값으로 전달한 "./views" 내용대로 현재 디렉토리 안에서 html 파일들을 관리할 views 폴더를 생성해주고 해당 폴더 안에 html 파일을 생성해주면 된다.

 

마지막으로 res.send() 부분을 수정해 템플릿 엔진을 이용해 작성한 html 파일을 랜더해주도록 하면 된다. res.send()의 send() 메소드는 string 자체를 인자값으로 받아서 랜더해주는 메소드이기 때문에 템플릿 엔진을 사용할 경우 send() 메소드를 사용해 응답을 처리하면 제대로 작동하지 않는다. 템플릿 엔진을 사용할 떄는 res.render()를 사용해 인자값으로 html 파일을 넣어줘야 한다. 반드시 템플릿 엔진을 불러올 수 있는 메소드인 render()를 사용해야 한다.

 

이제 views 폴더 안에 있는 index.html 파일에 다음과 같은 내용을 작성하고 콘솔창에 node express.js를 입력해 서버를 실행시켜보자.

 

실행 결과

"/express" 경로로 접속했을 때 res.render("index.html")에 의해 우리가 작성한 html 파일이 제대로 랜더되는 것을 확인할 수 있다. 

 

지금까지의 과정을 요약하면 다음과 같다.

 

• 설치 -> npm install nunjucks --save
• 세팅 -> app.set( ) , nunjucks.configure( )
• 폴더 생성 -> nunjucks.configure("./views", { }) 의 첫번째 인자값과 똑같은 폴더명을 가진 폴더 생성
• response 객체에서 send( ) 메소드가 아닌 render( ) 메소드를 사용

 

 

 

 

< 템플릿 엔진을 이용해 변수 다루기 >

위에서 살펴본 바로는 웹브라우저에서 웹서버로 요청을 보냈을 때 우리의 웹서버는 res.render("index.html")에 의해 요청에 대한 응답으로 html 파일을 웹브라우저에 보내게 된다. 하지만 웹페이지를 제작할 때 우리는 html 파일 안에서 무수히 많은 변수들을 사용하게 된다. 그렇다면 웹서버가 웹브라우저에게 html 파일을 건내줄 때 어떻게 해야 변수를 포함시켜서 보낼 수 있을까? 이 때 우리의 템플릿 엔진이 빛을 발하게 된다. JavaScript 파일 안에서 생성된 변수들을 html 파일에 담아 웹브라우저에게 건내주는 작업을 해주는 것이 바로 템플릿 엔진이 가지고 있는 또 하나의 기능이기 때문이다.

 

express가 템플릿 엔진에게 변수를 던져주면 템플릿 엔진 nunjucks는 express로부터 변수를 받아서 html 파일을 다시 작성한다. 그리고 그렇게 완성된 html 파일을 다시 express에게 건내주고 express는 nunjucks가 만들어준 html 파일을 웹브라우저에게 건내주게 되는 것이다. 코드를 살펴보면서 조금 더 이해해보도록 하자.

 

express.js 파일 안에서 date라는 변수를 생성하고 "2022.02.03"이라는 내용을 담았다. 우리는 이 변수에 담긴 "2022.02.03" 이라는 정보를 index.html 파일 안에서도 사용하고 싶은 경우가 생길 수 있다. 이 때 템플릿 엔진이 가진 기능을 이용하면 손쉽게 html 파일 안에서 변수를 사용할 수 있다.

 

다음과 같이 res.render() 메소드의 두번째 인자값으로 객체를 전달함으로써 index.html 파일 안에서 변수를 사용할 수 있다.

app.get("/express", (req, res)=>{
    let date = "2022.02.03"
    res.render(`index.html`, {
        today: date
    })
})

res.render() 메소드의 두번째 인자값으로 들어간 객체는 js 파일 안에서 사용된 변수들에 관한 정보를 담고 있는 객체이다. { today: date } 객체는 today라는 변수에 date의 정보를 담겠다는 내용을 가지고 있는 객체인 것이다. 두번째 인자값으로 전달된 객체를 통해 date의 정보를 담고 있는 today라는 변수가 index.html 파일로 넘어오게 된다. 이제 nunjucks에서 사용하는 문법을 활용해 index.html 파일 안에 변수를 넣어주면 된다. html 파일 안에서 변수를 넣고자 하는 위치에 이중 중괄호 {{  }}를 사용해 js 파일에서 지정한 변수명을 작성해주면 된다.

 

nunjucks는 인자값으로 전달받은 객체의 내용을 토대로 html 파일 안에서 작성된 변수들을 해석하고 html 파일을 다시 만들게 된다. 터미널 창에 node express.js 를 입력해 서버를 실행한 후 localhost:3000/express 경로로 접속하면 다음과 같은 화면이 웹브라우저에 랜더되는 것을 확인할 수 있다.

 

페이지 소스 보기를 해서 html 파일을 살펴보면 다음과 같이 {{ today }} 자리에 "2022.02.03"이 작성되어 있는 것을 확인할 수 있다. 우리가 html 파일 안에서 작성한 코드 형태가 아닌 "2022.02.03" 라는 내용 그대로 html 파일 안에 표현되어 있는 것이다. 이를 통해 nunjucks에서 index.html 파일 안에서 사용된 변수들을 해석해서 html 파일을 다시 만들어줬다는 것을 알 수 있다.