[WEB] Pug

HTML을 리턴하는 방법은 두 가지 옵션이 있다

res.send("<h1>Hello!</h1>")으로 HTML 문자열을 그대로 보내는 방법

하지만 보내려는 HTML 코드 양이 많아지면 가독성도 떨어지고 보기에도 안 좋다

 

그 해결방안으로 나온 것이 Pug!

 

pug는 템플릿을 이용해서 view 만드는 것을 돕는 템플릿 엔진이다

 

실행하고 있는 프로젝트 터미널에 npm i pug 설치

 

app.set("view engine", "pug");

 

express에게 이제부터 사용할 view engine은 pug라고 말해주기 

 

express는 view 폴더 안에 있는 파일을 찾기 때문에 초기 세팅도 고쳐주어야 한다

express 튜토리얼 홈페이지에 나와있는 설명을 보면

기본적으로 process.cwd() + 'views' express가 뷰를 찾는 방법이다'

 

따라서 pug 파일은 view 폴더를 만든 뒤 그 안에 생성하도록 하자

 

위의 사진은 임시로 만들어본 pug 파일 경로와 안에 내용이다

 

그럼 생성한 pug 파일을 어떻게 유저에게 보낼까?

개발자에게는 바로 유저에게 보내지는 것처럼 보이지만

파일이 유저에게 가는 경로는 우선 작성한 코드를 pug로 보내고 pug가 렌더링 해 평범한 html 코드로 변환해준다

 

pug 파일 리턴 방법

export const trending = (req, res) => res.render("home");

 

res.render()로 view 이름을 넣어 렌더링 한다

express가 views 디렉토리 안에 있는 pug 파일 중 home.pug를 찾아 사용자 화면에 보여준다

 

여기서 잠깐!

하지만 웹을 실행해보면 경로에 따른 에러가 발생한다

기본적으로 express는 cwd + /views에서 pug 파일을 찾아 코드를 보여주는데

우리가 렌더링 할 파일은 cwd/src/views에 있다

 

따라서 app.set() 설정을 바꿔주자

app.set("views", process.cwd() + "/src/views");

 

그럼 정상적으로 웹 화면이 실행되는 것을 볼 수 있다