현재 문자열만 return하고 있다. 그래서 HTML로 return을 해보겠다.
두가지 옵션이 있다.
export const trending = (req, res) => res.send("Home Page Videos");res.send("")안에 다가 HTML의 문자열을 써서 보내는 방법이 있다.
browser가 그 HTML을 실행해서 보게 된다.
res.send("<h1>Hello~!</h1>");이런식으로 작성을 하게 되면 browser가 HTML로 실행하게 된다.
하지만 문제가 있다. 만들려고 하는 페이지는 절대 작은 사이즈의 사이트가 아니다.
일일이 저런식으로 지정을 할순없다. (타이틀 지정 부터 들어가야 할게 너무 많아진다.)
다른 한가지 방법은 pug를 이용하는 방법이다.
pug는 탬플릿 엔진이다. 템플릿을 이용해서 뷰를 만드는걸 돕는다.
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
elsep Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.이런식으로 작성만 해주면 변환을 알아서 해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pug</title>
<script type="text/javascript">
if (foo) bar(1 + 5)
</script>
</head>
<body>
<h1>Pug - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
</div>
</body>
</html>이런식으로 말이다.
설치를 해준다.
npm i pug
그 다음 해줘야 할건 express에게 html 헬퍼로 pug를 쓰겠다고 하는거다.
express 공식 문서를 보면 app을 가지고 할수 있는게 있다.
app이 있으면 app에서 원하는 어떠한 것이든 설정할수 있다.
중요한 것 중 하나는 view engine을 설정할수 있다는 것이다.
server.js에다가
app.set("view engine", "pug");작성 해주면 된다.
기본적으로 express는 여기 있는 views 폴더 안에 있는 파일을 찾는다.
src폴더 안에 views 폴더를 새로 만들어 준다.
그안에다가 home.pug를 만들어 준다.
그리고 내용을 작성해 준다.
doctype html
html(lang="en")
head
title Wetube
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
body
h1 Welcome to Wetube
footer © 2022 Wetube이제 pug로 파일을 보내면 pug가 해당 파일을 html로 변환해 준다.
videoController.js로 가서 수정해 준다.
export const trending = (req, res) => res.render("home");이제 home.pug을 렌더링 하게 되었다.
이제 express는 pug를 쓴다는걸 안다.
app.set("view engine", "pug");server.js에다가 썼기 때문이다.
그래서 따로 import 할 필요 없다.
express가 view 디렉토리에서 pug 파일을 찾도록 설정 되어 있기 때문이다.
그런데 http://localhost:4000/ 가보면 에러가 뜨는게 보일것이다.
Error: Failed to lookup view "home" in views directory "
view 디렉토리에서 "home" 이라는 view를 찾는데 실패 하였다고 뜬다.
에러를 자세히 살펴 보면 폴더 지정위치가 이상하다.
Documents/wetube/views
필자는 분명 폴더를 이렇게 만들었다.
Documents/wetube/src/views
express는 기본적으로 현재 작업 디렉토리 폴더안의 views를 찾아서 그렇다.
현재 작업 디렉토리가 어디를 가리키고 있는지
console.log로 확인해 본다.
console.log(process.cwd());Documents/wetube
어디서 node.js 를 작동 시키고 어디에서 server를 기동하는지에 따라 결정된다.
그건 바로 package.json이다.
Documents/wetube 폴더에서 package.json이 node.js를 실행 시키고 있다.
