Express- jade 설치 및 간단한 문법 사용법

Express의 jade를 사용해 볼 것인데 , 

설치는 다음 사이트를 참고하면 좋다 . 

https://www.npmjs.com/package/jade

---

문법 사용법은 다음 사이트를 참고 하면 좋다 .

http://jade-lang.com/ 

---

코드를 보면서 확인해 보자 . 

환경 설정은 다음과 같다 . 

// template engine use & loading

// 환경 설정

app.set('view engine','jade');

app.set('views', './views');

// supervisor : 작성자가 파일을 수정할 떄 , 알아서 재시작을 해줌 .

app.set('views', './views'); 

--> 여기를 보게 되면 , views라는 것이 있는데 , 이 views는 프로젝트내에 따로 폴더를 만들어 준다 . 

views 내에 temp.jade 라는 폴더를 하나 만들어 주고 , 이제 어떻게 사용하는지 알아 본다 . 

views/temp.jade 

html

  head= title

  body

    h1 Hello Jade

    ul

      -for(var i =0 ; i < 5 ; i ++)

        li conding

    div= time

위 코드를 보게 되면 , 이게 뭐지 ?? 라는 생각이 든다 . 

그래서 서버를 열어주고 , node 로 켜본다 . 

키게 되면 다음 코드가 뜰 것이다 . 

Jade

Hello Jade

• conding
• conding
• conding
• conding
• conding

Sat Feb 02 2019 18:21:18 GMT+0900 (GMT+09:00)

위 페이지를 소스 보기를 해서 보면 다음과 같다 . 

그리고 jade에서 javascript문을 사용하기 위해서는 - 을 사용해서 사용할 수 있다 . 

위 코드를 보면 시간과 Jade에 render을 해서 변수를 다루었는데 , 메인 웹 애플리케이션 코드를 보면 다음과 같다 . 

app.get('/template', function(req,res)

{

    res.render('temp', {time:Date(),title:'Jade'});

    // 렌더링한다 .

    // template로 들어온 사용자에게 temp 를 렌더링해서 전송한다.

    // template에 값을 전달해 주고 싶을 때 ,

})

위 코드를 보면 , res.send를 통해서 보통 출력을 했는데 , 

jade를 사용할 때는 render라는 것을 사용한다 . 

매개변수로써 , temp : 즉 temp.jade 파일이고 , 두번째 매개변수로 time 변수 , title 변수가 각각 있으며 , 

이 변수들에 각각의 값을 대입하여서 render을 한 것이다 . 

결국에는 render을 함으로써 , jade 파일에 보내지게 되며 , 사용자가 보게 되는 출력화면에는 

time 과 title 의 변수에는 우리가 넣은 변수의 값이 각각 들어가게 된다 . 

하다 보면 , 서버를 끄고 키고 하는게 귀찮을 수 있다 . 

이때 node로써 서버를 킬 떄 , node 앞에 supervisor 를 붙이게 되면 

이 supervisor가 파일의 수정을 알아채서 , 자동으로 알아채게 된다 .