액티브 스킬/노드

<Node.js> Express (Routes, Controllers, URL parameter)

디벅잉 2021. 11. 7. 23:07
728x90

📌 import "[풀스택] 유튜브 클론코딩 (nomadcoders.co)";

 

&lt; 출처: MDN Web Docs &gt;

Router

무엇인가?

URL을 모듈화하여 정리하는 방법

어떻게 사용하는가?

1-1. 라우터 생성

- const [변수명]videoRouter = express.Router();

1-2. 라우터 export

- export default [변수명]videoRouter; (한 파일에서 한번만 가능)

import express from "express";
import {watch, edit} from "../controllers/videoController.js";

const videoRouter = express.Router();

videoRouter.get("/:id(\\d+)", watch);
videoRouter.get("/:id(\\d+)/edit", edit);

export default videoRouter;

< "videoRouter.js" 소스코드 >

2-1. 라우터 import

- import [변수명]videoRouter from "./routers/videoRouter.js"; (변수명 임의로 작성 가능)

2-2. 라우터의 상위 URL에 라우터 모듈을 로드

- app.use("/[URL명]videos", [라우터명]videoRouter);

import express from "express";
import videoRouter from "./routers/videoRouter.js";

const app = express();

app.use("/videos", videoRouter);

< "server.js" 소스코드 >

왜 사용하는가? 

비슷한 성격의 URL 주소들을 라우터 하나로 묶어서 유지관리에 유리함

 

Controller

무엇인가?

사용자(브라우저)의 요청에 반응하는 역할

어떻게 사용하는가?

1. 컨트롤러 정의 및 export

export const [변수명] = (req, res) => res.send("watch");

export const watch = (req, res) => res.send("watch");
export const edit = (req, res) => res.send("edit");

< "videoController.js" 소스코드 >

2.1 컨트롤러 import

import { [변수명] } from "../controllers/videoController.js"; (변수명 변경 불가)

2.2 라우트의 요청(request)을 받을 컨트롤러 정의

[라우트명]videoRouter.get("/[URL명]:id(\\d+)", [controller명]watch);

import express from "express";
import {watch, edit} from "../controllers/videoController.js";

const videoRouter = express.Router();

videoRouter.get("/:id(\\d+)", watch);
videoRouter.get("/:id(\\d+)/edit", edit);

export default videoRouter;

< "videoRouter.js" 소스코드 >

왜 사용하는가? 

라우터와 템플릿을 각각 독립적으로 관리할 수 있게 도와줌

 

URL parameter

무엇인가?

URL에 매개변수를 두는 것

어떻게 사용하는가?

1. URL 작성

- "/:[parameter명](\\d+)"

import express from "express";
import {watch, edit} from "../controllers/videoController";

const videoRouter = express.Router();

videoRouter.get("/:id(\\d+)", watch);
videoRouter.get("/:id(\\d+)/edit", edit);

export default videoRouter;

< "videoRouter.js" 소스코드 >

2. 파라미터 활용

- req.params.id

const { id } = req.params;

< "videoController.js" 소스코드 >

왜 사용하는가? 

라우터의 요청(req)이 그룹화가 가능한 경우, 각각 요청에 대한 URL을 일일이 정의하지 않아도 됨

 

&lt; 출처: MDN Web Docs &gt;

 

 

728x90