routes 파일 생성, 라우터 app.js에 추가


안녕하세요.
고코더 입니다.


지루한 설정은 끝내고 이제 재밌는 실습에 들어가보겠습니다.
노드 express로 소스 코딩에 본격적으로 해보겠는데요.
오늘은 views, routes 파일을 추가하여 기본 예제를 해볼려고 합니다.
어떻게 노드를 작성해야 하는지 기초 구조를 알 수 있는 시간입니다.



 1. routes 폴더에 .js 파일을 추가


 1-1. routes 폴더에서 마우스 오른쪽 버튼을 눌러
New을 클릭해 JavaScript file을 추가 합니다.
노드는 자바스크립트 문법이기에 .js가 프로그래밍 확장자 입니다. 파일명은 form.js 입니다.


 1-2. 생성된 파일안에 소스 내용을 이렇게 채워보겠습니다. 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('form', { title: 'Form 테스트' });
});


module.exports = router;


 1-3. 해당 소스는 express 인스턴스를 사용하겠다는 코드 입니다.
require로 원하는 인스턴스를 받아 사용할 수 있도록 해줍니다. 
var express = require('express');

 1-4. express 프레임워크 라우터를 사용하기 위해 변수를 선언합니다.
var router = express.Router();

 1-5. 라우터는 URI 요청에 응답하는 방식을 말합니다. 해당 form URI 안에서 루트로 들어올때에 응답 방식 입니다. 
res.render 는 해당 view 파일을 지정할 수 있습니다. 
router.get('/', function(req, res, next) {
    res.render('form', { title: 'Form 테스트' });
});

 1-6. module.exports는 global 전역으로 해당 라우터를 사용하게 해줍니다. 
module.exports = router;



 2. app.js


 2-1. app.js는 익스프레스 프레임 워크를 사용함에 있어서 설정을 지정하는
코드 입니다. routes에 파일이 추가되면 app.js에도 코드 추가가 꼭 필요 합니다.

 2-2. require를 추가 해줘야 합니다. 해당 라우터 인스터스를 사용해야 합니다. 
이때 보통 변수는 뒤에 Router를 쓰는게 관례적입니다. 그냥 그렇게 합시다.
var formRouter = require('./routes/form');


 2-3. 또 아래에 보면 app.use 에 해당 라우터가 맵핑될
URI를 추가해줍니다. router 명을 그대로 맵핑 URI를 입력합니다. 
app.use('/form', formRouter);



마무리

이렇게 하면 routes 에 소스 파일을 추가하는 방법을 배워 보았습니다.



아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요