[유튜브 클론코딩] 2.10 MVC Pattern - Part. 2

2.10 MVC Pattern - Part. 2

그냥 별거아닌데 app.js에서 경로만 /users, /videos로 바꾸고 시작!

 

URL 만들기(routes.js)

routes.js 파일을 만든다.

→ 쪼개서 처리하는 것이 좋기 때문, 나중에 다른 곳에서 같은 URL을 사용해야할 수도 있다. 어딘가 다른데서 사용하려면 이 구조를 내가 외워야 한다는 것이다. 좀 더 편하기 위해 URL을 변수로 선언해서 모아놓은 routes.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"; 

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: USER_DETAIL,

    editProfile: EDIT_PROFILE,

    changePassword: CHANGE_PASSWORD,

    videos: VIDEOS,

    upload: UPLOAD,

    videoDetail: VIDEO_DETAIL,

    editVideo: EDIT_VIDEO,

    deleteVideo: DELETE_VIDEO

};

export default routes;

routes.js를 다음과 같이 작성한다.

// :id 이런식으로 한 이유는, express가 매우 똑똑해서 이런 형태의 URL을 보면 이 값은 변하는 값이구나를 알아차린다.

// id는 텍스트로 알아차리지만 :id는 변하는 값으로 express가 인지한다.

 

아무튼 이제 이것을 작성했기 때문에 더 이상 "/" 이런식으로 하지 않아도 된다. 다른데에서 import하기만 하고 변수처럼 사용가능하다.

 

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;

 ↑ globalRouter.js 에 다음과 같이 작성한다.

routes.js 파일에서 미리 경로를 변수처럼 선언해놨기 때문에 다음과 같이 경로를 변수 이름 처럼 작성할 수 있다

 

app.use(routes.home, globalRouter);
app.use(routes.users, userRouter);
app.use(routes.videos,videoRouter);

↑app.js에서도 경로 부분을 이렇게 수정해준다.