Flash Message

1. Flash Message

 - 우리가 기존에 만든 미들웨어를 보면 아직까진 아무런 메시지도 랜더링 하고 있지 않음

 - 지금은 단순히 리다이렉트 되고 있지만 유저에게 메시지를 보여주는게 좋을거 같음

 - 이걸 만들기 위해서는 express-flash가 필요함

 - https://www.npmjs.com/package/express-flash

express-flash

 - 심플하게 이건 템플릿에 유저에게 메시지를 남길수 있게 하는 미들웨어임

 - 메시지는 세션에 근거하기 때문에 한 사용자만 볼 수 있음

// server.js
import flash from "express-flash";
app.use(flash());

 - 사용하기 너무 쉽고 이제 flash()가 세션에 연결해서 사용자에게 메시지를 남김

 - 이 미들웨어를 설치한 순간부터 req.flash라는 함수를 사용할 수 있음

 - 미들웨어나 우리가 컨트롤러에서 리다이렉트 했던 곳에서도 사용해도 됨

 - req.flash()를 사용할 때 근본적으로 하는 일은 locals 속성을 만드는 거임

   - 상기시켜보면 locals는 템플릿에서 사용할 수 있는 것들임

   - flash 미들웨어를 설치하면 우리를 위해 messages locals를 만들어 주고 그래야 views에서 사용할 수 있음

 - 이렇게 하고 에러 메시지가 뜨게 만들면 홈페이지에 에러 메시지가 출력이 됨

 - req.flash()를 사용하게 되면 자동적으로 messages.locals를 만듦

   - messages.에러의 종류(info나 error 등등)

 - 특이한 점은 메시지가 한번만 보여지고 express가 메시지를 캐시에서 지워버림

 - 이제 유저가 이해할 수 있게 알림 형태로 변경

 - mixin을 만들고 video때와는 다르게 하나는 메시지의 종류(kind), 또 하나는 내용(text)을 사용

 - class에 잘 추가됐으므로 css에서 해당 부분을 수정하면 됨

@keyframes goAway {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translateY(-50px);
    opacity: 0;
  }
}

.message {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 200px;
  padding: 10px 20px;
  border-radius: 10000px;
  text-align: center;
  animation: goAway 0.5s ease-in-out forwards;
  animation-delay: 3s;
  &.error {
    background-color: tomato;
    color: white;
  }
}

 - 심플하지만 괜찮은 알림이 나옴