ROUTERS
2022.03.04
4.0 What are Routers?
라우터의 개념
wetube/video/upload
wetube/video/delete
wetube/join
이런식으로 앞에 그룹화 시켜주는 것을 라우터 라고 함.
/ -> home
/join
/login
이런애들은 홈에서 갈 수 있는 애들이라 글로벌 라우터라 함
4.1 Making Our Routers
wetube로 예를 들면
크게 2가지로 나눠짐
user / video
근데 글로벌 라우터는 예외임.
import express from "express";
import log_morgan from "morgan";
import res from "express/lib/response";
const PORT =4000;
const app = express(); //1. express 어플리케이션 생성
const logger = log_morgan("dev");
app.use(logger);
//4.1 글로벌 라우터
const globalRouter = express.Router();
const handleHome = (req, res) => res.send("Home");
globalRouter.get("/", handleHome);
//user 라우터
const userRouter = express.Router();
const handleEditUser = (req, res) => res.send("Edit User");
userRouter.get("/edit", handleEditUser);
//video 라우터
const videoRouter = express.Router();
const handleWatchVideo = (req, res) => res.send("Watch Video");
videoRouter.get("/watch", handleWatchVideo);
// use - 전체에서 사용가능
app.use("/",globalRouter);
app.use("/videos",videoRouter);
app.use("/users", userRouter);
//2. 리스닝 상태 만들기
const handleListening = () => console.log(`erver Listening on port http://localhost:${PORT}`);
app.listen(PORT, handleListening) //포트 , callback
/users/edit 이라고 url 입력시 app/use에서 users로 타게되고 user 라우팅에서 edit쪽으로 가면 handleEditUser로 가게되서 메시지가 반환됨.
2022.03.07
4.2 Cleaning the Code
export와 import 하기
코드정리를 위해 새로운 파일을 만들어서 내보내고 가져오기함.
server.js
import express from "express";
import log_morgan from "morgan";
import globalRouter from "./routers/globalRouters";
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";
const PORT =4000;
const app = express(); //1. express 어플리케이션 생성
const logger = log_morgan("dev");
app.use(logger);
// use - 전체에서 사용가능
app.use("/",globalRouter);
app.use("/videos",videoRouter);
app.use("/users", userRouter);
//2. 리스닝 상태 만들기
const handleListening = () => console.log(`erver Listening on port http://localhost:${PORT}`);
app.listen(PORT, handleListening) //포트 , callback
globalRouters.js
import express from "express";
//4.1 글로벌 라우터
const globalRouter = express.Router();
const handleHome = (req, res) => res.send("Home");
globalRouter.get("/", handleHome);
export default globalRouter;
userRouter.js
import express from "express";
//user 라우터
const userRouter = express.Router();
const handleEditUser = (req, res) => res.send("Edit User");
userRouter.get("/edit", handleEditUser);
export default userRouter;
videoRouter.js
import express from "express";
//video 라우터
const videoRouter = express.Router();
const handleWatchVideo = (req, res) => res.send("Watch Video");
videoRouter.get("/watch", handleWatchVideo);
export default videoRouter;
default 로 내보냈기때문에 import 할때 이름을 어떻게 하든 상관없다 무조건 그 변수임을 안다 내보내는게 디폴트 그거 하나이기 때문임.
2022.03.08
4.3 Exports
라우터와 컨트롤러를 같이 쓰는건 너무 지저분함. 그이유는 컨트롤러는 함수이고 라우터는 그 함수를 이용하기 때문이라함.
그러니 컨트롤러를 위한 폴더를 따로 만들어줌.
글로벌은 컨트롤러를 만들어줄 필요가 없다. 왜냐하면
로그인/ 회원가입 등은 하는주체가 유저이니까 유저컨트롤러에 넣어주면 된다. 홈페이지는 동영상이 있으니까 동영상 컨트롤러고
컨트롤러를 넘겨줄땐 export 하고 받는데서 import 해도되는데, 디폴트로하면 1개밖에 못넘겨주니까 const 하고 선언할때 앞에 export를 붙여줘서 넘겨줘도된다.
받아줄때는 오브젝트로 만들어서 받아야한다 import {join} from ~ 이런식으로 변수명도 넘어가는 변수명이랑 똑같이
왜냐하면 디폴트로 넘겨줄때는 import 할때 어떤 이름을 사용해도 상관없었다 import 내맘대로 from ~ 왜냐하면 무조건 그걸 받아오는거니까
하지만 export const 로 넘길때에는 변수명이 동일해야한다
여러개를 받아올때는 import {join,edit} from~ 이렇게 (변수명으로 delete 는 사용불가) 받아온다.
1. 글로벌 라우터
import express from "express";
import { trending_home } from "../controllers/videoController";
import { join } from "../controllers/userController";
//4.1 글로벌 라우터
const globalRouter = express.Router();
globalRouter.get("/", trending_home);
globalRouter.get("/join", join);
export default globalRouter;
2. 유저 라우터
import express from "express";
import { edit,remove } from "../controllers/userController";
//user 라우터
const userRouter = express.Router();
userRouter.get("/edit", edit);
userRouter.get("/removeete", remove);
export default userRouter;
3.유저 컨트롤러
export const join = (req,res) => res.send("Join");
export const edit = (req,res) => res.send("Edit User");
export const remove = (req,res) => res.send("Delete User");
4.비디오 라우터
import express from "express";
import { watch,edit } from "../controllers/videoController";
//video 라우터
const videoRouter = express.Router();
videoRouter.get("/watch", watch);
videoRouter.get("/edit", edit);
export default videoRouter;
5.비디오 컨트롤
export const trending_home = (req,res) => res.send("Home Page Videos");
export const watch = (req,res) => res.send("Watch Videos");
export const edit = (req,res) => res.send("Edit Videos");
2022.03.10
4.4 Router Recap
라우터 복습
4.5 Architecture Recap
전체적인 복습
defult export 랑 그냥 export의 변수명 차이 복습
2022.03.11
4.6 Planning Routes
구성조정
특이한점, :id 가 추가되면서 그 하위에있는게 아무것도 안들어가짐, id 있는데만 자꾸 들어가짐.
-> 다음강의에서 해결
/ -> HOME
/join -> Join
/login -> Login
/search -> Search
/user/:id -> See User (see profile)
/user/logout -> Log Out
/users/edit -> Edit My Profile
/users/delete -> Delete My Porfile
/videos/:id -> See Video
/videos/:id/edit -> Edit Video
/videos/:id/delete -> Delete Video
/videos/upload -> Upload Video
글로벌
import express from "express";
import { trending_home,search } from "../controllers/videoController";
import { join,login } from "../controllers/userController";
//4.1 글로벌 라우터
const globalRouter = express.Router();
globalRouter.get("/", trending_home);
globalRouter.get("/join", join);
globalRouter.get("/login", login);
globalRouter.get("/search", search);
export default globalRouter;
유저라우터
import express from "express";
import { see,logout,edit,remove } from "../controllers/userController";
//user 라우터
const userRouter = express.Router();
userRouter.get("/:id", see);
userRouter.get("/logout", logout);
userRouter.get("/edit", edit);
userRouter.get("/removeete", remove);
export default userRouter;
유저컨트롤
//global
export const join = (req,res) => res.send("Join");
export const login = (req,res) => res.send("Login");
//user
export const see = (req,res) => res.send("See My Profile");
export const logout =(req,res) => res.send("Log Out");
export const edit = (req,res) => res.send("Edit User");
export const remove = (req,res) => res.send("Delete User");
비디오라우터
import express from "express";
import { see,edit,deletevideo,upload } from "../controllers/videoController";
//video 라우터
const videoRouter = express.Router();
videoRouter.get("/:id", see);
videoRouter.get("/:id/edit", edit);
videoRouter.get("/:id/delete", deletevideo);
videoRouter.get("/upload", upload);
export default videoRouter;
비디오 컨트롤
//global
export const trending_home = (req,res) => res.send("Home Page Videos");
export const search = (req,res) => res.send("Search video");
//video
export const see = (req,res) => res.send("Watch Videos");
export const edit = (req,res) => res.send("Edit Videos");
export const deletevideo = (req,res) => res.send("Delete Video");
export const upload =(req,res) => res.send("Upload Video");
2022.03.17
4.7 URL Parameters part One
url에 :변수 를 사용할 수 있음
위에서부터 소스를 따라내려갈때 :id 이런식으로 변수부터 받으니까 upload가 변수처럼 인식됨.
그러니 현재에서는 upload를 제일 위로 올려야 정상적으로 작동.
비디오 컨드롤 (로그 추가)
//global
export const trending_home = (req,res) => res.send("Home Page Videos");
export const search = (req,res) => res.send("Search video");
//video
export const see = (req,res) => {
return res.send(`Watch Videos #${req.params.id}`);
};
export const edit = (req,res) => {
return res.send(`Edit Videos #${req.params.id}`);
};
export const deletevideo = (req,res) => {
return res.send(`delete Videos #${req.params.id}`);
};
export const upload =(req,res) => res.send("Upload Video");
2022.03.23
4.8 URL Parameters part Two
정규식.
정규식이란, 문자열로부터 특정 데이터를 추출하는것
(\\d+) 이건 숫자만 받아오겠다는 뜻임, 그래서 upload가 밑에있어도 인식가능
정규식 사이트
비디오라우터
import express from "express";
import { see,edit,deletevideo,upload } from "../controllers/videoController";
//video 라우터
const videoRouter = express.Router();
videoRouter.get("/:id(\\d+)", see);
videoRouter.get("/:id(\\d+)/edit", edit);
videoRouter.get("/:id(\\d+)/delete", deletevideo);
videoRouter.get("/upload", upload);
export default videoRouter;