<Express.js> Router-3

Router-2에서 봤듯이 url이 늘어날수록 개발자도 기억을 하거나 확인하기가 어려워집니다. url 구조를 한곳에서 변수로 관리해봅시다. 먼저 routes.js 파일을 만들어 줍니다.

project

youtube
 +|routes.js
 *|app.js
  |routers
   *|globalRouter.js
   *|userRouter.js
   *|videoRouter.js

routes.js

  • :변수이름
    express는 :부분을 변수로 처리하고 이 부분은 req.params에 변수이름과 동일한 key에 담기게 됩니다.:id 부분은 req.params.id에 값이 담기게 되겠죠.
/*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_VIDEO = '/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_DETATIL,
  	editProfile: EDIT_PROFILE,
  	changePassword: CHANGE_PASSWORD,
  	videos: VIDEOS,
  	uploadVideos: UPLOAD_VIDEO,
  	videoDetail: VIDEO_DETAIL,
  	editVideo: EDIT_VIDEO,
  	deleteVideo: DELETE_VIDEO
}

export default routes;

자 이렇게 위와 같이 URL을 정리했구요 routes라는 객체를 만들어서 전체를 export하였습니다.

app.js

import routes from './routes.js';

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

globalRouter.js

import express from 'express';
import routes from '../routes.js';

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'));

만약에 사용자가 '/join'에 접속하면 어떤 문구가 뜰까요? join이죠.
userRouter, videoRouter에도 동일하게 코드를 작성할 수 있으므로 생략하겠습니다.

좋은 웹페이지 즐겨찾기