[JavaScript, Node.js] 유튜브 클론 정리 4장 (2) - URL 파라미터

머리글

이번 시간에는 URL 파라미터에 대해서 알아보자.

URL 파라미터?

우선 설명을 위해 라우터의 일부를 작성했다.

videoRouter.get("/upload", upload);
videoRouter.get("/:id", watch);
videoRouter.get("/:id/edit", edit);
videoRouter.get("/:id/delete", delete);

각 비디오를 볼 수 있는 페이지, 수정 페이지, 삭제 페이지다.

여기서 중요한 건 id 앞에 붙어있는 ':'이다.
이걸 우리는 파라미터라고 부른다.
URL에 변수를 넣을 수 있게 해 준다.

만약 파라미터가 없다면 우리는 모든 동영상의 id에 대해 get을 통해 페이지를 생성해주어야 한다.

그런데, 여기서 주의해야 할 점이 있다.
만약 upload와 watch의 순서가 바뀌게 된다면,
우리가 아무리 upload를 URL로 입력하더라도 'upload'라는 id로 인식하게 된다.
순서에 유의하자.

그런데 만약 유저가 id에 아무것이나 입력하게 된다면 어떻게 될까?
그를 방지하기 위한 방법을 사용해 보자.

Express 라우팅?

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

Express 라우팅

라우터에 유연성을 부여한다는 느낌이었다.

우리는 이를 사용해서 id에 정규식을 통해 들어갈 수 있는 문자의 제한을 둘 예정이다.

정규식?

/(abc\w+)

이런 식의 정규식이 있다면 abc로 시작하는 URL을 모두 선택한다.

/(\d+)

이런 정규식이 있다면 숫자만을 선택한다.
따라서 id의 URL을 다음과 같이 변경할 수 있다.

videoRouter.get("/upload", upload);
videoRouter.get("/:id(\\d+)", watch);
videoRouter.get("/:id(\\d+)/edit", edit);
videoRouter.get("/:id(\\d+)/delete", delete);

'\'가 하나 더 들어간 이유는 JS라서 이런 식으로 정규식을 사용한다고 한다.
물론 추후에 다른 id 구조를 갖기에 변경하게 되는 정규식이지만,
예시를 통해 정규식의 개념을 이해해 보았다.

마무리

이번 시간에는 URL 파라미터란 무엇인지, Express의 라우팅에서 정규식을 어떻게 사용하는지 배워보았다.

다음 시간에는 본격적으로 Html 페이지를 렌더링 하는 방법을 알아보자.