[Nodejs] 라우터 - 모듈화 + MVC패턴

한 파일에 모든 모듈을 넣거나 관련이 크지 않은 경로를 가진 것도 서로 섞여있으면 코드를 읽고 유지보수하기가 힘들 것이다.

 

그래서 라우터를 만들어 모듈화하는 방법과(라우팅) 간략한 nodejs의 mvc패턴에 대해 알아봤다

 

(개인 필기 및 공부 용으로 작성한 글이라 순서에 상관없이 작성하였습니다.) 

 

참고로 es6 문법을 사용했으므로 babel모듈을 따로 설치해주어야한다

npm install --save-dev @babel/core @babel/cli 

npm install @babel/core

npm install @babel/preset-env 

로 설치하고

프로젝트폴더에 .babelrc 라는 파일을 만들어주고 다음과 같이 작성해준다.

{
  "presets": ["@babel/preset-env"]
}

 

그리고 실행시킬떄 node로 실행을 시키는게아니라 babel-node로 실행시키면된다.

노드몬사용시 package.json을 다음과같이 바꿔준다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-nodemon app.js"
  },

 

 

routes.js를 만들어서 가장 최상단(?) url 경로들을 분리해서 저장해놨다.

//Global
const HOME ="/";
const  JOIN = "/join";
const LOGIN = "/login";
const LOGOUT = "/logout";
const SEARCH = "/search";

//Users
const USERS = "/users";
const USER_DETAIL = "/:id"; //:id는 변하는값임을 인식
const EDIT_PROFILE = "/edit-profile";
const CHANGE_PASSWORD = "/change-password";

//Videos
const VIDEOS = "/videos";
const UPLOAD = "/upload";
const VIDEO_DETAIL = "/:id";
const EDIT_VIDEO = "/:id/edit";
const DELETE_VIDEO = "/:id/delete";

const routes = {
    home : HOME,
    join : JOIN,
    login: LOGIN,
    logout : LOGOUT,
    search : SEARCH,
    users : USERS,
    userDetail: id => {
        if (id) {
            return `/users/${id}`;
        } else {
            return USER_DETAIL;
        }
    },
    editProfile: EDIT_PROFILE,
    changePassword: CHANGE_PASSWORD,
    videos: VIDEOS,
    upload: UPLOAD,
    videoDetail: id => {
        if (id) {
            return `/videos/${id}`;
        } else {
            return VIDEO_DETAIL;
        }
    },
    editVideo: EDIT_VIDEO,
    deleteVideo: DELETE_VIDEO
};

export default routes;

 

 

 

 

init.js를 만들었고 localhost:4000으로 서버를 시작하는 코드를 분리 작성

import  app from  "./app"; //app.js에서 exprees()를 export한걸 받아서 사용한다.

const PORT = 4000;

const handleListening = () => console.log(`Listening on: http://localhost:${PORT}`);


app.listen(PORT , handleListening());

 

 

 

app.js를 만들어 express()를 받고 , 다른 파일의 모듈들을 import하여 사용한다. (use)

즉, 미들웨어 세팅과 라우터의 초기 코드들을 담고 있으며 중심지역할을 한다고 보면 될 것 같다.

라우터에서 첫번쨰 매개변수인 routes.home이 위 routes.js에서의 경로를 담고 있는거다.(일종의 모듈화)

두번째 매개변수인 globalRouter , userRouter 모두 라우터를 분리해논 것인데 뒤에서 살펴보기로한다.

만약 첫번째 매개변수가 없이 globalRouter로 해도 되긴하는데 최대한 모듈화 해놓기위해 이렇게 사용한다. (홈화면, 프로필화관련화면, 비디오보는화면 같이)

import express from "express";
import morgan from "morgan";
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
import {localsMiddleware} from "./middlewares";
import userRouter from "./routers/userRouter"; //userRouter에서 export를 default로 했으므로 이렇게 받아서 쓸 수 있다. 만약 export const userRouter 이런식으로 했다면  import { userRouter } from "/router" 이렇게 해야함
import videoRouter from "./routers/videoRouter";
import globalRouter from "./routers/globalRouter";
import routes from "./routes";
const app = express();  // express

//미들웨어
app.use(helmet()); // 어플리케이션이 더안전하도록 만들어줌
app.set("view engine", "pug"); //pug는 뷰엔진이다.
app.use(cookieParser()); //cookie를 전달받아서 사용할 수 있도록 만들어주는 미들웨어
app.use(bodyParser.json({extended: true})); //사용자가 웹사이트로 전달하는 정보들을 검사하는 미들웨어
app.use(bodyParser.urlencoded({extended: true})); //json이 아닌 post형식으로올때 파서
app.use(morgan("dev")); //어플리케이션에서 발생하는 모든 일들을 logging
app.use(localsMiddleware);

//라우터
app.use(routes.home, globalRouter);  //  localhost::4000/ 에 접속하면 글로벌라우터로 넘어간다.
app.use(routes.users, userRouter); // localhost:4000/users/~~ 접속하면 유저라우터로 넘어간다.
app.use(routes.videos, videoRouter); // localhost:4000/videos/~~ 에 접속하면 비디오라우터로 넘어간다.

export default app; //다른 파일에서도 사용할 수 있게 export해준다.

 

 

 

<routers 패키지에 분리>

여러 라우터들 중에 globalRouter.js와 userRouter.js이다.

여기서 express.Router()를 통해 모듈식 마운팅 가능한 핸들러를 작성할 수 있다.

라우팅을 하는 코드를 작성하는데 라우팅이란 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다.

app.js에서 라우터의 첫번쨰 매개변수와 마찬가지로 get(), post()의 첫번째 매개변수론 routes의 경로를 넣고 두번째 매개변수는 컨트롤러를 만든걸 넣어준다. (컨트롤러는 따로 작성하여 import해서 가져온다)

참고 : https://expressjs.com/ko/guide/routing.html

import express from "express";
import routes from "../routes";
import {home, search} from "../controller/videoController";
import {getJoin, getLogin, logout, postJoin, postLogin} from "../controller/userController";

const globalRouter = express.Router();

globalRouter.get(routes.join, getJoin);
globalRouter.post(routes.join, postJoin);

globalRouter.get(routes.login, getLogin);
globalRouter.post(routes.login, postLogin);

globalRouter.get(routes.home, home);
globalRouter.get(routes.search, search);
globalRouter.get(routes.logout,logout);

export default  globalRouter;

import express from "express";
import {changePassword, editProfile, userDetail} from "../controller/userController";
import routes from "../routes";


const userRouter = express.Router();

userRouter.get(routes.editProfile, editProfile);
userRouter.get(routes.changePassword, changePassword);
userRouter.get(routes.userDetail(), userDetail);

export  default userRouter;

 

 

 

 

 

<controller 패키지에 분리>

컨트롤러이다. 라우터에서 해야할 일들을 정의해논다. 해당 url경로에 들어오면 해야할 작업... 예를들어 가장 크게는 View를 보여줘야할 것이고 데이터 조작 및 송수신이 있을 것이다.

userController.js 코드이다. join, login 등 뷰를 클라이언트에게 보여주고 데이터를 json 형태로 보내줄 수도 있다. get, post로 이름을 나눠 구분하기 쉽게 해놨다. 그리고 post방식 같은 경우는 앞서 app.js에서 bodyParser를 미들웨어로 사용했으므로 req.body로 상대방이 전송한 데이터를 읽고 조작할 수 있다.

import routes from "../routes";

export const getJoin = (req, res) =>{
    res.render("join", {pageTitle: "Join"});
}

export const postJoin =(req,res) => {
    console.log(req.body);
    const {
        body: {name, email, password, password2}
    } = req;
    if(password !== password2){ //패스워드가 서로다르면 에러상태코드 전달
        res.status(400);
        res.render("join", {pageTitle: "Join"});
    }else{
        //TODO: Register User
        //TODO: Log user in
        res.redirect(routes.home); //로그인성공하면 홈화면으로 리다이렉트
    }
};

export const getLogin = (req, res) =>
    res.render("login", { pageTitle: "Log In" });
export const postLogin = (req, res) => {
    res.redirect(routes.home);
};

export const logout = (req, res) => {
    // To Do: Process Log Out
    res.redirect(routes.home);
};

export const userDetail = (req, res) =>
    res.render("userDetail", {pageTitle: "User Detail"});
export const editProfile = (req, res) =>
    res.render("editProfile", {pageTitle: "Edit Profile"});
export const changePassword = (req, res) =>
    res.render("changePassword", {pageTitle: "Change Password"});

 

VideoController이다. DB가 현재 연동을 안해서 임시로 json으로 디비를 만들어놓고 videos로 import한 상태이다.

import { videos } from "../db";
import routes from "../routes";

export const home = (req, res) => {
    res.render("home", { pageTitle: "Home", videos });
};

export const search = (req, res) => {
    const {
        query: { term: searchingBy }
    } = req;
    res.render("search", { pageTitle: "Search", searchingBy, videos });
};

export const getUpload = (req, res) =>
    res.render("upload", { pageTitle: "Upload" });

export const postUpload = (req, res) => {
    const {
        body: { file, title, description }
    } = req;
    // To Do: Upload and save video
    res.redirect(routes.videoDetail(324393));
};

export const videoDetail = (req, res) =>
    res.render("videoDetail", { pageTitle: "Video Detail" });

export const editVideo = (req, res) =>
    res.render("editVideo", { pageTitle: "Edit Video" });

export const deleteVideo = (req, res) =>
    res.render("deleteVideo", { pageTitle: "Delete Video" });

 

 

 

 

마지막으로 VIew는 views 패키지에 담아놓았고 pug를 사용했다.

예를들어 search.pug이다.

extends layouts/main
include mixins/videoBlock

block content
    .search__header
        h3 Searching for #{searchingBy}
    .search__videos
        each item in videos
            +videoBlock({
                title: item.title,
                views: item.views,
                videoFile: item.videoFile
            })