📝 오늘 한 것

1. 복습 - SCSS (프로필 이미지 / 텍스트 줄 바꿈, 말줄임표 등)

📚 배운 것 (복습)

실제 코드는 github에 올림(wetube_v2)
프로필 이미지(avatar) / search / profile / edit / shared.scss

7. STYLES

• [TIL] 211209
  • populate 중첩 사용
  • form에 font-awesome 아이콘 넣기
  • 텍스트 수직 중앙 정렬
  • 프로필 이미지(avatar) 비율에 맞춰 원형으로 자르기
  • 여러 줄 문자열 줄 바꾸고 숨기기 (추가)

💡 populate 중첩 사용

// userController.js
export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id).populate({
    path: "videos",
    // populate 중첩 사용
    populate: {
      path: "owner",
      model: "User",
    },
    // 내림차순 정렬
    options: {
      sort: { createdAt: "desc" },
    },
  });
  if (!user) {
    return res.status(404).render("404", { pageTitle: "User not found" });
  }
  return res.render("profile", { pageTitle: user.name, user });
};

💡 form에 font-awesome 아이콘 넣기

• input(type="submit") 대신에 button(type="submit")을 넣어줬다.

//- search.pug

div.form-container.form-container__search
  form.search-form(method="GET")
    input(name="keyword", placeholder="검색", required)
    button.search-button
      i.fas.fa-search

• position: absolute 를 이용해 위치를 잡아줬다.

// search.scss

.form-container__search {
  border-style: none;
  box-shadow: none;
  margin-bottom: 4rem;
  padding: 0;
}

.search-form {
  position: relative;
  .search-button {
    border-style: none;
    background-color: transparent;
    color: $color-white;
    font-size: $font-regular;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;
  }
}

💡 프로필 이미지(avatar) 비율에 맞춰 원형으로 자르기

• background-image 속성을 이용했다. loggedInUser.avatarUrl (header.pug) / user.avatarUrl (profile.pug) / video.owner.avatarUrl (video.pug) 의 값을 가져와야 하기 때문에 background-image 속성은 pug 파일에서 인라인 스타일(inline style) 형식으로 추가했다.

• avatarUrl이 없는 경우는 일단 임시로 이모티콘을 넣어줬다. 배포 후에 AWS S3에서 기본 이미지를 가져오도록 수정할 것이다.

//- header.pug

a(href=`/users/${loggedInUser._id}`)
  if !loggedInUser.avatarUrl
    span.profile-img 😎
  else if loggedInUser.socialOnly
    div.profile-img(style=`background-image: url("${loggedInUser.avatarUrl}");`)
  else
    div.profile-img(style=`background-image: url("/${loggedInUser.avatarUrl}");`)

// shared.scss

.profile-img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

cf. 이전에 썼던 방법

div.profile-outer-box
  div.profile-inner-box
    a(href=`/users/${loggedInUser._id}`)
      if loggedInUser.socialOnly 
        img(src=loggedInUser.avatarUrl, crossorigin).profile-img
      else
        img(src=loggedInUser.avatarUrl).profile-img

.profile-outer-box {
  width: 60px;
  .profile-inner-box {
    padding-top: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    .profile-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

당장 갖다버리자. padding-top: % 관련해서 알고 있어야 하긴 하지만 그래도 당장 갖다버리자.

💡 여러 줄 문자열 줄 바꾸고 숨기기

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우,
word-break 속성과 word-wrap 속성 알아보기,
word-wrap 줄바꿈 속성(normal, break-word) 참고

//- video.scss

div.video-mixin__info
  a(href=`/videos/${video.id}`).video-mixin__title=video.title

// video.scss

.video-mixin__info {
  overflow: hidden; // 옆으로 넘치는 부분 숨김
  .video-mixin__title {
    overflow: hidden; // 밑으로 넘치는 부분 숨김
    line-height: 1.4rem; // 1줄 높이 설정
    max-height: 2.8rem; // 2줄 보여주고 싶으니까 1.4 * 2 (height 사용 x)
    word-break: break-all; // 음절 단위에서 줄 바꿈 (영어)
    word-wrap: break-word; // 음절 단위에서 줄 바꿈 (한중일 언어)
    // 이하 3줄 코드는 Chrome 버그(줄 바꿈 안됨) 때문에 추가함
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: $font-regular;
  }
}

처음 할 때 굉장히 어려웠던 파트인데 새롭게 다른 방법들로 다시 해보면서 정리가 조금 된 거 같다.

✨ 내일 할 것

1. 복습 계속하기 - video player