[EJS] 스코프 이슈를 어떻게 해결할 것인가?

먼저 전체 코드를 본다.

 

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
var _ = require('lodash');

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"));

var posts = [];

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

app.get("/about", function(req, res){
  res.render("about", {startingContent: aboutContent} );
});

app.get("/contact", function(req, res){
  res.render("contact", {startingContent: contactContent} );
});

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

app.post("/compose", function(req, res){

  const post = {
    title: req.body.postTitle,
    content: req.body.postBody
  };
    posts.push(post)

    res.redirect("/")
});

app.get('/posts/:postName', (req, res) => {
  const requestedTitle = _.lowerCase(req.params.postName);

  posts.forEach(function(post){
    const storedTitle = _.lowerCase(post.title);
    
    if (storedTitle === requestedTitle) {
  
        res.render("post", {title: post.title, content: post.content})
    }
  });
})

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

내가 쩔쩔 매었던 문제...

 

1. /compose에서 입력을 하면 home 화면에서 입력값이 출력되도록 만드는 것인데 전역변수 posts 어레이를 만드는 것은 알았으나 이후 어떻게 작업되는지 이해가 어려웠음.

 

> 먼저 body-parser를 통해서 입력값을 정리해주고 내용을 posts 어레이에 넣어서 redirect를 통해서 home으로 보내준다. 

아래는 /compose의 html 코드 

<%- include("partials/header"); -%> 
 
 <h1>Compose</h1>
 <form  action="/compose" method="post">
    <div class= "form-group">
    <label for="Title">Title</label>
    <input class="form-control" type="text" name="postTitle" id="Title">
    <label for="Post">Post</label>
    <textarea class="form-control" name="postBody" rows=5 cols=10></textarea>
    </div>
  
  <button type="submit" class="btn btn-primary">Publish</button>
</form>

<%- include("partials/footer"); -%>

2. prams의 활용...

app.get('/posts/:postName', (req, res) => {
  const requestedTitle = _.lowerCase(req.params.postName);

  posts.forEach(function(post){
    const storedTitle = _.lowerCase(post.title);
    
    if (storedTitle === requestedTitle) {
  
        res.render("post", {title: post.title, content: post.content})
    }
  });
})

> 간단하지만 어디에서 무슨 값이 나오는지 명확히 알아야 참조 에러가 나지 않는다. 아래는 post 창.

<%- include("partials/header"); -%> 
 
 <h1><%= title %></h1>
    <p> <%= content %> </p>

    <%- include("partials/footer"); -%>