ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [NOMAD CODERS_Wetube] MVC Pattern
    TodayILearned/Wetube 2020. 7. 8. 23:31

    결과물


    목적

    WETUBE 코드에 MVC 패턴을 적용하여 유지보수하기 편리하게 만드는 것

    Routes에 각각의 pass를 입력 할 경우 화면에 단어를 송출하는 로직을 가진 컨트롤러를 추가한다.


    CODE

    userController.js

    export const join = (req, res) => res.send("Join");
    export const login = (req, res) => res.send("Login");
    export const logout = (req, res) => res.send("Logout");
    export const users = (req, res) => res.send("users");
    export const userDetail = (req, res) => res.send("user Detail");
    export const editProfile = (req, res) => res.send("Edit Profile");
    export const changPassword = (req, res) => res.send("Change password");
    

    videoController.js

    export const videos = (req, res) => res.send("videos");
    export const upload = (req, res) => res.send("upload");
    export const videoDetail = (req, res) => res.send("ViedoDetail");
    export const deleteVideo = (req, res) => res.send("Delete Video");
    export const home = (req, res) => res.send("HOME");
    export const search = (req, res) => res.send("SEARCH");
    

    Router Code

    더보기

    GlobalRouter.js

    import express from "express";
    import routes from "../routes";
    import { home, search } from "../controllers/videoController";
    import { join, login, logout } from "../controllers/userController";
    
    const globalRouter = express.Router();
    
    globalRouter.get(routes.home, home);
    globalRouter.get(routes.join, join);
    globalRouter.get(routes.search, search);
    globalRouter.get(routes.login, login);
    globalRouter.get(routes.logout, logout);
    
    export default globalRouter;
    

    userRouter.js

    import express from "express";
    import routes from "../routes";
    import {
    	userDetail,
    	editProfile,
    	changPassword,
    	users,
    } from "../controllers/userController";
    
    const userRouter = express.Router();
    
    userRouter.get(routes.users, users);
    userRouter.get(routes.userDetail, userDetail);
    userRouter.get(routes.editProfile, editProfile);
    userRouter.get(routes.changePassword, changPassword);
    
    export default userRouter;
    

    videoRouter.js

    import express from "express";
    import routes from "../routes.js";
    import {
    	videos,
    	upload,
    	videoDetail,
    	deleteVideo,
    } from "../controllers/videoController";
    
    const videoRouter = express.Router();
    
    videoRouter.get(routes.videos, videos);
    videoRouter.get(routes.upload, upload);
    videoRouter.get(routes.videoDetail, videoDetail);
    videoRouter.get(routes.deleteVideo, deleteVideo);
    
    export default videoRouter;
    

    1. 분류에 맞게 컨트롤러를 나눈다. (user Controller, video Controller)

    2. 각각의 값에 송출할 값을 배정한다. 

    3. 각각의 라우터에 컨트롤러에서 선언된 값을 불러온다.

    (VSC에서는 import를 먼저 하지 않아도 get 메소드를 사용하면 자동으로 import 선언이 된다.)


    Error 내역

    1. Route.get() require a call back function

    컨트롤러 코드와 라우터 코드 내의 선언값이 불일치하여 나타난 오류였음.

    (ex: videos  >  vedios)

Designed by Tistory.