JavaScript 썸네일형 리스트형 [Javascript+Vue.js] Scrollbar 여부에 반응하는 엘리먼트 만들기(with Class and Style Binding) INTRO 웹 페이지를 개발하다보면, 유효성 체크를 위해 기존 엘리먼트에 별도의 아이콘을 배치하는 경우가 있다. 본 포스팅에서는 아이콘과 스크롤바가 겹치는 현상을 해결한 경험을 공유한다. 1. 하고자 했던 것 - 위의 네이버 예시를 보면, 자물쇠 모양은 해당 필드의 유효성 통과 유무에 따라 달라진다. - 프로젝트 진행 도중, - input 이 아닌 text area에 해당 기능을 똑같이 구현해야 할 일이 생겼다. - 그래서 v-model로 바인딩 된 변수를 감지하며 유효성 체크 로직을 적용하였고, - 유효성 검증 통과 여부에 따라 동적으로 style을 다르게 적용하여 해결. :class="{ 'check-ok': isValid === true, 'check-false': isValid === false,.. 더보기 [javascript] ES6 - 화살표 함수(Arrow function) INTRO 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. ES6(2015)의 기능인 화살표 함수에 대해서 알아본다. 0. 서론 - 화살표함수는 간단히 얘기해서, - 함수를 선언하는 방식을 보다 가독성 좋게 표현해주는 문법이다. - 아래의 예시를 보자. 명확한 차이를 알 수 있다. // 기존 함수 선언시 const normal = function(x) { return x + x; } // 화살표 함수 선언시 const arrow = (x) => { return x + x; }; - 아래는 특징을 알아본다. 1. 익명 함수로만 사용 가능 - 화살표 함수는 익명함수로만 사용 가능해서, 익명함수의 특성을 따른다. - 익명함수의 특징은 추후 포스팅에서 다룰 예정이.. 더보기 이전 1 다음
