[Youtube 클론코딩] Router 설정하기

라우터 설정하기

유투브는 크게 두가지 기능이 존재한다.

하나는 유저 로그인 기능, 다른 하나는 비디오 기능이다.

 

이 두가지 기능을 라우터로 구현하면 다음과 같이 세가지 라우터로 구별할 수 있다.

1. 글로벌 라우터

2. 유저 라우터

3. 비디오 라우터

이를 구현해보자.

 

우리는 앞서 페이지의 get 요청을 처리하는 방법을 알아보았다.

router를 이용한 방식도 비슷하다.

app.get()이 router.get()으로 바뀌었고,

app은 use() 를 통해 '/' 뒤에 오는 주소들에 대해선 globalRouter에서 처리하도록 만들고 있다.

즉 / 로 접근하게 되면 Home Page Videos 가 출력된다.

 

다른 예시를 또 들자면 다음과 같다.

이는 /user 하위의 경로는 userRouter에서 처리하도록 하며

userRouter에서 /edit에 접근하면 handlerEdit 가 실행되어 Edit Users가 출력된다.

다시 말해서 /user/edit 로 접근하면 Edit Users가 화면에 출력된다.

 

코드 분리하기 (Export, Import)

코드의 유지 보수를 위해서는, 한 파일에 모든 코드를 넣는 것이 아니라

여러 파일에 나누어서 각 파일이 독립적인 기능을 가지도록 하는 것이 좋다.

 

그런데 우리가 코드를 처음 짤 때 이런 것을 고려하고 짜는 것 보다는 일단 무작정 코드를 짜고

나중에 코드를 짠 만큼의 시간을 또 들여서 코드를 정리하는 시간을 가지는 것이 좋다고 한다.

 

따라서 우리는 위에서 작성한 코드들을 분리하여 작성할 것이다.

 

일단 라우팅 기능을 수행하는 코드는 크게 세 가지로 분류할 수 있다.

1. Router 객체 변수

2. Routing 용 Controller

3. app.use(path, router)

 

이를 나누어 1번은 routers 폴더에, 2번은 controllers 폴더에 넣어서 보관하는 것이 좋다.

server.js

routers/globalRouter.js

controllers/videoController.js

URL에 변수 추가하기

우리는 데이터베이스의 모든 영상들에 대해서 일일이 라우트를 생성해줄 수 없다.

따라서 각 영상의 id에 따라 URL 주소를 다르게 받는 작업을 해줄 것인데 방법은 다음과 같다.

위처럼 변수를 사용할 공간에 :변수명 을 해주면 된다.

그렇게 되면 다음처럼 request 객체의 param 항목에 변수명: 변수값 형태로 저장된다.

이런 방식을 사용하게 되면 문제점이 하나 발생한다.

바로 변수를 넣은 path를 먼저 선언하게 되면 다른 모든 단어를 변수로 인식하게 되는 점이다.

 

아래의 예시를 보면, upload가 :id보다 먼저 선언돼있으므로, upload로의 접근하면 정상적으로 출력된다.

그러나 만약 :id를 upload보다 먼저 선언하게 되면, 다음과 같이 upload를 id라는 변수로 인식하게 된다.

이를 막기 위해서는 두가지 방법이 있다.

1. 변수가 들어간 URL은 제일 나중에 작성한다.

2. 변수에는 무조건 숫자만 들어가야 한다는 조건을 걸어준다.

 

변수에 특정한 조건을 걸고 싶다면 다음의 문서를 참조하자.

Express routing (expressjs.com)

Express routing

?: 앞 글자가 있거나 없어도 됨.

+: 앞 글자가 1개 ~ n개 까지 있음

*: * 자리에 어떤 글자가 와도 됨.

정규식 또한 사용 가능하다.

이렇게 :id 후 () 안에 정규식을 넣어주면 id와 정규식을 조합해서 넣을 수 있다.

JavaScript에서 작성하는 것이므로 \를 한번 더 넣어준다.