MVC 패턴 - View(4)
이번 글에서는 header.pug를 활용하는 법을 배우겠다.
header는 footer와 반대로 문서의 머릿글을 나타내는 태그이다.
그러면 header.pug를 활용하는 법을 배워보겠다.
여기서는 앞에서 다뤘던 middleWare의 개념(https://brunch.co.kr/@topherlee/31)이 다시 활용된다.
1) partials 폴더안에 header.pug를 만들고,
header이름의 header 클래스와 두 줄의 칼럼을 추가한다.
2) 각각의 칼럼에 내용을 추가한다.
첫번째 칼럼에는 Youtube 로고를,
두번째 칼럼에는 Join 과 Log In 이라는 단어를 추가한다.
3) 다음은 Join과 Log In 앞에 추가한 링크를 실제 Join과 Log In의 Route로 연결해줘야 한다.
연결해주기 위해서 우선 middlewares.js를 만든다.
4) middlewares.js에 다음과 같은 코드를 추가한다.
(1) routes.js를 import 했고
(2) localsMiddleware라는 함수를 새로 만들었다.
(3) res.locals를 사용해서
res.locals.siteName, res.locals.routes라는 2개의 변수를 선언했다.
5) Express 문서에서 res.locals를 찾아볼 수 있다.
res.locals는 로컬 변수의 응답을 포함하는 객체이다.
정확한 의미는 뒤에 설명한 예시를 통해 이해하는 것이 더 빠를 것이다.
6) app.js로 이동해서
(1)localsMiddleware 함수를 import하고
(2)app.use(localsMiddleWare)를 선언한다.
이 작업을 통해 middleWare함수를 실제로 활용할 수 있게 된다.
7) 이제 header.pug로 이동하면 routes.join과 routes.login을 header.pug에서 활용할 수 있다.
8) main.pug로 이동해 header.pug를 import한다.
9) npm start를 실행하면 다음과 같이 Join과 Log In 링크가 보이고,
링크를 클릭하면 해당 페이지로 이동하는 것을 확인할 수 있다.
<Join 페이지>
<Login 페이지>
+ 여기서 한 가지 의문점이 들 수 있다.
왜 굳이 복잡하게 middleware 함수와 파일을 만들어서,
routes.js를 import하고,
그 파일과 함수를 app.js에서 다시 import하는 과정을 거쳐야 하나?
header.pug에서 routes.js를 직접 import하는 것이 더 나은 방법 아닌가?
그래서 실제로 header.pug에서 routes.js를 직접 import 해보았다.
그리고 import { localMiddleware } from "./middlewares"; 와
app.use(localMiddleware)를 주석처리 하였다.
그러면 다음과 같은 에러 결과를 확인할 수 있다.
이는 routes.join과 routes.login이 인식되지 않았음을,
즉, import routes from "./routes"가 효과가 없음을 의미한다.
결론적으로 이는 .pug파일과 .js파일이 기본적으로는 로직상 분리되어있음을 의미한다.
단, userController.js에서 render함수를 통해서 (https://brunch.co.kr/@topherlee/46),
view( .pug파일)를 controller와 연결해서,
실제 클라이언트에서 렌더링된 결과를 확인할 수 있는 것이다.
"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."
