기본 콘텐츠로 건너뛰기

12월, 2021의 게시물 표시

Lorem Picsum ( 샘플 이미지 )

  일반적으로 텍스트가 놓일 공간에 대해서 lorem ipsum을 많이 쓰곤 한다. 안 써 보신분이라면 아래가 lorem ipsum이다. "lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 위키에 따르면 변역은 아래와 같다. 참고로 구경해보자. " 역시 마찬가지로, 단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 때로는 발생하기 때문에 고통을 찾는 사람이 있는 것이다. 간단한 예를 들자면, 모종의 이익을 얻을 수도 없는데 힘든 육체적 노력을 기꺼이 할 사람이 우리들 중에 과연 있겠는가? 하지만 귀찮은 일이 뒤따르지 않는 즐거움을 누리는 것을 선택한 사람, 혹은 아무런 즐거움도 생기지 않는 고통을 회피하는 사람을 누가 탓할 수 있겠는가? "  뭔소린지 모르겠다.  꼭 한때 유행했던, 키보드 추천타이핑으로 적은 시 같긴 하다.  개발을 하다보면 내용이 텍스트가 담겨져 있는 예제를 많이들 볼 수 있다. 뭐 적당히 내용이 중요하지 않은 곳에 넣기에 좋은 문구이다.  자 그러면 더미 텍스트는 있는데,

arguments가 뭐야?

 es6를 배우다 보면 뭐 물론... 지금은 자바스크립트겠지만... arrow function과 일반 function의 차이로 arguments가 없다라는 문장을 항상 볼 수 있다.  그런데... 배우는 입장에서 arguments? 그게 뭔데? 라는 생각을 해본적이 있을 것이다. 딱히 알았다고 해도 이걸 어따 쓰지... 이 생각도 들었을 것이다. 일단 parmeter와 argument의 차이를 알자. function foo (bar) { console . log (bar) } foo ( 3 )  위의 함수는 뭐 설명하기도 민망한 함수를 만들어 보았다. 뭐 설명 하는데 어려운 코드가 필요 한것은 아니니. foo를 3이라는 인자(argument)로 호출 하였다. foo라는 함수는 bar라는 매개변수(paramter) 를 console.log의 인자로 이용하여 호출 하고 있다.  자 여기서 arguments와 parameter는 큰 차이를 갖는다. function foo (bar) { console . log (bar) // 1 console . log (arguments) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] } foo ( 1 , 2 , 3 ) parameter bar를 이용해서는 하나의 값만 갖지만, arguments로 접근하여 Arguments 객체에 1, 2, 3값이 있는 것을 볼수있다. Arguments는 유사배열이라고 보면 된다. 인덱스가 있고, length가 있으며 iterable protocol을 만족 하고 있다. 여기서 특이한 호출 방법을 알려주자면 아래와 같다. function foo (bar) { console . log (bar) // 1 console . log (arguments) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

lodash 내가 만든 함수를 lodash로 이용하기.(mixin)

  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 fp 사용하기.

 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)