[유튜브 클론코딩] 2.11 MVC Pattern - Part. 3

2.11 MVC Pattern - Part. 3

 

컨트롤러 만들기(Controller)

 

이제 여기 이 구조에서 자유로워지기 위해 controller를 사용할 차례이다.

컨트롤러는 어떤 일이 어떻게 발생하는지에 관한 로직이다.

여기에 있는 모든 함수들을 말하는 것이다.

여기 이 함수들을 모두 컨트롤러에 담을 것이다.

 

1) controllers 폴더를 만든다.

그리고 그 안에는 비디오 컨트롤러(videoController.js)와 유저 컨트롤러(userController.js) 이렇게 두 개의 컨트롤러를 만들 것이다.

 

대게 프로젝트에 있는 각 모델마다 컨트롤러를 만들게 된다.

route에는 global , users, videos가 있고

global 안에는 home, join, login,logout, search가 있다.

- home 화면에는 비디오들이 전달될 것이고 search는 비디오 검색을 위한 주소 : video에 관한 것

- join, login, logout : user에 관한 것

아무튼 이렇게 video와 user에 관한 것들만 있기 때문에 컨트롤러도 2개만 만들 것이다.

 

 

2) videoController.js와 userController.js 파일을 만든다. (controllers 폴더 안에)

이제 여기 컨트롤러에 많은 함수들을 추가할 것이다.

그리고 추가할 함수 각각을 export할 것이다.

예를 들어, globalRouter에서 Home 함수는 videoController로 이동시킨다. (video에 관한 것이니까)

home, search  -> 비디오와 관련있으므로 videoController에서 함수를 작성

join,login,logout -> 유저와 관련있으므로 userController에서 함수를 작성

 

 

import express from "express";

import routes from "../routes";

const globalRouter = express.Router();

globalRouter.get(routes.home, (req,res) => res.send("Home"));

globalRouter.get(routes.join, (req,res) => res.send("JOIN"));

globalRouter.get(routes.login, (req,res) => res.send("LOGIN"));

globalRouter.get(routes.logout, (req,res) => res.send("LOGOUT"));

globalRouter.get(routes.search, (req,res) => res.send("SEARCH"));

export default globalRouter;

이것을 각각 videoController와 userController에서 작성해본다.

 

export const home = (req, res) => res.send("Home");

export const search = (req, res) => res.send("Search");

↑ videoController.js (함수 각각을 export 해줌)

 

export const join = (req,res) => res.send("Join");

export const login = (req,res) => res.send("Login");

export const logout = (req,res) => res.send("Logout");

 ↑ userController.js (역시 export 해줌)

 

 

이제 export한 함수들을 router에서 import 해서 사용하자.

vscode의 마법같은 기능을 사용할 것이다. globalRouter 파일로 온다.

여기 보면 home이라고 쳤을 때 controllers/videoController라고 뜨고 auto import 어쩌구 뜨는거 보일 것이다 그것을 선택해준다. (export했을 때에만 할 수 있는 기능)

나머지도 마찬가지로 다 바꾼다.

 

import express from "express";

import { join, login, logout } from '../controllers/userController';

import { home, search } from '../controllers/videoController';

import routes from "../routes";

const globalRouter = express.Router();

globalRouter.get(routes.home, home);

globalRouter.get(routes.search, search);

globalRouter.get(routes.join, join);

globalRouter.get(routes.login, login);

globalRouter.get(routes.logout, logout);

 

export default globalRouter;

 

↑ globalRouter.js

 

여기까지 확인해보니 잘 작동한다. 저 부분은 내가 작성한게 아닌데 함수를 import해오니깐 자동으로 작성이 되었다.

 

나머지 userController도 마저 작성한다. -> 다음 시간에!