익명의 개발노트

위 그림과 같이 보는대로 검색에 따른 내용물이 보이는 기능을 구현하려할때, 자바스크립트에서 디바운싱 기능을 이용하면 수월하게 작업할 수 있다. debounce 란? 특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술 연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것 검색창 input에 search라는 data를 바인딩 시킨 후 input 이벤트를 작성한다. handleSearchInput(e) { this.search = e.target.value; if(this.search.length !== 0){ clearTimeout(this.debounce); this.debounce = setTimeout(() => { const filteredList = this..

input 태그를 이용하여 여러개의 파일을 선택하여, 업로드 전 미리보기를 구현하려 한다. 한 개씩 적용할 때는 간단했는데, 여러개를 동시에 보여주려고 하니, 문제가 발생했다. 아래 코드는 한개씩 클릭해서 올리는 방식일때 코드이며, this.uploadImages는 컴포넌트의 자체 state 값(data() 안에 값)이다. onFileSelected(event){ var input = event.target; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = (e) => { this.uploadImages.push(e.target.result); }; reader.readAsDataURL(input.fil..

input 태그를 이용하여 입력된 값 바인딩하는 경우 영어는 문제가 없는데, 한글이나, 중국어, 일본어의 경우에는 바인딩이 늦게 된다. 일반적으로 Vue에서는 v-model을 이용하여 바인딩을 시키는데, input 안에서 모델을 이용하여 바인딩 시킬 경우 아래 그림과 같이 CJK는 한템포 늦게 반영이 된다. 이와 같은 사항을 보완하기 위해서는 input태그에서 @input or v-on:input을 이용하여 바인딩하면 실시간으로 입력값에 대해서 바인딩 받을 수 있다. 아래와 같은 코드로 바인딩하여 사용한다.