블로그 만들기: 챌린지2 - res.render("렌더할파일이름", {key : value}

완성된 출력물

챌린지 1을 완성한 home 페이지에 완성된 출력물을 추가로 띄우자 : 내용은 로렘입섬

 

1. app.js 에 home에 띄울 내용을 지정한다. 나중에 home.ejs에 연결

const homeStartingContent = "내용"

//jshint esversion:6

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");

const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a iaculis at erat pellentesque adipiscing.";
const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui.";
const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero.";

const app = express();

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

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

app.get("/", function (req, res) {
  res.render("home")
})


app.listen(3000, function() {
  console.log("Server started on port 3000");
});

2. home.ejs

startingContent로 app.js에 입력된 내용을 불러올 템플릿을 명명

<h1>Home</h1>
<p> <%= startingContent %> </p>

3. app.js

res.render에 렌더링할 ejs의 path를 적고,

JS객체(objects)를 입력: { } 사이에 key : value 세트

key: value = ejs템플릿이름: js변수이름

app.get("/", function (req, res) {
  res.render("home", {
    startingContent:homeStartingContent})
})

내가 지정한 ejs 템플릿의 이름 : js에 입력된 내용(변수)의 지정된 이름 - 서로 연결

 

피드백:

1. 출력할 내용을 const 변수로 이름 지정. (... 적절한 단어가 무엇일까ㅠ 기초가 잡혀있지 않으니 설명이 어려움)

2. ejs 지정 이름: js 변수의 이름서로 연결 - 이 부분이 중요. home.ejs만 한다고 되는것이 아님.

3. ejs 태그 중에 <%= 와 %> 사용할 것! 변수의 내용을 출력하는 것이므로..? var로 지정한 이름을 쳤는데 출력물은 명령어로 지정한 다른 내용이면 나는 이걸 쓴다고 이해함.

Tags

• <% 'Scriptlet' tag, for control-flow, no output
• <%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
• <%= Outputs the value into the template (HTML escaped)
• <%- Outputs the unescaped value into the template
• <%# Comment tag, no execution, no output
• <%% Outputs a literal '<%'
• %> Plain ending tag
• -%> Trim-mode ('newline slurp') tag, trims following newline
• _%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it