Pug
Getting Started – Pug
Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an arg
pugjs.org
express에서 view 를 담당하는 방식 중 하나.
express에서 HTML을 전달할 수 있는데 이게 view 파트이다.
템플릿 언어. express의 view engine으로 사용.
HTML과 CSS 만으로 작업을 할 경우, 이들은 프로그래밍 언어가 아니기 떄문에 논리적인 작업들을 할 수가 없다. 하지만 pug를 사용할 경우 JavaScript를 이용하여 HTML 문서 작업이 가능하다.
HTML과 다르게 <>를 쓰지 않고, 들여쓰기( 탭 1칸 혹은 스페이스 4칸 )을 사용한다. 태그를 닫을 필요 없이 태그가 종료되는 위치로 이동하면 된다.
설치
npm i pugapp.set()
express application 중 하나로 특정 이름을 지정시 서버 설정을 할 수 있다.
app.set("view engine", "pug");여기서 'view engine' 속성을 통해 'pug '를 설정할 수 있다.
viewsString or Array A directory or an array of directories for the application's views. If an array, the views are looked up in the order they occur in the array. process.cwd() + '/views'
'view' 속성의 경우 view 단의 디렉터리를 지정할 수 있는데, 기본 설정은 '/views' 이므로 이 위치에 view 파일들을 생성한다. 따라서 '/view' 에 pug 확장자의 파일을 생성한다.
//Before
const home = (req, res) => res.send("Home");
//After
const home = (req, res) => res.render("home");기존에 이런 식으로 'Home' 이라는 text를 전달 했다고 한다면 이제는 파일을 전달한다. 파일명을 적으면 기본 설정인 views 디렉터리에서 pug 확장자로 끝나는 해당 파일을 찾아 렌더링한다.
//home.pug
p hello그러면 이전에는 body 태그에 text만 들어갔지만, 이제는 지정된
태그가 전달되게 된다.
<!--before-->
<body>Home</body>
<!--after-->
<body>
<p>hello</p>
</body>'JavaScript' 카테고리의 다른 글
| Pug Partial (0) | 2020.02.24 |
|---|---|
| Pug 레이아웃 (0) | 2020.02.24 |
| Middleware part 2. (0) | 2020.02.20 |
| Middleware part 1. (0) | 2020.02.20 |
| Babel (0) | 2020.02.20 |
댓글