[Node.js] Template Engine Jade ๊ตฌํ˜„

Template Engine์ด๋ž€?

๋™์ ์ธ ์›น ์ œ์ž‘ ๋ฐฉ์‹๊ณผ ์ •์ ์ธ ์›น ์ œ์ž‘ ๋ฐฉ์‹์˜ ๋‹จ์ ๊ณผ ์žฅ์ ์„ ์ž˜ ์„ž์–ด๋†“์€ ์ƒˆ๋กœ์šด ์ฒด๊ณ„

Jade ์„ค์น˜

jade๋Š” template engine ์ค‘ ํ•œ ์ข…๋ฅ˜

npm install jade --save

app.js์—์„œ jade๋ฅผ ์ ์šฉ

app.set("view engine", "jade"); // jade๋ฅผ setting
app.set("views", "./views"); // jade ํŒŒ์ผ์ด ๋“ค์–ด์žˆ๋Š” ๋””๋ ‰ํ† ๋ฆฌ(๊ด€์Šต์ ์œผ๋กœ views)
app.locals.pretty = true; // jade express๊ฐ€ ๋ณ€ํ™˜ํ•˜๋Š” html ์ฝ”๋“œ๋ฅผ ๋ณด๊ธฐ์‰ฝ๊ฒŒ ๋ฐ”๊ฟ”์ค€๋‹ค.

temp.jade ์ž‘์„ฑ

๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ views ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์ฃผ๊ณ  ๊ทธ ์•„๋ž˜ temp.jade๋ฅผ ์ž‘์„ฑํ•ด์ค€๋‹ค.

    head
        title= _title
    body
        h1 Hello Jade
        ul
            -for(var i=0; i<5;i++) /* ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๋Š”๊ฒƒ์ด ์•„๋‹ˆ๋ผ
            ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์œผ๋กœ ์ฝ”๋”ฉํ• ๋ ค๋ฉด ์•ž์— '-'๋ฅผ ๋ถ™์—ฌ์ค˜์•ผํ•จ */
                li coding
        div= time
  1. ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํƒœ๊ทธ๊ฐ€ ์„œ๋กœ ํฌํ•จํ•˜๋Š” ๊ตฌ์กฐ๊ฐ€ ์ •ํ•ด์ง
  2. ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ์‹ถ์„ ๋• ํƒœ๊ทธ๋’ค์— โ€œ=โ€ ์‚ฌ์šฉ
  3. ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฌธ๋ฒ•(๋ฐ˜๋ณต๋ฌธ๋“ฑ)์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ๋ฉด โ€œ-โ€œ ์‚ฌ์šฉ(app.js์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ์ž…ํ•ด์ค€๋‹ค.)

router ์ ์šฉ

app.js์— ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

app.get("/template", function (req, res) {
  res.render("temp", { time: Date(), _title: "Jade" });
  // 2๋ฒˆ ์งธ ์ธ์ž๋Š” jade ํŒŒ์ผ ์•ˆ์— ์žˆ๋Š” ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ(๋ฐ์ดํ„ฐ์ฃผ์ž…)
});

localhost:3000/template๋กœ ์ ‘์†ํ•˜๋ฉด ๋ฐ˜๋ณต๋ฌธ๊ณผ html์ด ์ ์šฉ๋œ ํŽ˜์ด์ง€๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.