[유튜브 클론코딩] 2.16 Local Variables in Pug (local 변수를 global 변수로 사용하도록 해주는 미들웨어 만들기

2.16 Local Variables in Pug

미들웨어는 레이어 같은 구조

템플릿에 정보를 추가할 시간이다.

컨트롤러에 있는 정보를 템플릿에 추가하는 법에 대한 것이다.

한 템플릿에만 추가하거나 전체 템플릿에 추가할 수 있다.

템플릿 전체에 추가하는 방법부터 설명하겠다.

헤더가 라우트 객체에 접근하도록 하고 싶다.

 

미들웨어를 사용해야 한다.

알겠지만, 미들웨어는 레이어 같은 것이다. 위에서 밑으로 한단계씩 내려간다. (top-bottom 구조)

처음에 view engine을 pug로 설정했다. cookie를 파싱하고, body에 담긴 정보를 파싱한다. 그리고 helmet, morgan이 있다. 그 후에 컨트롤러, 라우트들이 있다. helmet을 가장 위에 두도록 하자.

 

localsMiddleware 만들기

localsMiddleware는 local 변수를 global 변수로 사용하도록 만들어주는 미들웨어이다.

local 기능을 통해 변수에 접근할 수 있다.

 

const localsMiddleware = (req, res, next) => {

}

app.use(localsMiddleware);

↑ app.js

일단은 이런 구조인데, 항상 하는 것 처럼 코드를 분리할 것 이므로 middlewares.js라는 파일을 만들고 localsMiddleware는 여기서는 잘라내기한다 .그리고 middlewares.js에 붙여넣고 export해준다. 그래야 다른 곳에서 이 함수를 쓸 수 있기 때문이다.

그리고 app.js에서 import 해준다.

 

그리고 app.use(localsMiddleware)의 코드 순서를 잘 생각해야 한다.

위에서 아래 순서대로 작동하기 때문에, 라우터보다 아래에 있으면 라우터는 locals에 접근을 못한다.

그래서 어디에 위치시켜야 할 지 잘 알아야 한다.

 

 

middleware.js

 

export const localsMiddleware = (req, res, next) => {

};

여기에 이제 locals를 추가할거다. locals가 추가되면, 이제 그것들을 템플릿, 컨트롤러, 어디에서든 쓸 수 있다.

 

https://expressjs.com/ko/4x/api.html#res.locals

여기 들어가서 res.locals 부분을 본다.

locals는 로컬 변수 응답을 포함하는 객체이다. 이 프로퍼티는 유용한 정보를 내보내는 데에 유용하다.

 

import routes from './routes';

export const localsMiddleware = (req, res, next) => {

    res.locals.siteName = "MyTube";

    res.locals.routes =  routes;

    next();

};

siteName과 routes를 작성했다. 저 routes를 middleware.js에서 쓰려면 import를 해줘야 한다. (어차피 자동 import되긴 함)

그리고 미들웨어가 next에 req를 전달해야 한다.

이 경우에 미들웨어가 커넥션과 라우터들 사이에 있으니까 next()라고 하면 된다.

(app.js에서 보면, localsMiddleware 함수 뒤에 라우터 함수들이 있었기 때문에 next()로 넘겨주어야 한다.)

 

이제 main.pug에서, title에 'MyTube'라고 직접 적는 대신에, #{siteName}이라고 적어주면 된다.

partials/header에서도 a 태그에 # 대신에 routes를 쓸 수 있다. routes.join 이렇게 쓸 수 있다.

즉, locals에 있는 것은 템플릿에 변수명 처럼 존재한다.

 

 

header.header

    .header__column

        a(href=routes.home)

            i.fab.fa-youtube

    .header__column

        ul

            li

                a(href= routes.join) Join

            li

                a(href= routes.login) Log In

header.pug에서 a href를 다음과 같이 쓸 수 있다.

코드를 조금 수정해서 유튜브 아이콘을 누르면 홈으로 돌아갈 수 있도록 했다.

 

**유의! pug는 VS Code가 지원하지 않기 때문에 자동완성은 되지 않는다.

 

결론

locals에 로컬 변수를 저장하면, 이 변수들을 템플릿에서 사용할 수 있다.

템플릿을 직접 수정하지 않고 미들웨어에서 수정하면 된다.

 

나중에 사용자 데이터 관련한 정보를 locals에 저장해보겠다.

 

전역적으로(글로벌) 사용할 수 있는 변수를 추가하는 방법을 알아봤다.

모든 템플릿에서 사용할 수 있다. 템플릿, 뷰, 모든 곳에서 사용 가능하다.