[Png] Pug에 대해 알아보자

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

그럼에도 불구하고

👨‍💻

[Png] Pug에 대해 알아보자 본문

Node.js/Template engines

[Png] Pug에 대해 알아보자

zenghyun 2023. 2. 8. 21:58

오늘은 pug에 대해 알아보자 :)

[ 템플릿 엔진 ]

웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다.

정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.)

템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. )

템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다.

즉 Pug는, HTML을 Pug 문법으로 작성하여 HTML로 바꿔주는 기능을 한다.

[ Pug 설치 & 사용법 ]

Pug는 Express의 패키지 view engine이다.

$ npm install pug

Pug를 사용하려면 Express와 연결해야 하는데 다음과 같이 연결하면 된다.

위의 사진은 node.js를 기반으로 작성하고 있는 소스코드이다.

shop.html 파일을 shop.png 파일로 바꿀 예정이다.

app.js에서 다음과 같이 작성한다.

app.set을 사용하면 Express 애플리케이션 전체에 어떤 값이든지 설정할 수 있으며, Express가 이해할 수 없는 키라던가 구성 항목도 포함된다.

또한, app.get을 사용하면 app 객체에서 읽을 수 있으며, 애플리케이션에서 데이터를 공유하는 한 방법이 될 수 있다.

※ View Engine

Node.js에는 View Engine이라는 시스템이 있다.

View Engine은 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해 주기 위해 사용한다. View Engine에서 요구하는 형태로 템플릿 파일(문서)을 만들고, 해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다.

또한, View Engine에서 요구하는 문법에 맞춰 코드를 작성하면 View Engine이 자동으로 HTML 파일로 렌더링 해주기 때문에 HTML 파일보다 좀 더 간결하고 구조 분석이 쉬운 형태로 코드를 작성할 수 있다.

views는 내가 저장할 폴더를 설정하는 것이며 pug가 있는 폴더가 views이기 때문에 그대로 적은 것이다. 만약 폴더 이름이 templates라면 templates라고 적으면 된다. (폴더 경로 지정)

[ Pug 특징 ]

1. HTML에서 쓰이는 닫는 태그가 없다 ( </head>, </body>, </title> 등 )

※ 들여쓰기로 어디서부터 어디까지인지 구분하기 때문에 닿는 태그를 적을 필요가 없다.

2. 들여쓰기 한 이후에 공백까지가 태그로 된다.

3. 태그 사이가 아닌 태그의 속성을 넣으려면 () 괄호를 사용한다.

ex) html(lang="ko"), script(type="text/javascript")

4. 여러 줄 입력할 때 ( | )로 작성한다.

5. HTML과 마찬가지로 id 입력할 때는 #, class 입력할 때는. 을 입력한다.

[ Pug 작성 및 실행 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
html(lang="ko")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title My Shop
        link(rel="stylesheet", href="/css/main.css")
        link(rel="stylesheet", href="/css/product.css")
    body
        header.main-header
            nav.main-header__nav
                ul.main-header__item-list
                    li.main-header__item
                        a.active(href="/") Shop
                    li.main-header__item
                        a(href="/admin/add-product") Add Product
cs