전반적인 Router 구성하기

1. Route Tree

 - 사용자의 마인드가 되어 웹사이트이 구조를 어떻게 만들지를 구상해야 함

 - globalRouter에 login search Router 만들기

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

# User
/user/:id -> See profile
/user/logout -> Log out
/user/edit -> Edit my profile
/user/delete -> Delete my profile

# Videos
/videos/:id - > See watch video in my channel
/videos/:id/edit -> Edit video
/videos/:id/delete -> Delete video
/videos/upload -> Upload video

# Comment
/videos/comment -> Comment on a video
/videos/comment/delete -> Delete a comment of a video

 

2. Router 구성

https://github.com/Daniel-Jeon/wetube-loaded/commit/74495865d49c57bed3eeda669b49a11f3e6ce16c

Construct Router :smile: · Daniel-Jeon/wetube-loaded@7449586

 

3. Parameter

 - Parameter는 URL안에 Variable을 포함시킬 수 있음

// videoController.js
export const see = (req, res) => {
  console.log(req.params);  
  return res.send("See Video");
};

// Console
// { id: '12121' }

 - Router에서 Parameter가 있는 URL이 앞에 있을 경우

// videoRouter.js
videoRouter.get("/:id", see);
videoRouter.get("/upload", upload);

upload를 id parameter로 인식하는 문제가 발생

 - Parameter에 URL에 있는 것들을 뒤로 배치해도 되지만 좀더 효율적으로 사용하고 싶음

 - 정규식(Regex)을 사용하여 영상이 업로드되면 id parameter에 숫자만 부여되게 하고 싶음

 

3. Regex

 - Regex는 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어

 - 쉽게 말하면 우리가 원하는 방식의 문자열만 뽑아낼 수 있음

 - 아래처럼 parameter 뒤에 regex을 넣으면 숫자만 받음

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

https://regexpal.com

Regex Tester - Javascript, PCRE, PHP