express : router
router란 express의 내장기능인다
지난 포스팅에서 express를 이용해서 주소창 파라미터터에 따라 페이지를 다르게 띄워주는 코드를 작성해보았다
(아래 코드 참조)
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) =>{
res.send('hello express');
});
app.get('/doit', (req, res) =>{
res.send('I can do it, You can do it, We can do it');
});
app.listen( port );
이 방식은 적은 양의 주소창을 관리하기에는 편리하지만, 페이지가 수십개가 넘어 갈 경우
파일이 지저분해지고, 나중에 수정사항이 있을때 해당 파라미터를 찾는게 복잡해 질 수 있다는 단점이 있다.
이러한 문제점을 보완하기 위해 사용하는 기능이 router이다
router에 대해 정의를 뭐라고 내려야 할지는 감이 오지 않아서 (파라미터에 따른 페이지를 관리하는 뭉치..의 느낌으로 이해했다.) 바로 아래 admin을 활용한 예시코드를 작성 후 각 설명을 달아보겠다.
const app = express();
const port = 3000;
app.get('/', (req,res) => {
res.send('express start');
});
app.listen( port );
① app.js파일을 만든다
② main창의 내용을 작성한다.
const express = require('express');
const router = express.Router();
router.get('/', (req, res) =>{
res.send('admin 이후 url');
});
router.get('/products', (req, res) => {
res.send('admin products');
});
router.get('/contacts', (req, res) => {
res.send('admin contacts');
});
module.exports = router;
③ app.js에 연결시켜줄 라우터 파일을 만든다. (위의 코드는 admin.js라는 파일로 저장했다)
④ const router = express.Router(); 로 router를 사용하기 위한 선언을 해준다
⑤ get메서드와 내부의 콜백함수를 통해 원하는 페이지를 추가한다.
- 8번째 줄의 경우 맨 마지막에 /products를 추가하면 admin products가 나오게,
- 12번째 줄의 경우 맨 마지막에 /contacts를 추가하면 admin contacts가 나오게 요청한 코드이다.
⑥ module.exports = router; 를 통해 router를 export한다.
const express = require('express');
const app = express();
const port = 3000;
const admin = require('./routes/admin');
app.get('/', (req,res) => {
res.send('express start');
});
app.use( '/admin', admin )
app.listen(port);⑦ 다시 app.js로 돌아와서 admin이라는 변수를 선언 후, admin.js의 모듈을 import시켜준다.
⑧ use메서드를 사용하여 기존의 url 마지막에 '/admin'이 추가될 경우 admin을 실행시키도록 명령해준다.
여기까지 실행해주면 주소창의 url에 따라 admin.js에 선언해준 페이지들이 잘 출력되는 것을 확인 할 수 있다.
여기서 추가로 http://localhost:3000/admin/contacts 의 ulr에 /list까지 붙여서 새로운 페이지를 만들고싶으면 또 새로운 파일을 만들어서 관리 할 수 있다.
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.send('admin contacts');
});
router.get('/list', (req, res) => {
res.send('admin contacts list');
});
module.exports = router;
⑨ 위와 같이 contacts.js파일을 만들어 준 후 /list를 파라미터로 받는 코드를 작성후 export 한 다음
const express = require('express');
const app = express();
const port = 3000;
const admin = require('./routes/admin');
const contacts = require('./routes/contacts');
app.get('/', (req,res) => {
res.send('express start');
});
app.use( '/admin', admin )
app.use( '/admin/contacts', contacts )
app.listen( port );
⑩ app.js에 '/admin/contacts' 이후 contacts가 실행시키도록 모듈을 연결해준다
잘 출력되는것을 확인 할 수 있다 :)
이 contacts를 admin에 연결해서 관리 할 수 있을 줄 알았는데 방법이 없는건지 내가 못찾는건지 도통 모르겠어서
app.js페이지에서 모두 컨트롤 하도록 코드를 작성하였다.. (혹시 방법 아시는 분은 댓글 부탁드려용 😊)
위와 같이 라우터로 코드를 관리 할 경우 아래의 이미지와 같이 (routes폴더는 내가 따로 만든것) 폴더 내부에 각각 파라미터에 따른 결과값들을 모아서 관리할 수 있기 때문에, 코드도 깔끔해지고 관리도 용이해진다는 장점이 있다
