[유튜브 클론 코딩] #3.9~4.8 Routers(라우터)

#3.9 Controllers Recap

 

app.get("/",handleHome);

app.get("/",

routes 만든다.

hanleHome);

controllers 만든다. 이 자리에는 반드시 함수를 넣어줘야 한다.

 

---

#3.10 Middleware Recap

middleware

controller다. middleware에서 return이 있으면 다음으로 넘겨지지 않고 끝난다. 원하는 만큼 쓸 수 있다. (대부분 2~3개)

누군가가 대답하기 전까지, 즉 return이 있기 전까지는 전부 middleware다.

const routerLogger = (req, res, next) => {
  next();
};

const methodLogger = (req, res, next) => {
  next();
};

const home = (req, res) => res.send("hello");

app.get("/", methodLogger, routerLogger, home);

여기까지 강의 노트

import express from "express";

const PORT = 4000;

const app = express();

const routerLogger = (req, res, next) => {
  console.log("PATH", req.path);
  next();
};

const methodLogger = (req, res, next) => {
  console.log("METHOD", req.method);
  next();
};

const home = (req, res, next) => {
  console.log("I will respond.");
  return res.send("hello");
};

app.get("/", methodLogger, routerLogger, home);

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

app.listen(PORT, handleListening);

middleware를 모든 route에서 사용해야 할 때

middleware를 global하게 쓰려면 맨 위에 있어야 함!

import express from "express";

const PORT = 4000;

const app = express();

const routerLogger = (req, res, next) => {
  console.log("PATH", req.path);
  next();
};

const methodLogger = (req, res, next) => {
  console.log("METHOD", req.method);
  next();
};

const home = (req, res, next) => {
  console.log("I will respond.");
  return res.send("hello");
};

const login = (req, res) => {
  return res.send("login");
};

app.use(methodLogger, routerLogger);
app.get("/", home);
app.get("/login", login);

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

app.listen(PORT, handleListening);

 

---

#3.11 External Middlewares

morgan

morgan은 node.js 용 request logger middleware다.

• morgan 함수를 호출하면, 설정한대로 middleware를 return 해준다.
• app.use 사용

• import logger from "morgan"
  
  app.use(logger("))

• morgan 호출 시 다섯가지 옵션 있음

 

---

#4.0 whar are Routers?

 

라우터

• url의 시작 부분
• url이 어떻게 시작하는지에 따라 나누는 방법
• 컨트롤러와 URL의 관리를 쉽게 해준다.
• 미니 어플리케이션
• 라우터는 개발자가 작업 중인 주제를 기반으로 URL을 그룹화해준다.

 

---

#4.1 Making Our Routers

규칙의 예외

join, login 페이지는 홍보를 위해 따로 만든 것

---

#4.2 Cleaning the Code

코드를 정리해라

router 폴더를 따로 만들어서 그 안에 아래의 코드 작성하는 것이 보기 좋다.

import express from "express";

const globalRouter = express.Router();

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

globalRouter.get("/",handleHome);

export default globalRouter;

 

폴더 구조는 이렇다.

📂wetube

|----📂node_modules

|----📂src

|      |----📂routers

|             |----📄globalRouter.js

|             |----📄userRouter.js

|             |----📄videoRouter.js

|      |----📄server.js

|----📄.gitignore

|----📄babel.config.json

|----📄package-lock.json

|----📄package.json

|----📄README.md

 

---

#4.3 Exports

router와 controller를 섞어쓰지 않는 게 좋다.

• controller는 함수이고, router는 그 함수를 이용하는 입장이므로!
• 따라서 둘을 같은 곳에 두면 안 된다.
• 즉, 컨트롤러와 라우터를 다른 폴더에 둬야한다!

 

videoController와 userController 파일을 따로 만든다. globalController 파일은 안 만들어도 되는데 그 이유가 뭘까?

바로 필요없기 때문이다.

• 회원가입을 하는 것은 user다. 따라서 그건 userController에 들어간다. 
• home으로 가면 video가 보인다. 따라서 그건 videoController에 들어간다.

글로벌 라우터는 url을 깔끔하게 하기 위해서 쓰는 것이다. 그외의 이유는 없다.

 

export default와 각각의 변수를 export 하는 것의 차이

1. export default

• 파일 모두 import
• import 시 원하는 이름으로 변경 가능

2. 각각의 변수 export

• 한 파일이 여러 개를 export 할 수 있다.
• import 할 때 오브젝트로 
• import 시 원래 이름 그대로 적어야 함

 

---

#4.4 recap

 

---

#4.5 Architecture Recap

 

import 하기 전에 export 해야한다.

 

---

#4.6 Planning Routes

 

README.md 파일에서 사용자가 되었다고 생각하고 경로대로 루트 짠다.

 

---

#4.7 URL Parameters part One

 

videoRouter.get("/:id/edit",edit);

1. url 안에 변수를 포함시킬 수 있게 해준다.
2. 이를 사용해서 모든 페이지마다 새로운 라우터를 파지 않아도 된다.
3. 변수 사용 시, 코드 줄 순서 유의해야 한다

1) 아래처럼 작성하면 원래 의도대로 작동한다. 즉, upload를 입력하면 /upload 페이지로 이동한다..

videoRouter.get("/upload",upload);
videoRouter.get("/:id",see);
videoRouter.get("/:id/edit",edit);
videoRouter.get("/:id/delete",deleteVideo);

2) 그러나 아래처럼 순서를 바꾸면, upload 입력 시 upload를 변수라고 인식하게 된다.

videoRouter.get("/:id",see);
videoRouter.get("/upload",upload);
videoRouter.get("/:id/edit",edit);
videoRouter.get("/:id/delete",deleteVideo);

 

---

#4.8 URL Parameters part Two

 

위에서 2) 처럼 입력했을 시 upload 입력이 먹히는 것을 해결해야 한다.

정규식

아래의 코드를 적으면 :id로 숫자만 받아올 수 있다.

videoRouter.get("/:id(\\d+)/edit",edit);