Nomad-Wetube-4) Routers

이은지·2023년 2월 10일
0

풀스택 유튜브 클론코딩 강의 #4.0 ~ 4.8 (230210)

1. Routers

컨트롤러와 URL의 관리를 쉽게 해줌

import express from "express";

const globalRouter = express.Router(); //라우터 변수를 생성

const handleHome = (req, res) => res.send("Home"); //핸들러 함수 생성
const handleJoin = (req, res) => res.send("Join");

globalRouter.get("/", handleHome); //라우터를 핸들러에 연결
globalRouter.get("/join", handleJoin);

export default globalRouter;

  • 핸들러 함수를 contollers로 분리해 작업해줌

[videoController.js]

export const handleWatchVideo = (req, res) => res.send("Watch Video");
export const handleEdit = (req, res) => res.send("Edit Video");

[videoRouter.js]

import express from "express";

const videoRouter = express.Router();

videoRouter.get("/watch", handleWatchVideo);
videoRouter.get("/edit", handleEdit);

export default videoRouter;
  • export default : 한개만 export 할 수 있다
  • export : 여러개를 export 할 수 있다 (import 할때도 같은 이름을 써야함)
  • res.send : response를 보내는 역할을 수행. 기본적으로 response 처리를 할때 content-type을 지정해주어야하는데 res.send는 데이터 타입을 파악해서 알맞은 content-type을 지정해줌.

Q) /products URL 접두사에 productsRouter를 어떻게 사용할까?
A) app.use("/products", productsRouter)

Q) /products URL에 대한 productsRouter 내부에 get 라우터를 어떻게 만들 수 있을까?
A) productsRouter.get("/", fn)

2. Parameter

파라미터는 url안에 변수를 넣는걸 허용해준다

videoRouter.get("/upload", upload);
videoRouter.get("/:id", see);
videoRouter.get("/:id/edit", edit);
videoRouter.get("/:id/delete", deleteVideo);
  • /:id => url에 변수값을 넣어 줄 수 있게 해준다 (id가 변수라고 인식하게 해줌)
  • /upload를 위에 쓴 이유 : respond 를 받아올때 /:id 의 변수 중 하나라고 인식하기 때문이다

//dev로 시작하는 단어를 모두 선택하고 싶을때
/(dev\w+)/g
//숫자로 이루어진 id만 얻고싶을 때
/:id(\\d+)/g

\w+ 모든 문자 선택
\d+ 모든 숫자 선택
(js 에서는 \하나 더 붙이기)

git commit
Router : https://github.com/dmswl2030/Newtube-repeat/commit/54e6269ca32e4fe3a57c9e61c597ac7efcc486be
Parameter : https://github.com/nomadcoders/wetube-reloaded/commit/c93aa16c37f20c32559e38e710fa3920761eb85a

0개의 댓글