Filter 2

javascript Object의 필터링 구현

회사에서 개발을 하던도중 프론트엔드쪽에서 간단한 필터링을 구현해야 했었는데, 그 작업을 하면서 생겼던 이슈에 대해서 정리한다. 구현하고자 했던 기능은 흔히 웹사이트에서 자주볼 수 있는 기능으로 검색창에 특정글자를 입력하면 조건에 부합하는 리스트만 출력되는 기능이였는데, 대략 다음과 같은 데이터가 있고, 사용자에게 보여지는건 값만 보여지게 되어있다. key : value 기호1번 : 이재명 기호2번 : 윤석열 기호3번 : 안철수 기호4번 : 심상정 기호5번 : 오준호 기호6번 : 허경영 기호7번 : 이백윤 기호8번 : 옥은호 기호9번 : 김경재 기호10번 : 김재연 여기서 사용자가 보여지는건 value에 해당되고, 사용자가 검색창에 "이"라는 단어를 검색하면 이라는 단어가 들어가있는 이재명, 이백윤만 리스..

JAVASCRIPT 2022.03.08

vue js event가 발생한 객체 value값 가져오기

vue js를 이용하여 화면단을 개발하던 도중 keyup 이벤트를 이용하여 필터하는 기능을 구현해야 했는데, 이 기능을 서버단에서 처리할지 클라이언트단에서 처리할지 고민하다가 결국 클라이언트단에서 처리하기로 결정하고(필터되는 부분이 복잡하고 자원이 많이들었다면 서버단에서 처리했을 것 같긴하다.) 코드작성을 시작헀는데, 처음에는 v-model과 v-on:keyup 이벤트를 이용해서 다음과 같이 작성했었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 {{item}} (function() { let vm = new Vue({ el: '#vi..

JAVASCRIPT 2021.07.28