vue 개발환경에서 특정 버튼 클릭시 드롭다운을 활성화 하며, 해당 드롭다운 외부를 클릭할 시 드롭다운을 없애야하는 기능을 구현해야 했다. 이를 위해 특정 요소 외부클릭을 인식해야했다. dom 요소 직접접근하는 방식과 라이브러리를 사용하는 방식 등이 있었으며 나는 추후 이벤트값 활용을 위해 후자를 선택했다. 버튼을 클릭하여 드롭다운을 활성화 한 상태일때, 화면은 아래와 같은 모양이다. 1. 라이브러리 인스톨 나는 v-click-outside 라이브러리를 사용하였다. 우선 라이브러리 인스톨을 수행한다. npm install v-click-outside 2. import 및 directives 추가 import vClickOutside from 'v-click-outside' export default { ..

selectBox 화살표 디자인을 없앤 후, 내가 원하는 svg 이미지를 배경으로 설정하는 방식으로 변경할 수 있다. 1. selectBox 화살표 없애기 selectbox style에 해당값을 부여하여 디자인 속성을 없앤다. appearance:none; 2. 화살표 svg 이미지 삽입하기 background 속성으로 화살표 이미지를 추가한다. 이미지는 url로 삽입하며 상대경로를 활용하여 이미지 경로를 추가한다. 아이콘 반복형식으로 배경이 지정되지 않도록 no-repeat 속성을 함께 부여한다. 또한 아이콘 위치 및 크기를 함께 정의하면 끝! background:url('../icon/my-arr.svg') no-repeat 97% 50%/20px;

개념 화면의 일부 영역을 이미지 데이터로 변환하여 사용해야할 필요가 있어서 자바스크립트 브라우저 화면 캡쳐 라이브러리인 html2canvas 를 사용하기로 했다. * 공식사이트 https://html2canvas.hertzen.com/ 나는 버튼 클릭이벤트가 발생하면 특정 영역을 이미지로 따와야했기 때문에 해당 함수 호출부분에 아래와같은 코드를 추가하였다. html2canvas(textArea, { }).then(canvas => { const textToImg = canvas.toDataURL() }) 나는 이미지를 서버에 저장할필요가 없이 변환된 데이터값만 필요했기때문에 textToImg 변수로 담아 사용하였다. 만약 서버에 이미지를 다운받아야 한다면, 아래와 같이 사용할 수 있다. html2canv..