자바스크립트의 Array 메소드 filter()에 대하여 알아봅니다.# 자바스크립트 Array filter() 메소드배열 내장 메소드는 매우 다양한데 그 중에서도 많이 사용되는 메소드를 선택하라면 map(), filter(), reduce() 등이 있습니다. 필터는 자주 사용되면서도 HOF(Higher Order Function)이기 때문에 인자로 다른 함수를 받습니다. 그래서 filter()는 무엇을 할 수 있을까요?가장 중요한 filter()의 기능은 이름처럼 배열값의 필터링(Filtering) 기능을 수행합니다. 즉 원하는 값만 쉽게 얻을 수 있도록 도와줍니다....
자바스크립트 라이브러리 lodash의 함수 중 filtering()에 대하여 알아봅니다.# lodash filter() 함수 알아보기lodash의 filter() 함수는 컬렉션에 사용하는 함수로 주로 배열에 사용하여 값을 필터링하는 기능을 수행하는 유용한 함수입니다. 간단한 문법은 아래와 같습니다._.filter(컬렉션, 필터링 조건)두 가지 인자를 받으며 첫 번째는 필터링 대상을 그리고 두 번째로 필터링의 조건을 전달할 수 있습니다.- 컬렉션 : Collection으로 필터링의 대상- 필터링 조건 : 함수 및 일치하는 값 또는 조건그럼 아래에서 간단한 예제를 만들어...
자바스크립트를 사용하여 객체를 사용하려고 합니다. 이때 객체가 가진 모든 프로퍼티들의 키와 값을 확인하여 값이 있는 경우의 키들만 남기고 싶다면 어떻게 할까요?# 객체에서 모든 키의 값이 있는 경우만 가져오기쉽게 말해 객체의 프로퍼티에서 값이 없는 경우를 다 제외하고 있는 값만 가져오는 방법을 의미합니다. 이해하기 쉽게 예를 들어보자면 아래에는 객체 option이 존재합니다.option = { siteName: '웹이즈프리', url: 'webisfree.com', no: 1, popular: null, ...
자바스크립트에서 만약 빈 배열 값이 존재하는 경우 이런 값만 삭제하는 방법을 알아보려고 합니다.예를들어 기존의 값이 위라면 아래와 같이 변경하는 방법입니다.myNum = [1, undefined, 3, '', 5]; // 변경 전myNum = [1, 3, 5] // 변경 후즉 값이 비었거나 선언되지 않은 배열 값만 제거하는 방법입니다.# 자바스크립트 배열에서 빈 값 제거하기이제 예제를 하나 만들어 봅니다. 일단 테스트 변수를 하나 만들어야 겠죠. 위의 myNum 배열을 그대로 가져옵니다. 그리고 여기서 배열 함수 filter()를 사용해 값이 있는 것만 반환하도록 코...
CSS의 filter 프로퍼티를 사용하여 블러 효과(Blur effect)를 적용하는 방법에 대하여 알아봅니다. CSS의 filter는 CSS3에서 지원된 프로퍼티로 특정 이미지나 요소에 적용하면 다양한 필터 효과를 적용할 수 있습니다. 쉽게 생각하면 포토샵의 필터 효과들의 일부를 웹에서 구현 가능하도록 도와준다고 생각할 수 있죠.# CSS Filter Blur 효과 적용filter에는 여러가지 값들이 사용되지만 blur()는 가장 많이 쓰이는 효과 함수 중 하나입니다. 대상을 흐릿하게 만들어주는 특징이 있는데 문법은 아래와 같습니다.img { filter:...
lodash의 _.find()를 사용하면 원하는 객체의 값만 쉽게 찾을 수 있습니다. 그런데 AND 또는 OR 조건으로 값을 찾고 싶다면 어떻게 할 수 있을까요? 아래에서 알아보세요.# lodash에서 AND / OR 조건으로 find() 찾는 방법만약 AND 또는 OR 조건으로 찾을 경우 두 가지 방법이 존재합니다. 먼저 find()에 콜백함수를 적용하는 방법이 있으며 .filter()를 사용하는 방법도 존재합니다.! 콜백함수를 적용하기콜백함수에 조건식을 사용하여 원하는 값만 리턴하려고 합니다. 만약 site라는 변수에서 다음과 같은 값을 찾으려고 합니다...
만약 커스텀 필터링을 추가하여 반환받는 값에 html 태그가 있는 경우 이를 정상적으로 웹페이지에 보여주려면 어떻게 할까요?<p>{ { myStr | myCustomFilter } }</p>만약 위와 같은 커스텀 필터가 있다고 가정해봅니다.function myCustomFilter() { // Code here var str = '<br />'; return str;}위와 같이 필터링을 적용할 경우 <br />은 텍스트로 처리됩니다. 이를 html로 처리하기 위한 방법은 무엇...
AngularJS 날짜 filter를 사용한 표현 방법 <body ng-app="testApp" ng-controller="testController as testCtrl"> {{ testCtrl.title }} <br /> {{ testCtrl.myDate | date: 'yyyy.MM.dd HH:mm (UTC- Z)'}} <script> app = angular.module('t...