one single source of truth! / local 변수를 global화 하기

앞 서 살펴본 partials 중 header에서 anchor 태그로 연결된 링크에 대해서 생각해보자.

 

header.header
    .header__column
        <i class="fab fa-youtube"></i>
    .header__column
        ul
            li
                a(href="#") Join
            li
                a(href="#") Log in

 

보통 html에서는 /join 이런 식으로 직접 url을 줬으나 이는 비효율적이다.

추후에 수정해야 할 경우 이 경로를 포함한 코드 전부를 찾아서 수정해야 할 것이 아닌가.

 

one single source of truth.  routes.js에서 다 처리해야 한다.

즉, 아래와 같은 방식으로 처리해야 한다.

a(href=routes.join) Join

 

이를 위해선,

1. middleware를 만든 후 routes를 import한다. => local의 global화

(당연히 app.js에 app.use(localMiddleware)도 해줘야)

import routes from "./routes";

export const localMiddleware = (req, res, next) => {
  res.locals.siteName = "Youtube";
  res.locals.routes = routes;
  next();
};

2. anchor 태그에 추가해준다. 

(local 변수가 global화 되었기 때문에 이렇게 쓰는 것이 가능함)

header.header
    .header__column
        <i class="fab fa-youtube"></i>
    .header__column
        ul
            li
                a(href=routes.join) Join
            li
                a(href=routes.login) Log in

 

추후 passport.js를 이용하여 vies에서 req.user를 사용할 때 이 방법이 요긴하게 사용된다.