[EJS] res.render("ejs파일경로", {데이터이름표: 전송할데이터})

Node.js에서, 서버를 담당하는 entry point는 웹앱의 두뇌라고 할 수 있다.

그리고 그 js파일 상의 로직으로 인해 변경되는 값을 HTML로 즉각 쏴주는 것이 EJS다.

 

이때 entry point -> EJS로 데이터를 전송하는 역할을 하는 함수가 render() 함수이다.

 

만약 EJS를 사용하지 않고 기본적인 HTML만을 사용한다면,

클라이언트로부터 온 request에 대한 response를 일일이 send 또는 sendFile 해야할 것이다.

하지만 EJS는 기존 HTML코드와 JavaScript코드의 공존을 통해 효율적인 개발을 도와준다.

 

render() 함수를 사용하기 위해 우리는 역시나 Node Express 상의 get() 또는 post() 함수를 이용한다.

예를 들어 사용자로부터 input을 받아 처리한다면,

const express = require("express");

const bodyParser = request("body-parser");

const app = express();

app.use(bodyParser.urlencoded({extended: true}));

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

	const userInput = req.body.todo;
	
    res.render("todo", {newList: userInput});
    
}

위 형태가 될 것이다.

 

하지만 웹에 이렇게 유저와의 상호작용에 해당하는 POST만 존재한다면야 상관없겠지만, 그럴 수가 없다.

애당초 홈페이지에 접속한다면 GET 요청으로 데이터를 불러오는 것이 우선이기 때문이다.

그렇다면 GET에 해당하는 render도 처리해주어야 한다.

 

하지만 GET에도 똑같이 render 함수를 써주게 되면, 에러가 난다.

처음에 단지 서버에 저장되어 있는 내용을 불러오는 것에 해당하는 GET 단계에서는, 이후 POST 단계에서 나타날 데이터가 아직 없기 때문이다.

 

그렇다면 어떻게 해야할까?

방법은 정말 단순하다.

 

우선은 POST에 있던 res.render()함수를 GET단계로 통째로 옮겨주고, POST에서는 res.redirect("/")로 바꿔주면 된다.

 

하지만 한 가지 문제가 남아있다.

GET으로 render()를 옮기게 되면 유저의 input 행동보다 앞서기 때문이다.

 

따라서 다음 포스팅에서 scope 개념과 함께 마저 해결해본다.