Express View engine - PUG (1)

PUG

HTML 코드를 간략하게 표현하게 도와주는 템플릿 엔진이다. 우리가 pug로 작성한 코드는 html 코드로 변환되어서 유저들에게 보여진다.

pug 설치하기 ---  npm i pug 

Express 설정하기 --- app.set("view engine", "pug")  // express에서 view engine을 pug로 설정

view폴더 생성 --- 하위 파일로 ###.pug 생성

 

PUG 좋은점

1. html코드를 보다 깔끔하게 작성하는 것을 도와준다.

2. html에 자바스크립트를 포함시킬 수 있다.

3. 반복하지 않고 한 파일로 탬플릿을 업데이트할 수 있다. *include

PUG 작성방법

모든 코드는 소문자로 작성하고 속성은 괄호, 부모보다 2칸 또는 탭만큼 안쪽으로 들어가 있어야한다. 

 

PUG 불러오기

express 에서 view engine을 설정 했기 때문에 import를 할 필요가 없다. 페이지가 필요한 곳에서 res.render("view's name"); 하면 렌더링을 해준다.

 

 

에러발생

 

 

express는 현재 디렉토리에서 views 폴더를 찾아 pug 페이지를 보여준다. 현재 views 폴더 생성 위치는(wetube/src/views). 위와 같은 에러가 발생한 이유는 express가 /wetube/views 디렉토리에서 찾기 때문이다. 현재 작업 디렉토리는 서버를 시동하거나 node.js를 실행하는 디렉토리이다. 그래서 package.json이 실행되는 디렉토리가 현재 작업 디렉토리로 설정되어있다. (/wetube가 현재 작업 디렉토리가 된다.)

 

해결방법

 

#1. views폴더를 /wetube/views 맞게 이동한다.  단점 : src폴더와 views폴더가 나눠지게 된다.

#2. express views 파일 위치 설정 디폴트값을 변경한다. app.set("views", precess.cwd() + "/src/views");

 

 

---

*참고자료

 

# 1. express는 기본적으로 view 폴더 안에 있는 파일을 찾기 때문에 view 폴더를 생성해야한다.

 

Express 4.x - API 참조

 

# 2. express는 cwd(현재 디렉토리) + /views에서 pug를 찾는다.

console.log(process.cwd()) 하면 현재 디렉토리를 알 수 있다.

 

# 3. express로 서버를 만들면 http header 부분에 x-powered-by 표시된다. 

false로 바꾸면 표시가 안된다. default 값은 true