첫번째 게시글부터 차례대로 이어지는 프로젝트입니다
2021.06.25 - [개발/Node.js] - (1) Node.js, MongoDB 로 TODO 만들기 - 디렉토리 설정, app.js 작성
오늘은 라우터 설정을 해줄건데
todo의 라우터만 설정하는 건 간단하겠지만 앞으로 추가할 기능들을 생각해서
리팩토링 된 라우터 모음집 index.js 파일과
todo의 라우터 todo.js 파일을 생성해볼 것이다
1. routes/todo.js 파일 작성
Todo
└ node_modules
└ [모듈들]
└ public
└ routes
└ index.js
└ todo.js
└ views
└todo.ejs
└ app.js
└ package.json
//Import modules
const express = require("express");
const app = express();
const router = express.Router();여기도 app.js와 동일하게 express 서버를 열어주고 express의 router 기능을 변수에 담아와 사용할 것이다
필요한 변수 선언을 가장 먼저 해준다는 것이 기본
그리고 url에 function을 연결해줄건데 기본적인 원리와 사용법 먼저 파악하고 해보자
(해당 코드는 개념에 대한 설명을 돕기위한 코드일뿐 삽입하지않습니다)
// Description : get, post
router.get('url', [function]);
router.post('url', [function]);
// Example
router.get('/', function(req, res){
console.log("------------!!Todo!!------------");
res.render("todo"); //todo.ejs을 웹으로 보여준다
}););
Description은 기본 원리, Example은 사용법이다
localhost:3000/ 으로 입력하면
function(req, res){}를 수행해서 콘솔에 로그를 찍고 todo.ejs을 웹에 표출해주는 것이다
여기서 function은 꼭 저렇게 바로 작성해주지 않고 모듈화한 다른 파일에서 메소드처럼 사용할 수 있는데
나는 이 방법으로 분리해서 사용했다
즉,
Controllers/todo.js - 함수들(todo 읽기, 쓰기, 수정하기, 삭제하기)
↕
Routes/todo.js - url에 맞춰 수행해야할 함수 연결
그러면 다시 코드 작성!
Main, Write, Edit, Update, Remove 에 해당하는 라우트를 작성해주었는데
/edit/:id 와 같이 :id가 붙는 부분은 파라미터에 id를 넘겨주고 받기위함을 표현한다
// Controller 를 불러와서 exports 메소드 사용
const controller = require("../controllers/todo");
// Main
router.get('/', controller.get); // http://localhost:3000/todo/
// Write
router.post('/write', controller.write); // http://localhost:3000/todo/write
// Edit
router.get("/edit/:id", controller.edit);
// Update
router.post("/update/:id", controller.update);
// Remove
router.get("/remove/:id", controller.remove);위에 설명과 같이 controller를 불러와서 모듈로 사용할 것이다
그러려면 디렉토리에 controllers폴더와 todo.js 파일을 생성해줘야한다
2. controllers 폴더 생성, todo.js 파일 생성
Todo
└ node_modules
└ [모듈들]
└ public
└ controllers
└ todo.js
└ routes
└ index.js
└ todo.js
└ views
└todo.ejs
└ app.js
└ package.json
일단 파일과 폴더만 생성해주고,
다시 routes 폴더에 todo.js 코드를 마무리하자
라우터를 모두 작성했는데 이제 이 라우터를 export해서 다른 파일에서 사용할 수 있도록 만들어야한다
다음과 같은 코드 작성
module.exports = router;
지금까지 작성한 router를 module.exports 한다는 의미이다
그러면 이 router는 index.js에서 리팩토링해서 관리할 수 있게 된다
3. index.js에서 라우터를 리팩토링해서 관리하기
index.js파일을 열고 다음과 같이 작성한다
// All Routers Exports
/*
새로운 routes 인덱스가 생길때마다
리팩토링해서 함께 관리한다
ex)
const NewRouter = require('./new');
router.use('/new', newRouter);
*/
const express = require("express");
const app = express();
const router = express.Router();
// Todo Router
const TodoRouter = require('./todo');
// Refactoring
router.use('/todo', TodoRouter); // http://localhost:3000/todo 로 라우팅
module.exports = router;
이미 routes/todo.js를 작성하면서 라우터에 대해 이해가 되었다면
이 index.js도 쉽게 이해할 수 있을 것이다
index.js도 express 서버를 만들어주고 express의 router를 저장해 router를 정의해줄 것인데
TodoRouter(위에서 작성한 라우터)를 index.js의 라우터에 use 함으로 리팩토링을 하는 것이다
여기서는 경로를 /todo로 주었기 때문에
index.js /todo 를 걸쳐
todo.js /write 로 간다
즉, localhost:3000/todo/wirte 의 경로가 되는 것!
app.js -> index.js -> todo.js
그리고 이 index의 라우터를 module.exports 해줘서
이전 게시글에서 작성했던 app.js에서 router를 가져와 사용하는 것이다
// app.js의 라우터 설정 부분
// Router Setting
const router = require("./routes/index");
app.use(router);
이렇게 말이다
이해가 안된다면 흐름을 타고 파일마다 확인해보자
그러면 라우터는 작성 끝
지금까지 코드를 따라하다가 '왜 이렇게 짧은 코드들을 분리해서 작성할까?' 라는 의문을 가졌다면
노드의 장점과 모듈화에 대한 부분의 이해가 꼭 필요하니.. 구글링해보길!!!
그리고 무엇보다 작은 프로젝트도 큰 프로젝트처럼 연습해두는 것도
확실히 실무에 도움이 된다
수정할 것이 줄어드는 건 개발자에게 매우 매우 좋은 것!
(1) 서버 설정 app.js
(2) 경로 설정 routes/todo.js
(3) 모델 설정 models/todo.js
(4) 서비스 설정 controllers/todo.js
(5) 프론트 페이지 설정 views/todo.ejs, public/
다음 게시글은 controllers에서 사용하게 될 모델을 작성하는 부분!
총 디렉토리 구조
Todo
└ node_modules
└ [모듈들]
└ controllers ---------------------서비스 영역
└ todo.js
└ models -------------------------DB 스키마 영역
└ todoTask.js
└ public ---------------------------정적 파일 영역
└ fonts
└ images
└ stylesheets
└ routes ---------------------------라우터 영역
└ index.js
└ todo.js
└ views ----------------------------웹 페이지 영역
└ todo.ejs
└ todo-edit.ejs
└ app.js ----------------------------메인 서버 (실제 구동되는 파일)
└ package.json -------------------설정