[javascript] jade

Friday. November 16, 2018 - 4 mins

javascript nodejs

jade

jade는 템플릿 엔진의 한 종류이다.

템플릿 엔진을 아주 간단하게 설명하자면,

“html과 javascript를 좀 더 쉽게 작성 할 수 있도록 도와주는 녀석”이다.

얼마나 간결해지는지 예제를 통해 체감해보자.

데이터를 웹브라우저에 표현하기 위해서는 크게 두 가지 방식을 사용할 수 있다.

바로 정적파일을 이용한 방식과 동적파일을 이용한 방식이다.

그 중 html이라는 정적 파일을 이용한 표현 방식은 다음과 같다.

<html>
  <head>
    <title>My Web</title>
  </head>
  <body>
    <ul>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
      <li>welcome</li>
    </ul>
  </body>
</html>

이 예제는 단순히 화면에 welcome 이라는 문자열을 10번 출력해준다.

정적인 파일로도 어느정도 웹브라우저를 표현할 수는 있지만, 파일이 복잡해질수록 한계가 있다.

당장 위 코드만 봐도 <li>welcome</li> 부분이 10번 반복되는 것을 볼 수 있다.

이를 동적인 파일로 나타내면 좀 더 효율적으로 나타낼 수 있다.

html에 javascript의 프로그래밍적 요소가 포함된 동적파일의 예제를 보자.

<html>
  <head>
    <title>My Web</title>
  </head>
  <body>
    <ul>
      <script>
        for(var i=0 ; i<10 ; i++)
          document.writeln('<li>welcome</li>');
      </script>
    </ul>
  </body>
</html>

반복되는 부분은 for문으로 처리해서 조금 더 효율적으로 코드를 표현하였다.

for문은 javascript에서 지원하는 문법으로,

script라는 태그로 감싸서 javascript 문법임을 명확히 나타내었다.

앞서 말하길, jade는 템플릿 엔진이라고 했다.

그리고 템플릿 엔진은 html과 javascript를 좀 더 쉽게 작성할 수 있도록 도와준다고 했다.

정말 그런지 확인해보자.

위 예제를 jade로 표현하면 다음과 같다.

html
  head
    title MyWeb
  body
    ul
      - for(var i=0; i<10; i++)
        li welcome

매우 간결하지 않은가?

jade로 위와 같이 작성하면,

맨 처음 예제로 보여주었던 html 예제와 똑같은 코드를 자동으로 생성해준다.

얼마나 간결한지는 글자수로 비교해보면 그 차이가 확 와닿는다.

html      : 공백제외 228 byte

javascript: 공백제외 138 byte

jade      : 공백제외 54 byte

javascript로 표현한 것 보다도 절반 이상 줄어들었고,

html만 사용한 방식에 비하면 4배 이상 줄어들었다.

단, 기존의 방식에 비해 들여쓰기를 신경써줘야 한다는 귀찮음이 있다.

하지만 개인적으로는 오히려 가독성을 높여주는 긍정적인 역할을 한다고 생각한다.

그리고 단순히 글자수만 줄어든것이 아니다.

태그를 사용할때 여는 괄호와 닫는 괄호를 신경쓰지 않아도 되고,

for문을 사용하기 위해 <script> 라는 태그대신 대쉬(-)로 간결하게 표현 가능하다.

그리고 다른 페이지로부터 변수를 받아 처리할 수 있어서,

한 개의 템플릿을 만들어놓고 여러 페이지에서 재사용이 가능하다.

예를들어 다음과 같이 ‘MyWeb’ 이라는 페이지 제목과 ‘welcome’이라는 메시지를,

각각 title, msg라는 변수로 받아 사용할 수 있다.

html
  head
    title= title
  body
    ul
      - for(var i=0; i<10; i++)
        li= msg

태그 뒤에 = 을 붙이고 받은 변수명을 입력하면,

해당 태그에 절달받은 변수의 값이 들어간다.

참고로 title #{title}, li #{msg} 와 같은 형태로 사용 할 수도 있다.

그럼 title과 msg라는 녀석은 대체 어디서 넘어온것일까?

변수를 전달하는 방법은 여러가지가 있겠지만,

nodejs에서는 다음과 같이 전달한다.

var express = require('express');
var app = express();
  3
app.set('view engine', 'jade');
app.set('views', './views');
  6
app.get('/jade', (req, res) => {
 res.render('test.jade', {title:'MyWeb', msg:'welcome'});
})
 10
app.listen(3000, () => console.log('connected, 3000'));

8번째 줄에서 render라는 메소드를 사용했다.

이 메소드는 5번째 줄에서 지정한 views파일의 위치에서 첫 번째 인자로 지정한 jade 파일을 찾는다.

즉, /views/test.jade 파일을 찾는다. (.jade 라는 확장자는 생략해도 된다)

그리고 두 번째 인자로 넘겨준 객체를 변수로 넘긴다.

‘title’이라는 변수에 ‘MyWeb’이라는 값을,

msg라는 변수에 ‘welcome’이라는 값을 넣어서 넘겨준다.

위에서 적었던 test.jade 파일 내용을 다시 보자면,

html
  head
    title= title
  body
    ul
      - for(var i=0; i<10; i++)
        li= msg

title= title 부분은 <title>MyWeb</title> 이라는 html로 변환되고,

li= msg 부분은 <li>welcome</li> 이라는 html로 변환된다.

향후 이 탬플릿(jade 파일)을 사용하고자 하는 다른 페이지에서도,

전달하는 데이터만 다르게 넘겨주면 쉽게 재사용이 가능하다.

같은 맥락에서,

모든 페이지를 수정할 필요 없이 해당 템플릿만 수정하면 되므로 유지보수 또한 용이하다.

코딩장이

-장이: [접사] ‘그것과 관련된 기술을 가진 사람’의 뜻을 더하는 접미사.

[javascript] jade

jade

Related Posts

코딩장이