[SSAFY Project] AMU 프로젝트간 학습 내용

TOC

• AMU 프로젝트 게시물 목록
• I LEARNED
  • Vue의 self 수정자
  • Vue view 재호출
  • SCSS calc 내부에서 변수 사용하기
  • 사진이 1대1이 아니어도 중앙으로 배치되게 하는 방법
  • CSS 비율 고정
  • div에 이미지 넣는 방법

AMU 프로젝트 게시물 목록

• [SSAFY Project] 영화 추천 커뮤니티 사이트 AMU 총정리

• [SSAFY Project] AMU 회고

• [SSAFY Project] AMU 프로젝트간 학습 내용

• [SSAFY Project] AMU 프로젝트 삽질 기록

I LEARNED

Vue의 self 수정자

• Vue의 이벤트에서 .self 수정자를 추가하면 자식 컴포넌트를 제외한 그 자신만 확인하는 것. Event Bubbling(자식이 한 일을 부모가 아는 것)을 억제하는 역할
• Vue 이벤트리스너 여러 함수 사용하는 방법
  • @submit.prevent=”[funcA(), funcB()]” 로 array 형식으로 넣어주면 된다.
  • 기존 이벤트리스너 콜백함수와 달리 함수형으로 괄호를 붙여주어야 한다.

Vue view 재호출

• navigationDuplicated 에러 없이 router에서 자기 경로를 재호출하는 방법

this.$router.go(this.$router.currentRoute);

SCSS calc 내부에서 변수 사용하기

@mixin flex-line ($grow:1, $ju-co:center) {
  display: flex;
  flex-basis: calc(1000px * #{$grow});
  justify-content: $ju-co;
  flex-grow: $grow;
}

• 위처럼 calc 내부에 변수로 사친연산 등의 계산을 해야할 때 사용
• #{변수} 형식으로 자바스크립트에서 ${변수} 처럼 사용하는 것과 같다.

사진이 1대1이 아니어도 중앙으로 배치되게 하는 방법

• 프로필로 저장되는 사진이 1대1이 아니어도 주변을 잘라 div 크기에 맞게 배치하는 방법

.fill {
  width: 300px;
  height: 300px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
.fill img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%
}

<div class="fill">
  <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

• 참고 링크

CSS 비율 고정

#user-profile-image {
  width: 30%;
  aspect-ratio: 1 / 1;
  ...
}

• 1:1 비율 등에서 반응형을 구현할 때 사용
• 기존에는 calc() 로 계산하여 구현했으나 번거롭다.
• aspect-ratio 로 가로 / 세로 를 지정
• 참고 : CSS📚 이미지 비율 고정하는 방법 aspect ratio

div에 이미지 넣는 방법

img src를 computed에서 계산해 객체에 넣고, 이를 style에 그대로 바인딩하는 방법이다.

위와 같이 프로필 사진을 넣어보자.

<div
  id="user-profile-image"
  :style="profileImageSrc"
>

id를 다음과 같이 지정하고, style을 바인딩해주었다.

// ArticleDetailView.vue computed

profileImageSrc() {
  const profile_image = this.articleInfo.user.profile.profile_image
  return {
    'background-image': `url("http://localhost:8000${profile_image}"),
    'background-size': 'cover'
  }
}

자료구조 내에 path가 있는 위치까지 내려간다.

이는 상당히 복잡한 구조이므로 상수에 임시 저장한 뒤, url에 넣을 때 처리해주어 넣어준다.

#user-profile-image {
  width: 2em;
  height: 2em;
  border-radius: 50%;
}

div 태그의 크기와 border 설정을 해준다.