2. router, import, export

우리는 유튜브를 클론코딩 할건데 여기서 크게 유저와 동영상으로 나눌 수 있다.

유저를 만들고 수정하고 지우고..
동영상을 올리고 수정하고 지우고..

url이름을 어떻게 정할지 생각해보자

 

/ -> home
/join
/login
/search
/edit-user
/delete-user
/edit-video
/delete-video

 

단순히 url을 이렇게 지어도 되긴 된다.

하지만 수많은 기능들이 추가되면

ex) /edit-user-comment 보기에도 복잡하고 코드도 난잡해질게 분명하다.

 

여기서 등장하는게 라우터!! make it router 
라우터는 컨트롤러와 URL의 관리를 쉽게 해준다

크게 기본, 비디오, 유저로 나눌 수 있다.

/ <globalRouter

/join

/login

 

/videos <videosRouter

/videos/edit

/videos/delete

 

/users <usersRouter

/users/edit

/users/delete

이런식으로 깔끔하게 구역을 나누면 보기에도 편하고 관리하기도 훨씬 편해진다

라우터는 작업중인 주제를 기반으로 URL을 그룹화해준다

import express from "express";
import morgan from "morgan";
const PORT = 4000;
const server = express();
const logger = morgan("dev");

const videoRouter = express.Router();
const globalRouter = express.Router();
const usersRouter = express.Router();
videoRouter.get("/delete", (req, res) => res.send("video delete"));
usersRouter.get("/delete", (req, res) => res.send("user delete"));
globalRouter.get("/join", (req, res) => res.send("global join"));

server.use(logger);
server.use("/", globalRouter);
server.use("/videos", videoRouter);
server.use("/users", usersRouter);

const handleListening = () => {
  console.log(`✅ server is listening on ${PORT} port 🚀`);
};
server.listen(PORT, handleListening);

 

const videoRouter = express.Router() 라우터는 이렇게 간단히 만들 수 있다.app.use(/videos, videosRouter) videosRouter.get('/delete', handleDelete)

 

localhost:4000/videos/delete라고 브라우저에 입력을 한다고 가정해보자

1. 누군가가 "/videos"로 시작하는 url에 접근하면
2. videoRouter안으로 들어간다
3. 이 라우터 안에 "/delete"라는 url이 있는지 확인하고 있다면 그에 맞는 response(handleDelete)를 응답할 것이다.

 

하지만 이렇게 놔 둔다면 수많은 url이 생성되고 handler도 많아질텐데..

깔끔해보이긴하지만 한 파일에 수 많은 코드가 생길 것이다.

 

그래서 export와 import를 통해 모듈화를 시켜줘 보기 좋고 관리하기 좋게 만들어 보자!!

2021.09.09 - [이것 저것] - ES6 import export

ES6 import export

 

 

 

Router라는 폴더를 생성하고

videosRouter.js

globalRouter.js

usersRouter.js 를 생성하자

import express from "express";
const videosRouter = express.Router();

videosRouter.get("/delete", (req, res) => res.send("video delete"));

export default videosRouter;

이런 식으로 모든 다른 Router들도 만들어 주자

import express from "express";
import morgan from "morgan";
import globalRouter from "./Router/globalRouter";
import usersRouter from "./Router/usersRouter";
import videosRouter from "./Router/videosRouter";
const PORT = 4000;
const server = express();
const logger = morgan("dev");

server.use(logger);
server.use("/", globalRouter);
server.use("/videos", videosRouter);
server.use("/users", usersRouter);

const handleListening = () => {
  console.log(`✅ server is listening on ${PORT} port 🚀`);
};
server.listen(PORT, handleListening);

훨씬 깔끔하고 보기 좋지 않은가??