[Node.js] express 프로젝트에 핸들바 템플릿 엔진 적용하기
익스프레스 설치
npm i express@4.17.3
npm i mongodb@4.13.0
프로젝트 디렉터리 구조 잡기
보통 모든 기능을 제공하는 풀스택 프레임워크는 디렉터리 구조를 강제한다. (ex)Django) 반면 마이크로 프레임워크는 디렉터리 구조를 강제하지 않는다. 익스프레스 또한 강제하는 부분이 거의 없다.
보편적으로 사용되는 3계층구조 아키텍처(컨트롤러, 서비스, 데이터 엑세스) 를 사용하여 개발
(웹 프레임워크에서 사용하는 MVC 패턴을 적용하기에도 좋음)
- 컨트롤러 : 뷰에서 넘어온 요청을 받아서 권한 체크, 유효성 검증을 한 후에 서비스 계층으로 넘어감
- 서비스 : 비즈니스 로직 처리
- 데이터 엑세스 : 서비스 계층과 데이터를 주고받음
API들이 많지 않으므로 라우터와 컨트롤러 코드는 app.js에 모두 작성한다.
각 모듈에서 설정 파일이 필요한 경우는 configs디렉터리에 모아둔다
핸들바 템플릿 엔진 설치 및 설정
뷰로 웹페이지를 보여주기 위해 템플릿 엔진 '핸들바' 사용
express-handlebars 와 express-hdb 두 버전이 있다. express-hdb는 더 많은 기능을 제공하지만, 전자에 비해 비교적 최근에 공개되었기 때문에 기능이 조금 적더라도 관리가 잘 되고 있는 express-handlebars를 택해 사용 하도록 한다.
npm i express-handlebars
app.js
const handlebars = require("exrpess-handlebars");
...
app.engine("handlebars", handlers.engine()); //템플릿 엔진으로 핸들바 등록
app.set("view engine", "handlebars"); //웹페이지 로드시 사용할 템플릿 엔진 설정
app.set("views", __dirname + "/views"); //뷰 디렉터리를 views로 설정웹 페이지에서 사용할 템플릿 엔진도 설정해야한다. 설정시에는 엔진 설정 시의 이름 handlebar로 설정해준다. 이름을 hbs로 했다면 여기서도 hbs로 해야한다.
main.handlebars
<html>
<head>
<meta charset="UTF-8">
<title>게시판 프로젝트</title>
</head>
<body>
{{{body}}}
</body>
</html>
템플릿 엔진에서는 기본 형태가 되는 템플릿 파일을 선언하고 다른 템플릿에서는 내용(body태그 부분) 만 변경하는 것이 기본 설정이다.
참고 : main 템플릿 설정을 사용하지 않으려면
1. 라우터의 결과 객체에 layout:false를 넣어준다
ex) res.render("home", {title:"안녕하세요", message:"만나서 반갑습니다!", layout:false });
2. handlebars.engine에 layoutDir항목을 추가하여 기본 레이아웃 디렉터리를 변경한다
ex) app.engine("handlebars", handlebars.engine({layoutsDir:"views"}));
views 바로 아래에 다음과 같이 템플릿 코드를 넣어준다. 핸들바는 렌더링 시 {{ 변수명 }}으로 되어있는 부분에 변수의 값을 넣어준다.
home.handlebars
<h2>{{title}}</h2>
<p>{{message}}</p>
localhost:3000접속 -> 페이지 소스 코드를 확인해보면 아래처럼 렌더링 된 것을 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>게시판 프로젝트</title>
</head>
<body>
<h2>안녕하세요</h2>
<p>만나서 반갑습니다!</p>
</body>
</html>
이후 UI 코드 생략 :
- detail.handlebars
- home.handlebars
- write.handlebars
핸들바를 이용해 세 가지의 레이아웃을 작성하였다.
app.js
app.get("/", (req,res)=>{
res.render("home",{title:"테스트 게시판"});
});
app.get("/write",(req,res)=>{
res.render("write",{title:"테스트 게시판"});
});
app.get("/detail/:id",async(req,res)=>{
res.render("detail",{
title:"테스트 게시판",
});
});
* res.render() : 첫 번째 매개변수로 템플릿의 이름을 받고, 두 번째 매개변수로 해당 템플릿에 전달할 데이터 전달