node.js express 2. router 객체, res.render 렌더링

이전 포스트 : http://psyhm.tistory.com/2

저번 포스트에서는 express란 무엇인지, 그리고 express-generator로 스켈레톤을 생성해보고

생성한 프로젝트를 곧바로 돌려보는 것까지 했었다.

그렇다면 이제 어떻게 돌아가는 지 코드를 보며 살펴볼 차례이다.

router 객체

저번 포스에서 프로젝트를 구동하고 http://localhost:3000/ 을 웹브라우저에 입력하게되면 다음과 같은 화면을 볼 수 있었다.

그리고 이 화면은 views/index.ejs 파일이 렌더링 된 것이라고 했고, 렌더링하는

로직은 routes/index.js에 있었다고 했었다.

일단 routes/index.js를 보자

// index.js file
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

express 모듈을 require하여 파일에 추가했고 express에서 Router 객체를

따로 뽑아서 router 변수가 참조했다.

Node.js의 모듈 시스템에서 각 파일은 분리된 모듈로 간주하기 때문에

파일에서 필요한 모듈을 따로 추가해야한다.

그리고 router 객체에서 핸들러를 추가하였다.

이 router 객체는 매우 중요한 역할을 한다.

routing에 대한 설명은 express docs에서 볼 수 있다.

Routing refers to how an application’s endpoints (URIs) respond to client requests.

출처: http://expressjs.com/en/guide/routing.html

구글 번역기에 돌려 직역하자면

라우팅은 응용 프로그램의 끝점 (URI)이 클라이언트 요청에 응답하는 방법을 나타냅니다.

쉽게 말하자면 각 URI와 HTTP Method가 다른 클라이언트 요청을 다르게 동작할 수 있도록 만든 것이다.

http://domain.com/a 에 대해서는 A 함수가,

http://domain.com/b 에 대해서는 B 함수가 동작하게 하여

router.get('/a', function(req, res) {
  res.render('index', { title: 'A' });
});

router.get('/b', function(req, res) {
  res.render('index', { title: 'B' });
});

위와 같이 쉽게 서비스 로직을 구성할 수 있다.

또한 http://domain.com/a 의 GET 요청과,

http://domain.com/a 의 POST 요청을 달리받기 때문에

router.get('/a', function(req, res) {
  res.render('index', { title: 'A' });
});

router.post('/a', function(req, res) {
  res.render('index', { title: 'B' });
});

위처럼 구성할 수도 있다.

express는 이런식으로 URI나 HTTP Method로 각 엔드포인트에 대한 핸들러를

매우 쉽게 등록할 수 있다.

render

이제 index.ejs를 렌더링하는 router.get('/')에 대해 살펴보자.

URI path가 '/'이고 HTTP Method가 GET인 요청에 대해

function(req, res){
  res.render('index', { title: 'Express' });
});

가 동작한다.

일단 함수의 매개변수에 대해 알아보자.

• req 객체는 클라이언트의 request에 대한 정보가 담겨 있다.
• res 객체는 서버가 클라이언트에게 response할 정보가 담겨있다.

따라서 res.render('index', { title: 'Express' }) 는

서버가 클라이언트에게 index.ejs를 렌더링하여 보내겠다는 의미이다.

그리하여 ejs 파일이 렌더링 되고 html이 된 후에 html 문서를 클라이언트에게

response하였기 때문에 맨처음 이미지 화면이 보였던 것이다.

ejs에 대한 설명은 나중에 포스팅에서 하도록 하고 다음 포스팅은 static files, 즉 정적 파일에 대해

알아볼 것이다.