NodeJS / Express Back to Front__002 (Router)

Router

라우터는 controller와 url관리를 쉽게 해준다.

 

Router 구성

라우터를 구성하기에 가장 먼저 생각해야할 것은 데이터이다.

어떤 종류의 데이터를 사용할건지 정해야한다 예를들면

"/" => Home

"/music" => Music
"/music/upload" => Music upload
"/music/:id" => about id of Music

"/video" => Video
"/video/:id" => to see Video
"/video/upload" => upload Video

"/user" => User
"/user/edit" => Edit user
"/user/:id" => show other User

 

Express에서 Router 생성

const router = express.Router()

Router사용

const globalRouter = express.Router();
const musicRouter = express.Router();
const userRouter = express.Router();

app.use("/", globalRouter);
app.use("/music", musicRouter);
app.use("/user", userRouter);

// "/"
globalRouter.get("/", (req, res) => {
	return res.send("1");
});

// "/music"
musicRouter.get("/", (req, res) => {
	return res.send("2");
});

// "/user"
userRouter.get("/", (req, res) => {
	return res.send("3");
});

// "/user/info"
userRouter.get("/info", (req, res) => {
	return res.send("info");
});

 

Router Refactor..

위와 같이 작성하게 되면 코드가 길어지니 파일을 만들어 해당 Router를 불러오게 만들어주면 관리도 용이하게 된다.

// src / routers / golobalRouter.js or ts

import express from "express";

export const globalRouter = express.Router();

globalRouter.get("/", (req, res) => {
	return res.send("1");
});

 

router 뿐만 아니라 controller도 따로 파일 을 만들어 관리를 해주는 것이 좋다. 함께 두어도 작동은 하겠으나 파일의 목적과 관리의 성향이 서로 다르기 때문에 따로 폴더를 만들어주는 것이 좋다.

 

URL Parameters

/:id에서 :id 가 parameter이다. parameter가 없다면 같은 카테고리의 페이지들에 대한 라우터들을 만들어줘야한다. 파라미터가 있기에 /video/1, /video/2,/video/3, /video/4,/video/6, /video/2222 같은 것들이 가능하다.

 

":" 가 무조건 있어야한다 없다면 그것은 그냥 텍스트 일뿐이다.

 

//videoRouters.js or ts

import express from "express";
import { video } from "../controllers/videoController";

const movieRouter = express.Router();

movieRouter.get("/", (req, res) => {
	return res.send("movie");
});
movieRouter.get("/:id", video);
export default movieRouter;



//videoController.js
export const video= (req, res) => {
	console.log(req.params); // /video/123123 => {id: 123123}
	return res.send("video");
};

주의 해야할 점은 Express에서 변수를 활용한 "/:id" 같은 router들은 "/asdfasd" 일반적인 텍스트 라우터보다 아래에 명시 되어야한다. 이것을 해결하기위해서는 텍스기반의 라우터를 위에 두는 방법도 있지만 "정규식"을 통해 해결할 수 있다.

https://regexone.com/

RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs