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

  • navigationDuplicated 에러 없이 router에서 자기 경로를 재호출하는 방법
this.$router.go(this.$router.currentRoute);

@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이 아니어도 주변을 잘라 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>

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

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

image

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

<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 설정을 해준다.