[JavaScript, Node.js] 유튜브 클론 정리 5장 (1) - HTML, Pug

머리글

오늘은 라우터를 통해 HTML 페이지를 렌더링 하는 방법을 알아보자.

HTML 렌더링

라우터를 통해 Html을 리턴하는 방법에는 2가지가 있다.

1. res.send(HTML 내용) 을 통해 렌더링 하는 방법

const see = (req, res) => res.send("<h1>Hi!</h1>");

이런 방식으로 렌더링이 가능하지만, Html의 소스 코드가 복잡해질수록 불편한 방법이 될 것이다.

2. Pug를 사용해서 렌더링 하는 방법

Pug는 템플릿 엔진이다.
템플릿을 통해 view를 만드는 작업을 도와준다.

우선 Pug를 설치하자.

npm i pug

그리고 express가 html 헬퍼로 pug를 사용하게 설정해줘야 한다.

서버 파일로 가서 다음 세팅을 해주자.

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

그리고 views에 대한 설정도 해주자.
기본적으로 express는 현재의 디렉토리의 '/views'라는 디렉터리를 찾게 되어있다.
우리는 src폴더에서 작업중이므로 src폴더에 views라는 폴더를 생성해 주자.

그리고 views 폴더에 home.pug라는 파일을 생성하자.
pug의 작성법은 공식 페이지를 통해 확인하자.
https://pugjs.org/api/getting-started.html

Getting Started – Pug

 

그렇다면 유저는 어떻게 홈페이지를 볼 수 있을까?
우선 우리가 작업을 완료한 파일을 pug에 보내면,
pug는 이 파일을 평범한 html로 변환한다.

home.pug 파일이 작업이 완료되었다고 가정하고,
렌더링 해보도록 하자.

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

아까와 크게 차이가 없지만 우선 'render'라는 함수를 사용했다.
그리고 "home"라는 argument를 넣어줬는데,
이는 "home.pug" 파일을 의미한다.
만약 파일 이름이 "see.pug"라면,

const see = (req, res) => res.render("see");

이러한 방식으로 사용이 가능하다.

그리고 홈페이지로 접속해 보면 에러가 뜬다.
이는 현재 경로에서 views 폴더를 찾게 되는데,
우리의 현재 경로는 src 폴더가 아닌 src폴더의 상위 폴더로 잡힌다.

console.log(process.cwd());

이 경로는 서버를 기동 하는 파일의 위치에 따라 결정된다.

경로 설정이 잘못되어 있어서 에러가 뜨게 되는데 이 경로를 수정해 주도록 하자.

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

설정이 완료되면 페이지가 정상적으로 렌더링 되게 된다.

 

마무리

이번 시간에는 라우터에서 Html 페이지를 렌더링 하는 방법과, pug의 기본 세팅에 대해서 알아보았다.

다음 시간에는 반복 작업을 피하기 위한 pug의 Partials에 대해서 알아보자.