80 tooltip 기능

source: categories/study/vue-experiance/vue-experiance_9-80.md

80 tooltip 기능

1. 영역이 작아 말줄임된 요소가 있을시 해당요소 hover하면 툴팁뜨는 기능
2. v-tooltip 클래스 추가하는 것으로 해당 기능이 작동하게 구현
3. 하지만 해당 요소가 동적으로 생성되는 거라면?
4. updated 훅에 v-tooltip 동적으로 생성된 후에 이벤트 등록하도록 했는데 updated 훅이 화면 렌더링이 완전히 끝난 후에 실행되는게 아닌가봄.
   렌더링 시작시에 실행되는 개념인가봄.
   그래서 렌더링 실행되면 렌더링 중에 updated 훅이 실행되니까 그 사이에 렌더링이 완료되지 않았으면 v-tooltip을 못잡을 가능성이 있음
5. 그렇다고 jQuery 동적 요소 이벤트 핸들링 등록하는 것처럼(이벤트 버블링 감지), root에서 이벤트가 일어나는지 아닌지 감시하게하기엔 좀 그럼..
   왜냐면 click 이벤트처럼 가끔 일어나는 이벤트가 아니라 hover 이벤트이기 때문에 document에 이벤트 리스너를 잡아버리면 해당 컴포넌트에 진입함과 동시에 이벤트가 계~~~속…
   컴포넌트를 나갈때까지 발생..
   이게 좋지 않아보여서..
   아니 좋을리가 없을거 같아서 여기선 이렇게하면 안될거같다는 생걱
6. 그래서 vue mixin 형태에서 component 단위로 수정
7. 흠.. 렌더링이 다 끝난 후 실행되는 라이프 사이클 훅 함수는 없는 것인가..
8. https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html#mounted
   1. 여기선 전체 화면 내용이 렌더링 된 후에 mounted 훅이 실행된다고 하지만..
   2. 이 전체 화면 내용이 렌더링 된 후 라는 뜻이 완전히 다 그려진 후 라는 뜻은 아닌듯하다.
   3. v-tooltip을 못잡아낸다.