[NodeJS] jade란? jade 따라해보기

jade란?

- HTML페이지 템플릿 엔진 모듈

- jade 파일 형식

=> HTML태그형태를 가지고 있지만 여는태그와 닫는태그( < > ) 가 존재하지 않는다

#{Value} : 데이터 출력

=Calue : 데이터 출력

==COde : 데이터 입력

jade 기초 실습

-먼저 파일을 만들어 준다

/**
 * http://usejsdoc.org/
 */
//jade 템플릿 연습
 
var http = require('http');  //http라는 모듈을 require을 이용하여 http라는 문자로 사용해 주겠다(import 개념)
var fs     = require('fs');         //fs라는 모듈을 require을 이용하여 fs라는 문자로 사용해 주겠다(import 개념)
var jade     = require('jade'); //fs라는 모듈을 require을 이용하여 jade라는 문자로 사용해 주겠다(import 개념)
 
http.createServer(function(request, response) {
//http모듈. 서버를 만들겠다.(callback함수는(요청과 응답)
    
    fs.readFile('hello.jade', 'utf-8', function(err, data) {//fs모듈. 파일을 읽어온다(hello.js파일을,
                        //utf-8의 방식으로, (call방식으로(에러, 데이터처리)
        var fn = jade.compile(data); //jade를 컴파일한 데이터를 fn에 저장한다
        
        response.writeHead(200, {'ContentType':'text.html'});
            //헤더와 헤더내용을 보내기
            //200은 http상태코드를 나타내며 정상적으로 연결됐다는 뜻
 
        response.end(fn());
        //fn의 처리를 끝내겠다
        
    });            
}).listen(55555, function(){//대기한다(port55555번을 가지고)
    console.log('Server Running...http://192.168.0.119:55555');
});        //대기시 나오는 콘솔창의 출력문

- 서버에서 불러온 hello.js를 만들어줄 차례

서버를 구축했으니 보여줄 jade파일을 만들어야 합니다

- html과 양식이 매우똑같다 그대로 가져와서 씁니다

대신 < >가 없기때문에 귀찮음이 사라졌습니다

간단한 html 태그설명

- h1과 h2는 글자크기이며 hr은 밑줄 a href는 링크를 뜻합니다

- 실행해 보면.. h1태그에 맞게 글자크기가 나왔고, 링크가 걸려있음을 확인할 수 있습니다.

jade 실습 2

jade에서 반복문 사용과 js에서 사용한 코드 입출력을 불러오기

- 기본적으로 html은 반복문을 이해하지 못하기 때문에 javascript를 사용해야 합니다

반복문을 사용해 보는 이유도 jade환경에서 javascript를 어떻게 사용하는지 참고하기 위하여 넣었다고 보시면 되겠습니다

- 먼저 서버파일을 만들어 주겠습니다

- html을 사용 할 jade파일을 만들어 줍니다

- 코드는 똑같습니다

다만 파일을 끝내기 전에

name값과

description값을 임의로 제가 지정해줬다는 점입니다

위에 속성에서 보셨듯

#{  }을 이용하여 출력해 주는것을 볼 수 있습니다

        -for(var i=1; i<10; i++){
            p //html에서 한줄 내려주는 태그
                a(href="http://www.naver.com") naver go!! #{i}
        -}

코드를 보시면 눈치채셨을겁니다

jade에서 javascript를 사용하시려면 -를 사용하시면 되며 안에서 html태그를 그냥 쓰시면 알아서 인식을 해줍니다

description을 사용하시려면 name처럼 #{description} 을 사용하시면 되겠습니다

링크가 반복되었음을 확인 할 수 있습니다

주의!! 본 포스트는 작성자가 이해한대로 코드주석을 한 것이니 사실과 다를 수도 있음을 참고해주세요

지적해주시면 바로 고치겠습니다