[Node] #4 Routers

[Node] #4 Routers

정리를 제대로 안해둬서 https://onlee3.github.io/clonecoding/WetubeC4/ 참고 이분 너무 정리를 잘해두셨다

#4.0 What are Routers

/ -> Home /join -> Join /login -> Login /search -> Search /users/edit -> Edit Profile /users/delete -> Delete Profile /videos/watch -> Watch Video /videos/edit -> Edit Video /videos/delete -> Delete Video /videos/comment -> Comment on a Video /videos/comments/delete -> Delete a Comment a Video

router는 URL을 그룹화해준다 / :global router

/users : users router

/videos : videos router 프로젝트 설계시 고려할 사항 어떤 데이터를 사용할 것인가? wetube의 경우 동영상을 올리고 수정하고, 댓글을 작성하고 삭제하고 하는 등의 행동들이 메인 즉 유저, 동영상 이 두가지가 메인 데이터

#4.1 Making Our Routers

규칙에 따르지 않는 예외적인 Router를 만드는 이유 /, /join, /login, /search 등 URL이 직관적이고 보기에 예쁘면, 홍보하거나 소개할때 더 유용함. 기술적으로는 문제없음. 예외적으로 만들지 않고 그냥 해도됨.

#4.2 Cleaning the Code

창작 과정 이후에는 코드 정리 과정이 필요하다. (clean code 책 참고)

만들 때는 생각나는 대로, 만드는게 중요. 코드를 작성한 시간 만큼 할애해서, 정리할 것.

import express from "express"; const globalRouter = express.Router(); const handleHome = (req, res) => res.send("Home"); globalRouter.get("/", handleHome); // 해당 js를 import하면, globalRouter 자체를 import하게 될 것이다. export default globalRouter;

모든 파일은 모듈이고 거품과 같다. (NodeJS의 중요한 컨셉)

import하기전에 export 해야한다. 모든 파일은 독립되어 있음.

import express from "express"; import morgan from "morgan"; import globalRouter from "./routers/globalRouter"; import videoRouter from "./routers/videoRouter"; import userRouter from "./routers/userRouter"; const PORT = 4000; const app = express(); const logger = morgan("dev"); app.use(logger); // ""로 시작하는 URL로 들어가면 express는 해당 라우터 안으로 들어간다. // 라우터 내부에서, express는 url의 나머지 주소를 찾는다. 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); // Inside of GlobalRouter.js import express from "express"; const globalRouter = express.Router(); const handleHome = (req, res) => res.send("Home"); globalRouter.get("/", handleHome); export default globalRouter;

#4.3 Exports

//Controller.js /* export default로 export 하는 경우. 다른 문서에서는 import xx from "xx";로 표기하면 된다. 이 경우 xx는 이름이 같지 않아도됨.*/ const join = (req, res) => res.send("Join"); export default join; --- /* 각 변수를 export 하는 경우. 다른 문서에서는 import { xx } from "xx"로 표기 이 경우 xx는 기존 문서에 있는 변수명과 같아야함.*/ export const trending = (req, res) => res.send("Home Page Videos"); export const watch = (req, res) => res.send("Watch"); export const edit = (req, res) => res.send("Edit"); --- // Router.js import express from "express"; import { join } from "../controllers/userController"; import { trending } from "../controllers/videoController"; const globalRouter = express.Router(); globalRouter.get("/", trending); globalRouter.get("/join", join); export default globalRouter;

경로지정 팁

../ : 해당문서 바깥

./ : 해당문서 장소

#4.4 Router Recap

라우터는 공통 시작부분을 기반으로 url을 정리해주는 방법

#4.5 Architecture Recap

변수를 다른 파일로부터 가져온다. 무언가를 임포트하기전에는 익스포트를 먼저 해야한다. 글로벌 라우터를 위해 글로벌 컨트롤러를 따로 만들지는 않음. 글로벌 라우터를 만든 건 URL을 예쁘게 정리하기 위해서임.

사용자, 동영상 2개의 컨트롤러 만으로도 구분해서 사용가능.

#4.6 Planning Routes

//# Wetube Reloaded / -> Home /join -> Join /login -> Login /search -> Search /users/:id -> See User /users/logout -> Log Out /users/edit -> Edit MY Profile /users/delete -> Delete MY Profile /videos/:id -> See Video /videos/:id/edit -> Edit Video /videos/:id/delete -> Delete Video /videos/upload -> Upload Video //videoRouter.js import express from "express"; import { see, edit, upload, deleteVideo } from "../controllers/videoController"; 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; //videoController.js export const trending = (req, res) => res.send("Home Page Videos"); export const see = (req, res) => res.send("Watch"); export const edit = (req, res) => res.send("Edit"); export const search = (req, res) => res.send("Search"); export const upload = (req, res) => res.send("Upload"); export const deleteVideo = (req, res) => res.send("Delete Video");

사용자 입장에서 어떻게 사용될지 생각하고, URL을 설계하고 코딩해나간다.

#4.7 URL Parameters part One

//videoRouter.js import express from "express"; import { see, edit, upload, deleteVideo } from "../controllers/videoController"; const videoRouter = express.Router(); /* upload를 가장 위로 두는 이유 videoRouter.get("/:id", see); 가 위에 있으면 /upload라는 url을 id로 인식하여 upload 함수를 실행시키고 페이지를 종료시켜버린다.*/ videoRouter.get("/upload", upload); videoRouter.get("/:id", see); videoRouter.get("/:id/edit", edit); videoRouter.get("/:id/delete", deleteVideo); export default videoRouter; //videoController.js export const trending = (req, res) => res.send("Home Page Videos"); export const see = (req, res) => { // id 넘버를 확인하기 위해 console.log console.log(req.params); return res.send(`Watch Video #${req.params.id}`); }; export const edit = (req, res) => { console.log(req.params); return res.send("Edit"); }; export const search = (req, res) => res.send("Search"); export const upload = (req, res) => { console.log(req.params); return res.send("Upload"); }; export const deleteVideo = (req, res) => { console.log(req.params); return res.send("Delete Video"); };

parameter

: 기호가 들어가야함

사용함으로써 url안에 변수를 포함 시킬 수 있게됨.

#4.8 URL Parameters part Two

현재 문제점

숫자외의 url도 id로 인식해버림.

Regular Expression (정규식) 모든 프로그래밍 언어에 존재

videoRouter.get("/upload", upload); videoRouter.get("/:id(\\d+)", see); videoRouter.get("/:id(\\d+)/edit", edit); videoRouter.get("/:id(\\d+)/delete", deleteVideo); // (\\d+) : 숫자만 받음 (digital) // 해당 프로젝트에서는 이렇게 안쓸예정. (데이터베이스의 형태가 다르기 때문에)

from http://til-blog.tistory.com/10 by ccl(A) rewrite - 2021-12-23 17:00:24