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