-
[Node.js] node.js에서 pug 연결WEB/NodeJS 2022. 9. 15. 22:33
pug는 HTML 템플릿 엔진이다. 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 해준다.
HTML과 아주 살짝 다른 문법을 가지고 있다.
1. 닫는 태그 사용 X
2. id는 #container과 같이 #을 입력하고 클래스는 .col처럼 .을 입력
3. 태그 사이가 아닌 태그의 속성으로 넣으려면 () 사용
ex) html(lang='en')
HTML
<!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>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 else p Get on it! p. Pug is a terse and simple templating language with a strong focus on performance and powerful features.다음은 node.js에서 pug를 사용하는 법을 알아보자.
1. pug 다운로드
터미널에 npm i pug 2. 뷰 엔진 설정
express에 뷰 엔진을 pug로 설정 3. views 폴더 안에 pug 파일 생성
- express는 기본적으로 views 폴더 안에 있는 파일을 찾기 때문에 views 폴더 안에 pug 파일 생성
views 폴더 안에 pug 파일 생성 - express는 기본적으로 현재 작업 디렉토리는 노드를 시작하는 디렉토리에서 views 폴더를 찾음
- 다음과 같이 폴더 안에 views 폴더가 있을 경우 app.set('veiws', process.cwd() + "/폴더명/views") 코드 추가
728x90'WEB > NodeJS' 카테고리의 다른 글
[Node.js] Node.js - MySql 연동 (0) 2022.09.19 [Node.js] Express 서버 구축 (0) 2022.09.18 [Node.js] Node.js CRUD(DB 연결X) (0) 2022.09.18 [Node.js] Pug partials (0) 2022.09.17 [Node.js] Node.js 환경설정(VSC) (0) 2022.09.11