노드 js 입문 공부 일지 7. express 뷰 엔진, PUG 설치하기

 

 

뷰 엔진은 express 어플리케이션이 사용자에게 페이지를 줄 수 있도록 도와주는 도구입니다. 

뷰 엔진은 정적인 HTML 인 문서와 달리 자바스크립트 데이터를 문서 안에 포함하는 형태로 동작합니다.

즉, 뷰 엔진은 지금까지 페이지 하나로 확인하던 정적 엔진과 다르게 동적 템플릿 엔진입니다. 

 

우선 정적 메소드부터 확인해볼게요. 

 

express 의 sendFile(x) 메소드를 사용하면 정적 문서를 클라이언트에게 제공할 수 있습니다. 

더불어 정적 문서의 경로를 지정할 수도 있습니다. 

정적static  문서라는 것은 지금까지 우리가 만들었던 것중에 html과 css로 만들었던 단편적인 페이지를 생각할 수 있습니다. 요청이 있고, 응답을 할 때마다 새로운 정적 페이지를 링크해서 옮겨가는 형식이었어요. 

 

// 정적 경로를 지정하는 static 메소드 
app.use("/page", express.static (__dirname + "/views/index.html"))

//정적 파일을 제공하는 sendFile 메소드 
myRouter.get("/", (req, res) => {
res.sendFile(__dirname + "/views/index.html")

 

그와 반대로 동적 템플릿의 경우 하나의 페이지 안에서 연속적으로 데이터가 연결되어서 동적인 결과를 보이는 것으로 

자바스크립트로 작성했던 것 중 타이머 기능을 포함한 디지털 시계같은 것이라고 생각하면 됩니다. 

html css로는 정적으로 멈춘 시계를 만들었다면, 자바스크립트로 디지털 시계를 만들어서 실시간으로 움직일 수 있게 데이터를 연결했어요. 

 

이것과 비슷하게 뷰 엔진은 정적인 문서 안에 자바스크립트의 데이터를 포함해서 동적인 템플릿을 부여하는 것이라고 보시면 됩니다. 

 

대표적인 뷰 엔진은 두 가지입니다. 

- EJS

- PUG

 

EJS 

EJS는 HTML 문법을 그대로 사용하고 추가로 자바스크립트 문법을 적용할 수 있는 뷰 엔진입니다.

모듈 설치 후에 express 의 set(x) 메소드를 이용해서 뷰 엔진 설정을 해주어야 사용 가능합니다. 

 

우선 터미널에서 npm install ejs 키워드를 입력해서 모듈을 설치합니다. 

이후에 문서의 앞에 express 메소드를 입력합니다. 

 

app.set("프로젝트명", __dirname + "/프로젝트가 있는 폴더") 
app.set("view engine", "ejs")

 

여기서 참고할 사항!

__dirname 는 main.js(쓰고있는 자바스크립트 파일)의 현재경로를 말합니다.

이번에는 EJS 대신 PUG 퍼그를 사용해볼 것이라 EJS는 사용법만 알아보고 정리할게요. 

 

PUG 

PUG는 EJS와 비슷한 역할을 하지만 문법이 다릅니다. 

PUG의 문법적 특징은 다음과 같습니다. 

 

- 태그는 열리고 닫히지 않는다. 태그명이 쓰일 뿐이다. 
- 태그명 뒤에 공백없이 내용을 기입하면, 이는 속성이거나 태그명이다. 
- 식별자 역할을 하는 속성(id, class)은 기호를 사용해 추가할 수 있다. 
- 태그와 태그의 관계는 오직 들여쓰기만으로 표현한다(열리고 닫히는 태그가 없으므로) 
- 예외적으로, div 태그는 태그명조차 쓰지 않아도 된다. 
- style 태그 또한 여느 태그와 동일하게 작성하나, css 문서임을 명시해주어야 한다.

 

PUG를 설치해서 하나씩 알아볼게요. 

 

PUG 설치하기 

우선 터미널의 명령어로 PUG를 설치해줍니다. 

 

npm install pug --save

 

그리고 프로젝트 폴더에서 views 디렉토리에 index.pug 라고 하는 이름의 파일을 생성해줍니다. 

pug 확장명을 쓰면 아이콘이 귀여운 빨간 퍼그 강아지로 바뀌어요. 

 

 

이제 index.js (노드 js) 에서 view engine 을 pug로 설정해주어야 합니다. 

아래와 같이 입력해주세요. 

 

app.set("views", __dirname + "/views")
app.set("view engine", "pug")

 

이제 pug 에 대한 사용 준비가 되었습니다. 

index.pug로 가서 입력해봅니다. 

 

 

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title 나의 첫 번째 퍼그 문서    
        
        //- 태그가 열리고 닫히지 않습니다. 태그 명만 쓰입니다. 
        //- 태그명 뒤에 공백 없이 내요을 기입하면 속성이거나 태그명입니다.
        //-  style 태그 또한 동일하게 작성하나 css 문서임을 명시해야합니다. 

        style(type="text/css").                       
            .box{width : 100px; height : 100px;
            background : tomato;}
    body 
        p#text.text 퍼그는 간단해서 좋네...  
        
        //- id와 class는 기호를 사용해서 추가합니다. #아이디 .클래스 
        //- 태그와 태그의 관계는 오직 들여쓰기로만 표현합니다. 
        
        p(id="text", class="text") 간단하네.....,,,,,
        .box

 

 

노드의 실행은 동일하게 명령어를 입력해서 사용합니다. 

 

 

 

실행화면은 다음과 같습니다. 

 

 

여기까지 뷰 포트 중 pug 에 대해서 살펴보았습니다.

이 다음에는 웹소켓에 대해서 정리하겠습니다.