Cleaning Code

import express from "express";

import morgan from "morgan";

const PORT = 4000;

const app = express();

const logger = morgan("dev");

app.use(logger);

const globalRouter = express.Router();

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

globalRouter.get("/", handleHome);

const userRouter = express.Router();

const handleEditUser = (req, res) => res.send("Edit User");

userRouter.get("/edit", handleEditUser);

const videoRouter = express.Router();

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

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

app.use("/", globalRouter);

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

app.use("/users", userRouter);

const handleListening = () =>

console.log(`✅ Server listening on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

현재 code를 보면 뒤죽박죽이다.

server를 시작하도록 하는 application을 구성하고 있다. 그리고 세가지 router를 만들고 있다.

이 router들을 이용하고 controller도 있다.

예를 들어 userRouter를 기준으로 한다면 얼마나 많은 controller가 만들어 질까?

프로필 변경, 비밀번호 변경, 프로필 보기, 팔로우 같은 것도 생길수 도 있고 많은 것이 생길 것이다.

이것을 각각 쪼개서 하나씩 문제를 해결하는게 좋다.

controller와 router로 나눠 보자.

일단 src폴더 안에 router폴더를 만들자.

router폴더 안에 세가지 router.js을 만든다.

globalRouter.js

userRouter.js

videoRouter.js

그리고 각각 세가지 router.js에 해당 router들을 잘라서 넣어 준다.

express도 필요 하니 임포트 해 준다.

(JavaScript에서는 모든 파일이 자기만의 세계를 갖는다.)

globalRouter.js

import express from "express";

const globalRouter = express.Router();

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

globalRouter.get("/", handleHome); 

userRouter.js

import express from "express";

const userRouter = express.Router();

const handleEditUser = (req, res) => res.send("Edit User");

userRouter.get("/edit", handleEditUser);

videoRouter.js

 import express from "express";

const videoRouter = express.Router();

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

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

이렇게 해주면 정말 보기도 깔끔하고 나중에 수정하고 할때도 정말 편할것이다.

그런데 아직 완벽하게 작동하는것 은 아니다.

각각 router가 존재는 하지만 연결 해주고 있는건 아니다.

각각 세가지 router를 server.js 에다가 연결해 줄것이다.

globalRouter.js

import express from "express";

const globalRouter = express.Router();

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

globalRouter.get("/", handleHome); 

export default globalRouter;

이렇게 해주면 globalRouter.js를 import하면 globalRouter 자체를 import하게 된다.

그리고 server.js import 라인에 이렇게 한줄 추가해준다.

import globalRouter from "./routers/globalRouter";

나머지 두개 router도 이런식으로 추가 해주면 되겠다.

모든 파일은 독립 되어 있다는걸 기억해야 겠다. 각각의 세계를 가지고 있다.

다른 파일들과 커뮤니케이션을 하고 싶다면 익스포트를 해야 된다.

그 뒤에 당연히 임포트도 해줘야 된다.