[유튜브 클론코딩] 2.12 Recap(복습,중간점검)

2.12 Recap(복습,중간점검)

userRouter와 videoRouter도 완성하기

일단, 지난 시간에 globalRouter를 완성한 것 처럼, userRouter와 videoRouter도 완성한다.

userController와 videoController에서 각각 필요한 함수를 작성하고 export해서

userRouter와 videoRouter에서 import하여 사용한다.

 

↑app.js

 

↑ userRouter.js

 

이 때 npm start를 해보면, localhost:4000/users가 아니라 localhost:4000/users/users 해야 접속이 되는 것을 볼 수가 있는데, 이는 app.js에서 routes.users라고 되어 있기 때문이다. 즉, app.js에서 app.use("/users", userRouter)라고 되어있는 것이며, 이는 /users가 붙은 상태에서 라우터를 사용하게 되는 것이다.

예를 들면 userRouter에서 editProfile이라고 작성한 것은 /users/editProfile 인 것이다.

이 전에 2.8에서 본 것과 맥락이 같다.

그러므로 videos도 localhost:4000/videos/videos 해야 되는 것이다!

 

***어떤 분이 덧글에 달아주신 내용:

express.Router() 메소드를 사용하는 이유는, users가 중복되는 url 요청때마다 users를 매번 달아줘야 하는 불편함 해소와 관리 측면에서 router를 항목 별로 분리해서 다루고 하나에서 여러 개로 뻗어갈 수 있도록 설정해주기 위해서 routes를 사용한다고 생각하시면 됩니다. 우리는 userRouter라는 라우터 관리 미들웨어를 만들어 준 것입니다.)

 

+ 또 하나 추가

localhost:4000/users/change-password 혹은

localhost:4000/users/edit-profile 을 치면 userDetail이 호출된다.

userRouter.js에서 get을 정의한 순서 때문인데,

userRouter.get(routes.userDetail, userDetail); 문장을 가장 마지막에 등록하면 /change-password, /edit-profile 모두 정상 작동한다.

(userDetail의 path가 :id 이기 때문에, 어떤 문자가 들어오던 매치가 가능해서 res.send를 만나 끝나게 되기 때문)

 

복습(Recap)

- init.js : init.js에는 app.js에서 import한 application이 있다.

- app.js: application 관련 코드들은 app.js 파일에 담겨 있다.

- middleware: 그리고 middleware들을 추가했다.

• cookieParser: cookie를 전달받아서 사용할 수 있도록 만들어주는 미들웨어
• 사용자 인증 같은 곳에서 쿠키를 검사할 때 사용해야 한다.
• bodyParser: 사용자가 웹사이트로 전달하는 정보들을 검사하는 미들웨어
• request 정보에서 form이나아바타의 사진이나 비디오를 업로드할 때, 제목이나 댓글 같은 정보를 전달할 때 form에 담아서 업로드 해야 함
•  json 형태로 된 body를 검사한다
• helmet: 보안 관련 미들웨어
• morgan : application에서 발생하는 모든 일들을 기록
• Router
• globalRouter : 이 안에는 /home, /search, /join, /login, /logout URL이 담겨있음
• userRouter: 이 안에는 /users/ 주소들이 있음. /users/블라블라
• videoRouter: 이 안에는 /videos/ 주소들이 있음. /videos/블라블라

• Controller: 그리고 router 안에 들어가는 함수들을 각각 user와 관련되었냐 video와 관련되었냐를 구분해서 userController, videoController로 만들고 export해서 각각 router에서 불러왔다. → 여기가 MVC에서 C부분 (controller)
• routes.js : Router에 사용되는 경로를 편하게 한 번에 관리해주기 위해서 상수로 선언한 곳! (이렇게 관리하면 나중에 수정하기가 편하다. 하나의 파일에서만 수정하면 되기 때문에)

다음시간에는 

다음 비디오에서는 Pug라는 것을 설치할 것이다.

Pug는 express에서 View를 다루는 방식 중 하나이다. res.send 대신에 express로 HTML을 보여줄 수 있다.

실제 HTML을 전달할 것이고 CSS같은 것들로 멋지게 꾸밀 수 있다. 그게 MVC에서 V 부분이다.

 

M

View - Pug

Controller - 함수