본문으로 바로가기

습관적으로 Router는 다음을 세팅해 놓고 사용합시다.

import express from "express"

const router = express.Router();

export default router

 

// app.js

app.use(routes.users, userRouter);
//userRouter.js

import express from "express";

const userRouter = express.Router();

userRouter.get("/editProfile", (req, res) => "editProfile");
userRouter.get("/changePassword", (req, res) => "changePassword");
userRouter.get("/users/:id", (req, res) => `username: ${req.parms.id}`);
// id값은 req.params에 있다.
userRouter.get("/users", (req, res) => "users");

export default userRouter;

 

 

app.js에서 route 파일을 통째로 쓸 때는 use를 사용하고 그 내부에 이동할 때는 get을 사용함

 

이를 이용하면 app.use("/abc") + router.get('df) = GET /abc/df 꼴이 된다.

🎈 users/:id, req.params
문자 그대로 :id가 아니라 users/darren, users/3 따위를 의미합니다. 여기에 입력한 값은 req.params 객체에 저장되니 이를 활용하자.
다만 /:id를 이용할 때 주의할 점은 다른 일반 라우터보다 뒤에 위치해야 다른 라우터를 방해하지 않는다는 것입니다.


시험 삼아 다음을 예측해보자. 우리는 다음 코드를 통해 어떤 routes를 가지게 되는 것일까?

//app.js
import { userRouter } from "./router";

app.get("/", (req, res) => res.send("HOME"));
app.get("/profile", (req, res) => res.send("profile"));
app.use("/user", userRouter);
//router.js
import express from "express";

export const userRouter = express.Router();

userRouter.get("/", (req, res) => res.send("user index"));
userRouter.get("/edit", (req, res) => res.send("user edit"));
userRouter.get("/password", (req, res) => res.send("user password"));

우리는 

/

/profile

/user

/user/edit

/user/password

 

를 가지게 되는 셈이다.

 

 

하지만 이렇게 use()와 get(), post() 등이 혼재해 있으면 헷갈리므로 대개

app.js에는 use()를 통해 크게 라우팅하고 세부적인 http method(get, post ... etc)는 router 폴더 내에 생성한 라우팅만 전담하는 파일에서 설정한다.

 

// app.js
// router
app.use(routes.home, globalRouter);
app.use(routes.users, userRouter);
app.use(routes.videos, videoRouter);
//globalRouter
globalRouter.get(routes.join, getJoin);
globalRouter.post(routes.join, postJoin);
globalRouter.get(routes.home, home);
globalRouter.get(routes.login, getLogin);
globalRouter.post(routes.login, postLogin);
globalRouter.get(routes.logout, logout);
globalRouter.get(routes.search, search);

export default globalRouter;

 

 


darren, dev blog
블로그 이미지 DarrenKwonDev 님의 블로그
VISITOR 오늘 / 전체