[일곱번째] Node.js 기본 / Template Engine, Jade 동적 파일 제공

템플릿 엔진

어떠한 기술 '들'을 의미한다. 상품군

많은 훌륭한 템플릿 엔진들이 있지만 우선 Jade에 대해 알아보도록 하자.

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

express 와 jade 를 연결하는 코드로

view engine 으로 jade를 사용하겠다는 뜻이다.

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

관습적으로 템플릿 파일을 views라고 명명한 폴더에 모아둔다.

res.render('upload');

이런식으로 views 폴더에 있는 파일을 렌더링 한다.

소스코드를 가지고 와서 웹페이지를 만들어내는 것도 일종의 렌더링

Jade 문법을 알기 위해 홈페이지에 접속을 하게 되면 Main페이지에서 딱 두 개의 소스코드 페이지를 제공한다.

http://jade-lang.com/

doctype html

html(lang="en")

  head

    title= pageTitle

    script(type='text/javascript').

      if (foo) {

         bar(1 + 5)

      }

  body

    h1 Jade - node template engine

    #container.col

      if youAreUsingJade

        p You are amazing

      else

        p Get on it!

      p.

        Jade is a terse and simple

        templating language with a

        strong focus on performance

        and powerful features.

HTML 문서를 대충 볼줄 안다면 대충 감이 올것이다.

Jade에서 문서를 작성할 때 Jade의 문법이 어색하여 헷갈린다면 다음 방법을 사용한다!

1. Jade에서 문서를 작성하고 작성 중인 문서를 렌더링시켜서 접속을 한다.

2. 페이지의 요소 검사로 해당 페이지의 코드를 본다.

3. 그런데 코드들이 전혀 정리가 되있지 않다! 

4. 바로 구글 검색을 한다. 검색어는 jade express code pretty 로 한다.

5. app.locals.pretty = true; //jade 파일을 이쁘게 만들어 준다. 바로 검색됬을 것이다.

6. 소스코드에서 jade 문서가 등장하기 전에 적절한 곳에 카피 앤 페이스트 해준다.

7. 페이지 요소를 새로고침해보니 보기 좋게 들여쓰기가 되어있다!

8. 문서 작성을 이어서 한다!

Jade Template Engine 의 규칙

탭키(들여쓰기) - 태그의 레벨이 정해진다. 띄어쓰기 말고 Tab을 해야 한다.

줄바꿈을 하면 새로운 태그가 시작된다.

태그에 속성을 추가하기 위해서는 () 안에 속성을 넣어준다.

p 태그는 화면 전체를 사용해서 자동 줄바꿈이 된다.

Jade도 마찬가지로 홈페이지에서  사용설명서(Docs)를 제공하고 있다.

템플릿 엔진으로 Jade를 사용할거면 따로 공부하면 된다.

생활코딩 감사합니다^^

-..-