#4.0, 4.1, 4.2 Routers
# Wetube Reloaded
/ -> Home
/join -> Join
/login -> Login
/search -> Search
/edit-user -> Edit user
/delete-user -> Delete user
/watch-video -> Watch video
/edit-video -> Edit video
/delete-video -> Delete video
위처럼 만들어줄 수 있지만 그렇게 예쁘지는 않다.
라우터를 도메인 별로 나눠주자!
# Wetube Reloaded
/ -> 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
라우터 → 작업중인 프로젝트를 주제 기반으로 URL을 그룹화해준다.
그렇다면 이제 우리의 Router를 직접 만들어보자!
- global router → home (/)에서 바로 갈 수 있는 url 모음 (/join, /login 등)
- {aaaa} router → /{aaaa}/* 로 이루어진 url
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);
코드를 좀 더 깔끔하게 정리해볼까? 우리는 두개로 나눠서 폴더를 만들고 분류할 수 있다.
- Rounter
- Controller
위와 같이 routers 폴더에 각각의 *Router.js 파일을 만들고 export 해준다.
그리고 각각을 server.js에 import 해주면 된다.
#4.3 Exports
이전까지는 Router.js 파일 안에 Router와 controller를 함께 선언해주었다.
그러나 controller는 점점 늘어날 것이고, 하나의 controller가 가지는 길이 역시 늘어날 것이다.
따라서 Router와 controller는 분리해야 한다!!
- controller → 함수
- Router → 함수를 사용하는 곳
위와 같이 controllers, routers 폴더를 따로 생성해준 다음,
controller.js에 각각의 Router에서 사용될 함수를 정의해준다.
+globalcontroller는 따로 생성하지 않는다. 대신 다른 controller에 함수를 정의하고 globalRouter에서 가져와서 사용한다!
여기서 export 방법의 차이에 대해 알 수 있다.
- export default {}
→ 파일 하나당 함수 하나만 export 할 수 있음, import 시 내가 원하는 대로 이름을 바꿀 수 있음
- export const {func_name ~ }
→ 파일 하나에서 여러개 함수를 export 할 수 있음, import 시 기존 함수 이름을 그대로 사용해야 함.
controller의 각 함수마다 파일을 만들어 줄 수는 없으니 우리는 후자의 방법을 사용한다..
각각의 Router에서는 위처럼 controller로부터 함수를 import 해와서 Router.get만 선언해준다. 그리고 Routerf를 export 해준다.
모두 접근 가능~
#4.6, #4.7, #4.8 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
:id를 추가해서 README를 약간 수정해주었다.
위에 맞게 Router.js를 수정해주고,
controller.js에도 알맞게 함수를 export 해주었다.
그렇다면 url의 :id (꼭 id일 필요는 없음)에 대해 알아보자.
url 끝에 2661 같은 것이 :id이다.
:을 붙인 것은 변수를 쓴다는 것이다. 장점은 Router에 각각을 모두 만들어주지 않아도 된다!
export const watch = (req, res) => {
console.log(req.params);
return res.send("Watch Video.")};videocontroller.js
requset object의 parameter를 출력해주도록 설정해놓고,
videos/:id의 id에 2022350207을 넣어주었다.
wathch 함수가 실행된 것을 확인하였고,
request에는 id라는 변수가 2022350207로 전달되고 있다.
!! 주의할 점 !!
Router에 선언해줄 때는 변수가 포함된 url을 밑에 선언해주어야 한다.
videoRouter.get("/:id", watch);
videoRouter.get("/upload", upload);
videoRouter.get("/:id/edit", edit);
videoRouter.get("/:id/delete", deleteV);
만약 다음과 같이 선언해주고, /videos/upload로 연결을 시도한다면
{ id : “upload”}로 인식하게 된다. → 오류 발생..
해결 방법이 하나 더 있는데, 바로 정규식을 활용하는 것이다.
videoRouter.get("/:id(\d+)", watch);
videoRouter.get("/:id(\d+)/edit", edit);
videoRouter.get("/:id(\d+)/delete", deleteV);
videoRouter.get("/upload", upload);
이는 id에 숫자만 허용해준다는 것이다. 따라서 upload를 밑에 써도 상관이 없다.
** 본 글은 노마드 코더의 ‘유튜브 클론코딩’ 강의를 참조하여 작성하였습니다. **