# 4.0 - 4.2 Routers

what are Routers?

Router는 컨트롤러와 URL의 관리를 쉽게 해준다. 쉽게 말해, 미니 어플리케이션을 만들게 해줌.

/ -> Home
/join -> Join
/login -> Login
/search -> Search

/users/edit -> Edit user
/users/delete -> Delete user

/videos/watch -> Watch Video
/videos/edit -> Edit Video
/videos/delete -> Delete Video
/videos/comments -> Comment on a video
/videos/comments/delete -> Delete A comment of a Video

첫 문단: global router(원ㄹㅐ 규칙과는 예외의 경우임.)
둘 문단: users router
셋 문단: videos router

router는 위의 코드처럼 우리가 작업중인 주제를 기반으로 URL을 그룹화 해줌.

How we make Router?

처음으로 Router생성 & 각각의 Route url을 이해시켜야함.

import express from "express";

const globalRouter = express.Router();
const userRouter = express.Router();
const videoRouter = express.Router();  // -> Router생성

app.use("/",globalRouter);
app.use("/videos",videoRouter);
app.use("/users",userRouter); // -> Router가 각각의 url을 이해할 준비가 됐음.(앱을 만듦) = 부모 Router가 생성된 것임. 이제 각각에 들어간 자식 Router를 생성

1. 각각의 그룹에 맞는 루터를 생성 (global, users, videos)
2. 각 그룹의 부모 Router를 생성(즉, Router에게 부모 URL을 이해시킴).
   -> 누군가 부모 URL에 접근하면 각 Router에 있는 컨트롤러를 찾도록 하는 것임.

이제 이후에 각각의 라우터들에 함수를 만들어 requests해야함.

1. global Router

const globalRouter = express.Router();

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

globalRouter.get("/",handleHome); //->home만 requests함.

2. user Router

const userRouter = express.Router();

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

userRouter.get("/edit",handleEditUser); //->/edit만 req함.

3. video Router

const videoRouter = express.Router();

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

videoRouter.get("/watch",handleWatchVideo); //-> /waatch만 req함.

여기까지 코드

import express from "express";// 혹은 "node_modules/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);

Summary:

1. Instead using app.get([URL], [Handler]) to handle the request, we can create a router and let the router handle GET request.

2. Create app.use("/", homeRouter) - This way, when a user sends a GET request, the request gets routed to homeRouter.

3. Then, create a constant variable called homeRouter as below:
   const homeRouter = express.Router()

4. Create a handler function as below:
   const handleReq = (req, res) => {res.send("Do something")}

5. To connect the router to the handler use the code below:
   routerOne.get("/", handleReq);

6. Then, users will get routed from the Express [app] to Router [homeRouter] to Handler function [handleReq] when users a request to get URL "/".

Code Cleaning

1. src폴더 안에 router폴더를 하나 만든다.

2. router폴더 안에 다음의 파일들을 추가해준다.

• globalRouter.js
• userRouter.js
• videoRouter.js

3. 각 폴더에 코드를 정리.(server.js로부터 잘라서 붙여넣는다.)

• 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);

  - server.js

import express from "express";// 혹은 "node_modules/express"
import morgan from "morgan";

const PORT = 4000;

const app = express();
const logger = morgan("dev");
app.use(logger);

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);

4. **export**
-> 각 폴더를 server.js에 import해주기 앞서, 각 라우터 폴더의 맨 마지막 줄에 oneRouter(변    수)를 export 해준다. => 각각의 폴더를 import하면 export default값이 import되는 것      임.

export default ONERouter;

를 각각의 폴더에 추가해준다.

5. **import**
-> server.js에서 각각의 폴더의 export값을 import해준다.

import ONERouter from "./routers/ONERouter";

6. 각 폴더의 자식 url들의 get을 추가해준다. 위의 방식과 동일
->  const handle = ~~
	ONERouter.get(route,handle)
**중요)**

❗️각각의 파일은 독립된 개체이므로 다른 폴더에서 사용시 반드시, export와 import를 해줘야한다. 즉, 다른 폴더에서 사용하기 전에 해당 파일에서 export를 선행한 뒤, import하여 사용한다.❗️

❗️각각의 폴더에서 변수만(ONERouter) export해줬을 뿐이여도, JS특성상 위에서 아래로 코드를 읽기 때문에 get requests를 이미 내장하게 된다. 즉, get은 코드를 읽는 당시에 실행되는 것이 아니라, 내장이 된다고 생각하면됨.❗️