[JavaScript, Node.js] 유튜브 클론 정리 4장 (1) - Router

머리글

이번 시간에는 라우터에 대해서 알아보자.

Router

컨트롤러와 URL의 관리를 쉽게 해주는 것이 라우터다.
미니 어플리케이션을 만들어준다고 생각하면 된다.

우선 라우터를 하나 생성해 보자.

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

app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

express에선 기본적으로 라우터 기능을 제공하므로, 이런 식으로 쉽게 라우터를 만들 수 있다.
이렇게 만들면 각 주소로 접근이 가능하다.

그렇다면 렌더링 할 페이지도 만들어보자.

const handleHome = (req, res) => res.send("Home");
const handleUser = (req, res) => res.send("User");
const handleVideo = (req, res) => res.send("Video");

globalRouter.get("/", handleHome);
userRouter.get("/users", handleUser);
videoRouter.get("/videos", handleVideo);

이런 식으로 (라우터이름).get(URL, 콜백함수) 형식으로 사용이 가능하다.

그런데 이런식으로 라우터를 한 곳에 몰아넣으면 보기가 안 좋으니까 정리를 해보도록 하자.

import express from "express";

const globalRouter = express.Router();

const handleHome = (req, res) => res.send("Home");

globalRouter.get("/", handleHome);

export default globalRouter;

일단 글로벌라우터를 다른 파일에 하나 만들어준다.
export를 하게 되면 다른 파일에서 이 파일을 import가 가능하다.

default의 경우 기본적으로 이 파일이 export 되기 때문에 다른 파일에서 얼마든지 이름을 변경해서 사용할 수 있다.
우리가 express를 굳이 express가 아닌 apple로 사용이 가능한 것과 같다.
물론 편의를 위해 굳이 이름을 변경하는 경우는 많이 없다.

이 경우에는 한 파일에서 하나의 export만 가능하다.
한 파일에서 여러 개의 파일을 export 하기 위해선 default를 제거하고 다음과 같은 방식으로 할 수 있다.

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

이런 식으로 작성하면 하나의 파일에서 여러 개의 export가 가능하다.

이 파일들을 다른 파일에서 import 하기 위해선 방법이 조금 다르다.

import globalRouter from "...";
import {watch, edit} from "...";

default의 경우 하나의 파일에 하나의 export 밖에 없으므로 {}를 사용하지 않아도 무방하다.
하지만 일반 export의 경우 하나의 파일에서 여러 개의 함수를 import 할 수 있으므로,
괄호 안에 실제 이름을 그대로 사용해야 한다.

마무리

이번 시간에는 라우터의 사용 방법과 export의 두 가지 방법에 대해서 알아보았다.

다음 시간에는 URL 파라미터에 대해서 알아보도록 하자.