코드 땜장이

 프로그래밍을 하다 보면, 두 배열 간의 연산이 필요한 경우가 많다. A배열에서 B배열에 있는 값을 제거한 C배열, A배열과 B배열에 같은 값만 추려낸 C배열, A배열과 B배열에 있는 값을 모두 갖고 있는 C배열.  차집합, 교집합, 합집합을 떠올렸다면 맞는 말이다. 지난 번에 소개한 lodash에 전부 가능하다.  차집합  1. _.difference  가장 간단한 함수이다. 두 배열 A와 B간의 차집합을 구한다. const a = [ 1 , 2 , 3 ] const b = [ 2 , 4 ] _. difference (a , b) // [1, 3]  A배열에서 B배열의 차집합을 구하기 때문에 1, 3을 구할 수 있다. 해당 함수는 원시값은 가능 하지만 레퍼런스 형에서는 아래처럼 모두 다른 값으로 판단 되기 때문에 전부 리턴한다. const a = [{ x : 1 } , { x : 2 } , { x : 3 }] const b = [{ x : 2 } , { x : 4 }] _. difference (a , b) // [{ x: 1 }, { x: 2 }, { x: 3 }]  2. _.differenceBy  특정 속성의 값을 비교하거나, 특정 값으로 변경하여 비교해야 하는 경우 필요하다. 바로 위와 같은 경우이다.  바로 아래와 같이 x를 확인하게도 만들 수 있다. const a = [{ x : 1 } , { x : 2 } , { x : 3 }] const b = [{ x : 2 } , { x : 4 }] _. differenceBy (a , b , 'x' ) // [{ x: 1 }, { x: 3 }]  또한 아래와 같이 특정 속성값이 아니라, 특정 속성들을 가지고 비교해야 할 수 있다. const a = [{ x : 1 , y : 2 /* ,v: 2*/ } , { x : 1 , y : 4 /* ,v: 4*/ } , { x : 2 , y : 2 /* ,v: 4*/ }] cons...

  lodash를 사용하다보면 살짝 아쉬운 경우들이 있다. 현재 개발중인 프로젝트에서만 자주 사용 하는 함수들도 있을 것이고, 자주 사용 할 법한 함수임에도 불구하고, 어른들의 사정에 의해서 개발을 안함 함수도 있을것이다.  그럴때를 위하여 lodash mixin을 만들어서 라이브러리 사용자에게 편의를 주는 경우도 있으니 사용 방법을 아래에 작성해 보겠다.  개발을 하다보면, 오브젝트에서 특정값을 꺼내서 다른값과 비교하는  _.get( foo, 'bar' ) === 'blah'  이와 같은 코드를 많이 작성하게 될 것이다.   그럴때 그냥 함수 하나로 _.getEq( foo, 'bar, 'blah' ) 이와 같은 코드로 작성 할 수 는 없나? 이런생각이 들어서 lodash 문서를 아무리 찾아봐도, 그런 함수는 지원 하지 않고 그나마 lodash로만 처리 한다면 이와 같은 코드를 짤수 있을 것이다. _chain( foo ).get( 'bar' ).eq( 'blah' ).value()  뭐 위의 코드 보다  _.get( foo, 'bar' ) === 'blah'  이 코드가 더 짧으니 뭐...쓸 일 없는 함수겠지만 mixin을 사용한다면 다르다. const getEq = function ( object , path , other ) { return _.chain( object ). get ( path ).eq( other ). value () } _. mixin ( { getEq } ) const foo = { bar : 'blah' } _. getEq ( foo , 'bar' , 'blah' ) // true _. getEq ( foo , 'bar' , 'blahblah' ) // false 하지만 위의 코드는 lodash의 기존 함수를 응용한거 치고 아쉬운점이 있다. 그것은 무...

 lodash에는 더욱 함수형 프로그래밍 스타일로 코드를 짤 수 있게, 지원해준다. 간단하게 커링을 지원을 해주고, 반복에 대한 행위를  첫번째 인자로, 데이터를 마지막인자로 스왑해주는 정도이다.  자 위의 내용이 무엇인지 어떻게 좋은 방식인지 한번 검토해보도록 하자.  예전 포스팅을 본 사람들이거나 함수형프로그래밍을 공부 해보신분들이라면 커링이 무엇인지 알겠지만, 처음 듣는 분들이라면 생소할 내용이니 예를 들고 진행을 하겠다. 커링(Currying) const curry = func => (a , ...args) => args. length ? func(a , ...args) : (...args) => func(a , ...args) const sayBlah = curry ((msg , to) => ` ${msg} ${to} !` ) const sayHello = sayBlah ( 'hello' ) sayHello ( 'world' ) // ➜ hello world! sayHello ( 'sejiwork' ) // ➜ hello sejiwork! const goodByeMessage = sayBlah ( 'goodBye' , 'sejiwork' ) // ➜ goodBye sejiwork!  위의 코드를 적당히 보면 확인이 가능 하다. 함수 A가 2개의 인자를 기대 하였는데, 그 보다 적다면 함수의 평가를 후로 미루게 되며, 함수의 인자가 가득 차게 되면 평가를 하게 된다.  위의 코드를 lodash fp를 이용하여 간단하게 작성해보자. cdn으로 예제를 따라하게 된다면 아래의 cdn을 이용하도록하자. <script src ="https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)" ></script> const sayBlah = _.curry((msg , to) ...

 개발을 하다보면, 한번만 실행 되어야 하는 함수들도 있고, 또는 자주 실행하게 되면 성능상 문제가 되는경우가 있어서 몇 번실행 하였는지에 대해서 플래그값을 유지하면서 실행 하여야 하는 함수들이 있습니다.  그러한 경우에 사용 할 수 있는 lodash 함수가 있어서 소개시켜드리려 합니다. 1. once 사용    여러번 실행한다고 해도 한번만 실행 되게 하는 함수 입니다. 초기화용 함수를 작성할 때, 사용 하면 아주 편리하게 한번만 실행 되게 만들 수 있습니다. 앞으로 소개할 두개의 함수보다는 자주 사용하진 않습니다. 그 이유는 초기화시라고 했는데, 초기화시에 이벤트를 발생하는 라이브러리, 프레임워크가 많기 때문이죠. 2. debounce 사용  위의 함수 실행된것을 보면 console.timeLog가 함수 실행 이후 1초뒤에 실행 된 것을 볼 수 있다. 또한 callTest('third')의 경우에는 두번을 연속으로 실행 하였으나 한번만 실행 되었다. debounce호 생성된 함수는 호출 된 후에 몇ms이후 동안 함수 호출이 없다면, 해당 함수를 평가해준다.  위의 경우에는 많은 곳에서 사용 될 수 있다. 예를 들면 블로그를 작성하는 도중에 자동 저장을 시켜주기 위하여 타이밍을 잡는 경우라던지? 아니면 아이디의 중복확인을 버튼없이 적절한 타이밍에 실행 시켜주는 경우이다.  즉 이벤트가 자주 발생하지만, 마지막 단락의 순간이 중요한 타이밍이고, 실시간성이 보장되지 않아도 되는 경우이다. 웹, 앱을 사용하다 보면 위의 경우는 꽤나 자주 사용 되는 방식이라는 것을 느 낄 수 있을 것이다.  앞으로 자주 쓰게 될 것이니 있다는 것을 알고만 있자. 3. throttle 사용 throttle의 경우에는 위의 스크린샷 만으로는 특징을 확인 하기가 어려울 수 있다. throttle은 이벤트리스너의 수행의 간격을 조정한다고 보면 된다. 1 ~ 30초 동안 매 100ms마다 이벤트가 발생한다고 보자. 하지만...

 예전 주제로 게으른 평가를 구현해보는 주제로 포스팅 했던적이 있다. 그것 또한 lodash에 구현되어있는지 테스트 및 사용 법을 포스팅 하고자 한다. https://sejiwork.blogspot.com/2020/12/1000-2.html  그 당시의 코드를 확인해보면 아래와 같다. const calcPointList = go ( members , lazyMap ( member => { const { family , point } = member return { ...member , calPoint : family * point } } ) , lazyFilter ( ( { calPoint } ) => calPoint >= 1000 ) , lazyMap ( ( { calPoint } ) => Math . floor ( Math . sqrt ( calPoint ) ) ) , lazyFilter ( calPoint => calPoint % 2 ) , take ( 2 ) )  위에 보면, lazyMap, lazyFilter, lazyMap, lazyFiler, take를 사용 함으로써, members데이터 모두를 map, filter, map, filter, take 순회 하는 것이 아닌,  members 데이터 각각을 가지고 lazyMap, lazyFilter, lazyMap, lazyFiler, take 한번씩 돌려보고 데이터가 두개(take(2)) 되는 순간 더 이상 평가를 하지 않아도 되게 처리 되었다.  전에 테스트 했던 방식과 같이 샘플 데이터는 아래와 같은 함수로 처리 하고자 한다. const genMember = () => { return { family : Math . ceil ( Math . random () * 8 ) , point : Math . ceil ( Math . random (...

 Lodash : 공식적인 소개 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리입니다. 라고 표현 됩니다.  자주 사용 하는 함수들을 기본적으로 제공하는 ES6에서 제공하는 기본함수들과 비교를 좀 하면서 소개 드리겠습니다.  테스트에서 사용 하는 데이터는 아래와 같습니다. const bookList = [ { name : ' 재미있는 책 ' , author : 'tom' , pages : 123 } , { name : ' 재미없는 책 ' , author : 'tom' , pages : 200 } , { name : ' 그저 그런 책 ' , author : 'tom' , pages : 150 } , { name : ' 재미있는 책 ' , author : 'alice' , pages : 150 } , { name : ' 재미없는 책 ' , author : 'alice' , pages : 300 } , { name : ' 그저 그런 책 ' , author : 'alice' , pages : 450 } ]  1. filter, find   1-1. 저자가 "tom"인 책들을 찾으시오. _.filter( bookList , { author : 'tom' }) bookList . filter (({author}) => author === 'tom' )   1-2. 저자가 " alice"고 제목이 "재미있는 책"을 찾으세요. _.find( bookList , { author : 'alice' , name : ' 재미있는 책 ' }) bookList . find (({author , name}) => author === '...