1/4

1. vue $listeners

- 자식에서 부모에게 전달되는 이벤트를 모아놓은 객체 (자식 -> 부모)

- 네이티브 이벤트를 컴포넌트에 바인딩할 때 사용한다 

- v-on="listeners"를 사용해 이벤트를 바인딩해준다

 

$listeners 속성을 이용하면 컴포넌트에서 v-on="listeners"를 이용해

부모 엘리먼트가 가진 이벤트 리스너를 특정 자식 엘리먼트에게 전달할 수 있다

input 같은 엘리먼트에 v-model을 적용하고 싶은 경우라면 listeners 같은 새로운 computed 속성을 생성하여 활용 가능

 

vue native ? 

- 컴포넌트에서 루트 엘리먼트의 네이티브 이벤트를 직접 감지하고 싶은 경우, v-on에 사용한다

- 네이티브가 어떤 일을 하는지 v-on 이벤트 장식자로 취급, 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트 호출 

이벤트를 직접 호출하고 싶은 경우에 사용 

하위 컴포넌트에 버튼을 두고 상위 컴포넌트로 감싸고 있는 형태

 

상위 <- emit - 하위 

상위 이벤트 호출하고 싶을 때 ? 하위 컴포넌트에 해당 이벤트를 작성해도 이벤트는 작동하지 않는다

vue 구성 요소는 기본 요소에 바인딩하려고 하기 때문

장식자가 바로 네이티브

네이티브를 붙이면 기본 요소를 무시하고 상위 컴포넌트에 있는 이벤트 실행

 

 

2. clip-path

clip-path CSS 속성은 요소의 클리핑 범위를 지정합니다.

클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

 

 

3.  new Intl.NumberFormat('ko-KR').format(숫자)

 

https://velog.io/@hyerani/JS-%ED%95%9C%EA%B5%AD-%EC%8B%9C%EA%B0%84-%EC%9B%90%ED%99%94-%EB%8B%A8%EC%9C%84-%EB%AA%A9%EB%A1%9D-%ED%98%95%EC%8B%9D-%EC%A7%80%EC%A0%95%ED%95%98%EB%8A%94-%EB%B2%95

<JS> 한국 시간, 원화 단위, 목록 형식 지정하는 법