💕 진도

[풀스택] 유튜브 클론코딩

2.12~2.17 강의

😁 Pug

• Pug는 HTML을 훨씬 더 멋있고 효율적으로 쓰게 도와준다.
• HTML과 달리 닫힘 태그를 쓸 필요가 없다.
• HTML과 달리 꺽쇠('<') 같은 것을 쓸 필요가 없다.
• 부모 자식 관계는 파이썬처럼 들여쓰기로 표현한다.
• Javascript 코드는 #{---} 처럼하여 '---'에 명령어를 쓸 수 있다.

doctype html
html
    head
        link(rel="stylesheet", href="https://xxx.com", crossorigin="anonymous")
        title #{pageTitle} | #{siteName}
    body
        include ../partials/header
        main
            block content
        include ../partials/footer

🤣 res.locals

• React의 ContextAPI 와 비슷한 기능을 한다.
• View, Controller 등에서 쓰일 전역 변수를 지정한다.
• 아래의 코드처럼 작성하면 앞으로 variableName 변수에 "variableValue"가 들어가 있음을 확인할 수 있다.

export const localsMiddleware = (req, res, next) => {
  res.locals.variableName = "variableValue";
  next();
};

• 하나의 템플릿에서만 쓰고 싶을 때는 아래와 같이 쓴다.
• res.render의 두번째 인자로 넘겨준 object key, value 값은 그 곳에서만 불리고 쓰여질 수 있다.

export const home = (req, res) => res.render("home", { pageTitle: "Home" });