#4.7 URL Parameters part One

:id란??

• :id는 파라미터라고 부른다.

• :id에서 id는 다른 이름으로해도 괜찮음(예: potato) 중요한 것은 앞에 ':'를 넣는것

• 앞에 ':'를 표시하는건 express한테 이게 변수라는걸 알려주기 위해서다.

• 파라미터는 url안에 변수를 포함시킬 수 있게 해준다.

노마드코더 영상 url 확인 시
https://nomadcoders.co/wetube/lectures/2661
에서 숫자부분이 변수임

• 만약 videoRouter.get("/:id", see); 여기있는 파라미터라는게 없었다면 모든 영상마다 라우터를 새로 만들어줘야 한다.

• 유저가 브러우저로 가서 "/videos/121212"를 입력하면 express는 /:id 에 /121212를 넣어준다.

/:id를 코드에 어떻게 엑세스하는지

1. 확인을 위해 컨트롤러에서 see함수에 req.params

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

2. 브라우저에 'http://localhost:4000/videos/1212121' 접속

3. console 확인
   

• express는 이 url이 변수를 가지고 있다는 것을 이해함

• 그리고 express는 유저가 고른 이름과 함께 값을 제공해줌
  {id : 1212121} // {이름: 값}

❓ :id는 왜 밑에 있어야 될까

• 만약 라우터에서 아래와 같이 작성할 경우

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

• express가 리퀘스트를 받고 있는데 리퀘스트가 오면 express는 videoRouter.get("/:id", see);를 볼거고 express 입장에서는 id가 변수이기 때문에 /videos/upload를 접속해도 /upload가 id자리에 있으니 id라고 인식한다.

• 밑에 videoRouter.get("/upload", upload);가 있어도 밑에까지 보러가지 않고 videoRouter.get("/:id", see);여기서 멈춰버림

• videoRouter.get("/upload", upload);를 위에 놔야하는 이뉴는 리퀘스트는 제일 위에 있는 것을 먼저 보고 '/videos/12121212'로 접속하게 된다면 다음 것을 읽는 것 videoRouter.get("/:id", see);

---

#4.8 URL Parameters part Two

:id 파라미터를 숫자만 인식하게 하기(정규식)

• 정규식을 express에 넘겨줘야함

express routing

https://expressjs.com/en/guide/routing.html

정규식

• 문자열로부터 특정 정보를 추출하는 방법

• 정규식은 모든 프로그래밍 언어에 존재

• https://www.regexpal.com/ 에서 타겟 테스트 할수 있음

  • w는 아무 문자라는 뜻
  • +는 끝까지 선택(?)
    

• 숫자만 선택

  • d(digit): 숫자만
  • +는 끝까지 선택(?)
    

정규식을 express에 넘겨주기

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

• js는 앞에 백슬래시를 하나 더 추가해야함

• 문자형식으로 페이지 접속시 안받아오는 것 확인

  숫자
  
  문자
  

• 파라미터를 숫자만 오도록 했기때문에 이제 videoRouter.get("/upload", upload);가 밑에 와도 문제가 발생하지 않음

• 다만, 앞으로 할 데이터베이스 형식이 이런 형식이 아니기때문에 (\\d+)는 사용안할거임

정규식 앞에 이름을 붙힌 이유

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

• videoRouter.get("/(\\d+)", see);만 해도 숫자만 받을 수 있다.

• 하지만, 컨트롤러에서 req.params.id를 받기 위해서 이름을 붙여주었다.