[wetube] #2.9~2.12

6mn12j·2020년 8월 26일

CloneCording TIL

WeTube

목록 보기

1/12

+ 이 글은 노마드 코더의 [유튜브 클론 코딩] 내용을 담고 있습니다.

MVC Pattern

M model: data
V view: data 가 어떻게 생겼는지
C controller: 데이터를 보여주는 함수

설치해서 쓰는게 아닌 패턴,구조임.

url과 함수를 데이터의 모습에 맞춰서 분리. 한 파일에서는 한 기능만 할 수 있게
userRouter,videoRouter,globalRouter등 router들을 routers 폴더에 모아서 처리

//userRouter
import express from "express";

const useRouter = express.Router();

export default useRouter;

//userRouter
import express from "express";

const videoRouter = express.Router();

export default videoRouter;

export default 는 파일전체를 export 해서 다른 파일에서 사용할 수있게 해준다.export const videoRouter = express.Router(); 이때는 이 변수만 export한다는 뜻.

//app.js
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";
import globalRouter from "./routers/globalRouter";

app.use("/",globalRouter);
app.use("/users",userRouter);
app.use("video",videoRouter);

app.js에서 import 해서 사용 할 수있다.userRouter와 videoRouter는 /user/login /user/join 이런식으로 user와 관련된 url, video와 관련된 url에 따로 사용이 가능하고 globalRouter는 /join /login /home root("/")로 접속하면 globalRouter를 찾아서 다뤄준다. 독점적으로 url을 다룰 수 있는 방법이다.

//routes.js

//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;

"/id/edit"의 경우엔 id를 그냥 텍스트로 인식하지만 "/:id/edit" :id가 변하는 값이라는걸 express가 알 수 있다.
만들어진 routes 를 export해서 다른 파일에서도 사용이 가능하게 해준다.

/*
app.use("/",globalRouter);
app.use("/users",userRouter);
app.use("video",videoRouter);
*/
app.use("routes.home",globalRouter);
app.use("routes.user",userRouter);
app.use("routes.videos",videoRouter);

이렇게 되면 redirect 할때 전체 url 구조를 기억할 필요 없이 route.home routes.uerDetail로 불러올 수있다.

Controller

대게 프로젝트의 각 모델마다 controller를 만든다.
이번 프로젝트를 살펴보면,우선 Global 의 HOME에는 비디오들이 전달,SERCH는 비디오를 위한 검색, JOIN,LOGIN,LOGOUT user와 연관. user와 video 관련 된 것들만 있기 때문에 컨트롤러도 2개를 만든다.

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

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

//Users
......

//Videos
......

controllers 폴더에 userContreller,videoController 파일을 만들고각가 3개,2개 함수를 추가해서 export 해준다.
export한 함수들은 router에서 import해서 사용

export해준 후 자동으로 import 해주는 vscode의 기능을 사용하여 코드를 수정.

//globalRouter.js
//globalRouter.get(routes.home,(req,res)=>res.send("home");
//globalRouter.get(routes.search,(req,res)=>res.send("search");
globalRouter.get(routes.home,home);
globalRouter.get(routes.search,search);