Node.js의 Router

Project using node.js/Cloning Youtube 2020. 8. 21. 11:23

소개

이제 개발을 위한 기본적인 세팅은 끝났다. 이번에 할 작업은 router다. youtube(가제 wetube)를 사용하기 위해서는 필요한 기능들이 있다. home, uploading video, join, login and etc...이다. 이러한 기능들은 사용자가 해당 URL을 접속했을 때 사용할 수 있다. 사용자가 어떤 URL을 접속하냐에 따라 서버가 그에 따른 페이지를 보여줘야 하는데, 이것을 routing 작업이라고 한다. 여기서 내가 만들 파일은 크게 2가지다. routes.js와 Router(globalRouter.js, userRouter.js, videoRouter.js)다.

다 만들게 된다면 디렉토리 구조는 다음과 같다. controller 폴더도 존재하는데, routing을 했으면 유저의 요청에 따라 어떤 callback 함수를 실행시킨다. 그러한 callback 함수들을 모아둔 곳이 controller다.

routes.js

// home
const HOME = '/';
const SEARCH = '/search';
const JOIN = '/join';
const LOGIN = '/login';
const LOGOUT = '/logout';
const ME = '/me';

// users
const USERS = '/users';
const EDIT_PROFILE = '/edit-profile';
const CHANGE_PASSWORD = '/change-password';
const USER_DETAIL = '/:id';

// videos
const VIDEOS = '/videos';
const UPLOAD = '/upload';
const VIDEO_DETAIL = '/:id';
const EDIT_VIDEO = '/:id/edit-video';
const DELETE_VIDEO = '/:id/delete-video';

const routes = {
  // global
  home: HOME,
  search: SEARCH,
  join: JOIN,
  login: LOGIN,
  logout: LOGOUT,
  me: ME,

  // user
  users: USERS,
  editProfile: EDIT_PROFILE,
  changePassword: CHANGE_PASSWORD,
  userDetail: (id) => {
    if (id) {
      return `/users/${id}`;
    }
    return USER_DETAIL;
  },

  // video
  videos: VIDEOS,
  upload: UPLOAD,
  videoDetail: (id) => {
    if (id) return `/videos/${id}`;
    return VIDEO_DETAIL;
  },
  editVideo: (id) => {
    if (id) return `/videos/${id}/edit-video`;
    return EDIT_VIDEO;
  },
  deleteVideo: (id) => {
    if (id) return `/videos/${id}/delete-video`;
    return DELETE_VIDEO;
  },
};

export default routes;

routes.js 파일을 만들고 위와 같이 routes라는 객체를 생성한다. routes.js 파일은 routing을 하기 위한 재료라고 생각하면 된다. 이제 이 재료를 각각의 router들이 사용하여 callback 함수들을 불러온다.

globalRouter.js

import express from 'express';
import routes from '../routes';
import { home, search } from '../controller/videoController';
import { join, logout, login } from '../controller/userController';

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;

express.Router()를 사용하여서 globalRouter를 만들었다. globalRouter.get()에서 get은 request의 method를 담당한다. 사용자가 get으로 요청을 하는지 아니면 post로 요청하는지에 따라 다르다. globalRouter.get()은 사용자가 get 요청을 하였을 때만 실행이 된다.

만약 사용자가 join버튼을 누르면 globalRouter.get(routes.join, join)이 실행이 되고 callback함수인 join을 실행한다. 그러면 회원가입을 할 수 있는 페이지를 서버가 보여준다.

userController.js

export const join = (req, res) => {
  res.send('Hi join');
};
export const login = (req, res) => {
  res.send('Hi login');
};
export const logout = (req, res) => {
  res.send('Hi logout');
};

export const userDetail = (req, res) => {
  res.send('Hi userDetail');
};

export const editProfile = (req, res) => {
  res.send('Hi editProfile');
};

export const changePassword = (req, res) => {
  res.send('Hi changePassword');
};

userController.js다. routes.join이 실행이 되면 userController.js 안에 있는 join이 실행이 되고 res.send('Hi join')가 실행이 된다. router를 만드는 단계이기 때문에 controller 파트는 아직 제대로 구현하지는 않았다.

여기서 req(request)는 사용자로부터 서버가 받은 요청을 뜻하고 res(response)는 서버가 사용자에게 보내야할 응답을 뜻한다. req와 res는 각각 가지고 있는 메소드들이 있는데, res.send()는 인자로 html 코드를 써서 보낼 수가 있다. 다양한 middlewares에서 body-parser를 설치한 적이 있는데, body-parser를 여기서 사용한다. 사용자가 form 형식으로 데이터를 보내면 controller에 있는 함수들이 그 값을 받고 req.body로 사용자가 보낸 데이터를 처리할 수가 있다.

app.js

import express from 'express';
import morgan from 'morgan';
import helmet from 'helmet';
import bodyParser from 'body-parser';
import cookieParser from 'cookie-parser';
import routes from './routes';
import globalRouter from './router/globalRouter';
import userRouter from './router/userRouter';
import videoRouter from './router/videoRouter';

const app = express();

app.use(helmet());

app.use(cookieParser());

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(morgan('dev'));

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

export default app;