Youtube Clone Coding (13. express-flash)

express-flash는 메세지를 보여주기위한 도구이다.

  1. npm i express-flash
    • 설치하고 server.js에 import한뒤 미들웨어로 사용가능
      import flash from "express-flash";
      app.use(flash());
    • 미들웨어로 등록하면 req.flash("메세지 타입", "메세지")을 쓸 수 있다.
      export const logout = (req, res) => {
        req.flash("info", "Bye");
        req.session.destroy();
        return res.redirect("/");
      };
    • req.flash()를 쓰면 flash가 자동적으로 res.lcoals.messages를 만들어 pug에서 messages로 쓸 수 있다.
      • req.flash("info", "Bye")로 설정한경우 pug에서 messages.info를 써서 message를 불러 올 수 있다.
        • messages.info는 위에서 설정한 Bye이다.
  2. 설정한 flash message mixins에서 만들어서 base.pug에 가져오기.
    • mixins/message.pug
      mixin message(kind,text)
        div.message(class=kind)
          span=text
    • base.pug
      include mixins/message
      
      doctype html
      html(lang="ko")
        head
          meta(charset="UTF-8")
          meta(http-equiv="X-UA-Compatible", content="IE=edge")
          meta(name="viewport", content="width=device-width, initial-scale=1.0")
          link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css")
          link(rel="stylesheet", href="/static/css/styles.css")
          title #{pageTitle} | #{siteName}
        body
          if messages.error 
            +message("error",messages.error)
          if messages.info 
            +message("info",messages.info)
          if messages.success  
            +message("success",messages.success)
          include partials/header 
          main 
            block content
          include partials/footer.pug
          script(src="/static/js/main.js") 
          block scripts

좋은 웹페이지 즐겨찾기