익명의 개발노트

[vue.js] debounce를 이용한 검색기능 구현

위 그림과 같이 보는대로 검색에 따른 내용물이 보이는 기능을 구현하려할때, 자바스크립트에서 디바운싱 기능을 이용하면 수월하게 작업할 수 있다. 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..
코딩일기/TIL 2020. 7. 14. 19:22
[vue.js] 클릭시 focus 이벤트

위 그림처럼 메뉴 클릭시 해당 화면으로 이동하는 방법에는 2가지가 있다. ID를 이용한 방법과 scrollTo 를 사용하는 방법이다. ID는 원하는 위치로 이동하고자 하는 곳에 id 값을 지정하고, 사이드 메뉴 클릭이벤트에 해당 id 를 부여하면 된다. window.location.href = '#id명' 두번째는 사이드 메뉴 클릭시 보여주고자 하는 값의 TOP위치를 계산해서 아래와 같이 설정해준다. window.scrollTo({top:'위치값', behavior:'smooth'}); 화면의 전체 스크롤 크기를 알고 싶을때 파이어폭스에서는 scrollMaxY가 있는데, 크롬이나 다른 브라우져에는 없다, 이런 경우 아래와 같이 작성해주면 scrollMaxY와 똑같은 기능을 구현 할 수 있다. const ..
코딩일기/TIL 2020. 7. 13. 12:30
Docker 설치(mac)와 명령어

1. 설치하기 다운로드 링크 : https://docs.docker.com/docker-for-mac/install/ Install Docker Desktop on Mac Docker Desktop for Mac is the Community version of Docker for Mac. You can download Docker Desktop for Mac from Docker Hub. Download from Docker Hub By downloading Docker Desktop,... docs.docker.com 설치되었으면 도커 명령어로 확인한다. docker version 설치가 되면 위와 같이 client, server 에 대한 정보가 출력된다. 도커는 클라이언트와 서버로 버전정보가 나뉘어..
Cloud/Docker 2020. 7. 4. 15:15
Prev 1 2 3 4 5 6 7 8 ··· 80 Next