📝 오늘 한 것

1. flash messages - express-flash / req.flash() / messages.key / keyframes / animation 속성 / position: absolute & margin: 0 auto

📚 배운 것

1. flash messages

요청에 대한 응답으로 pug 파일을 렌더링한 경우에는 템플릿에 변수를 공유함으로써 메시지를 띄울 수 있다.

대신 요청에 대한 응답으로 redirect를 사용한 경우에는 사용자에게 그 이유를 알려주고 싶다면 flash messge를 사용할 수 있다.

1) express-flash

express-flash를 설치한다.

$ npm i express-flash

flash 미들웨어 import 한 후 사용할 수 있도록 한다.
이를 통해 flash 미들웨어는 session에 연결하여 해당 user에게만 메시지를 보여줄 수 있다.
이는 일회성 메시지로 한번 보여주고 나면 express가 cache에서 지워버린다.

// server.js
import session from "express-session";
import flash from "express-flash"; // express-session 보다 뒤에서 import 해야 한다 ❗

app.use(flash());

2) req.flash()

req.flash("메시지 타입", "메시지 내용");

flash 미들웨어를 설치하면 req.flash() 함수를 사용해 falsh message를 만들 수 있다.
상황에 알맞은 메시지들을 만들어 미들웨어와 컨트롤러에 추가하도록 한다.

middleware.js

const protectorMiddleware = () => {
  if (req.session.loggedIn) {
    next();
  } else {
    req.flash("info", "Not Authorized");
    return res.redirect("/login");
  }
};

const publicOnlyMiddleware = () => {
  if (!req.session.loggedIn) {
    next();
  } else {
    req.flash("info", "Not Authorized");
    return res.redirect("/");
  }
};

userController.js

export const finishGithubLogin = async (req, res) => {
  
  // 중략
  
  if ("access_token" in tokenRequest) {
    
    // 중략
    
    // github API의 user의 유효한 이메일이 없을 시
    if (!emailObj) {
      req.flash("error", "No valid email.");
      return res.redirect("/login");
    }
    
    // 중략
    
  } else {
    // 액세스 토큰이 없을 시
    req.flash("error", "No access token");
    return res.redirect("/login");
  }
};

// 로그아웃 시
export const logout = (req, res) => {
  req.session.destroy();
  req.flash("info", "Bye bye");
  return res.redirect("/");
};

// github로 계정 만든 user가 패스워드를 변경하려고 할 때
export const getChangePassword = async (req, res) => {
  if (req.session.user.socialOnly === true) {
    req.flash("error", "Can't change password.");
    return res.redirect("/");
  }
  return res.render("change-password", { pageTitle: "Change Password" });
};

// 패스워드 업데이트 시
export const postChangePassword = async (req, res) => {
  
  // 중략
  
  req.flash("info", "Password updated");
  return res.redirect("/users/logout");
};

videoController.js

// 수정하려는 비디오의 소유자가 아닐 때
export const getEdit = async (req, res) => {
  // 중략
  
  if (String(video.owner) !== _id) {
    req.flash("error", "Not Authorized");
    return res.status(403).redirect("/");
  }

  // 중략
};

// 수정하려는 비디오의 소유자가 아닐 때
export const postEdit = async (req, res) => {
  // 중략
  
  if (String(video.owner) !== _id) {
    req.flash("error", "Not Authorized");
    return res.status(403).redirect("/");
  }
  
  // 중략
};

// 비디오 삭제 시
export const deleteVideo = async (req, res) => {  
  // 중략
  
  if (String(video.owner) !== _id) {
    req.flash("error", "Not Authorized");
    return res.status(403).redirect("/");
  }

  // 중략  
};

3) messages.key

req.flash()를 통해 메시지를 만들면, 해당 메시지가 담긴 messages 변수가 만들어진다.
pug 파일에서 messages.key 값을 사용해 해당 메시지를 보여줄 수 있다.

각기 다른 메시지들을 같은 형태로 보여주기 위해 mixins 폴더에 message.pug 파일을 작성한 후 base.pug 파일에 include 했다.

message.pug

mixin message(kind, text)
  div.message(class=kind)
    span=text

base.pug

include mixins/message

doctype html
html(lang="ko")
  head
    //- 중략
  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

4) CSS 스타일링

// styles.scss

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

.message {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  max-width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 1000px;
  animation: goAway 0.5s 3s ease-in-out forwards;
  color: white;
  &.error {
    background-color: $red;
  }
  &.info {
    background-color: $grey;
  }
  &.success {
    background-color: $blue;
  }
}

(1) keyframes

@keyframes 애니메이션 이름 {
  from {
  
  // 애니메이션 실행 전 스타일
  
  }
  to {
  
  // 애니메이션 실행 후 스타일
  
  }
}

주의할 점은 keyframes은 반드시 '구체적인 수치 값'을 지정해야만 정상적으로 작동한다는 것이다.
즉, 수치 값을 적을 때 auto를 사용할 수 없다.

(2) animation 속성

css animation 총정리 (transition, transform, translate, animation, @keyframes) 참고

animation: 이름 | 지속 시간 | 지연 시간 | 진행 방식 | fill-mode 속성

from에서 지연 시간만큼 시간이 지나면, to가 지정한 진행 방식으로 발생하고, to 상태가 지속 시간만큼 이어진다.

fill-mode 속성은 애니메이션이 실행 전·후에 대상에 스타일을 적용하는 방법을 지정한다.
forwards를 지정하면, 지속 시간이 경과해 애니메이션이 끝나도 to 상태가 계속 유지된다.

(3) position: absolute에 margin: 0 auto 적용하기

CSS position property 정리

요소가 position: absolute 상태일 때 margin: 0 auto를 지정하더라도 해당 요소는 중앙 정렬되지 않는다.
이때 해당 요소가 블록 레벨 요소이더라도 마치 인라인 레벨 요소처럼 컨텐츠만큼의 너비만을 가지게 된다.

div {
  position: absolute;
  right: 0;
  margin: 0 auto;
}

position: absolute 요소를 중앙 정렬하기 위해서는 margin: 0 auto가 먹도록 left: 0과 right: 0을 추가해 해당 요소가 부모 너비를 모두 차지하게 만들어야 한다.

div {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}

✨ 내일 할 것

1. comment section