이유's Programming/JavaScript

함수형 프로그래밍에 대한 introduction / 선언형 프로그래밍/ 함수형 프로그래밍/ functional programming

왜 함수형 프로그래밍을 해야하는가? 함수형 프로그래밍(FP)은 결코 새로운 개념이 아닙니다. 프로그래밍의 거의 모든 역사에 걸쳐 있었습니다. 하지만, 원래는 주류가 아니었던 FP 가 현재는 언어 수준 뿐만 아니라 정말 많은 부분에서 그에 대한 관심이 커지고 있습니다! 그래서 왜 이 함수형 프로그래밍을 해야하는지 아래 두 예제를 보면서 살펴보겠습니다. 두 예제는 정확히 동일한 outcome 인 42 를 반환합니다. 첫번째 예제 ) var numbers = [4,10,0,27,42,17,15,-6,58]; var faves = []; var magicNumber = 0; pickFavoriteNumbers(); calculateMagicNumber(); outputMsg(); // The magic numb..

Redux 에서 Mobx 상태관리 도입기 - 참고

medium.com/@buen_cielo/redux-%EC%97%90%EC%84%9C-mobx-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%8F%84%EC%9E%85%EA%B8%B0-2-4ecc78f6e981 Redux 에서 Mobx 상태관리 도입기-2 Mobx 에서 필요한 규칙 정해보기 medium.com 여기서 생각되었던 건 store 를 그냥 단순히 store 개념으로 만드는 것이 아니라 우선 어떤 구조가 있다는 것을 알면 좋겠다.

[ 구글 채널 ] Scheduling Tasks - HTTP 203

www.youtube.com/watch?v=8eHInw9_U8k 해당 내용 setIntermediate 나 pup description - tasks, nanotasks, microtasks, 등의 차이를 알 수 있는 동영상

[ React -1 ] React.memo 를 사용하여 컴포넌트 성능 최적화하기 . / React.memo 사용할 때 그리고 사용하지 않을 때 팁 정리

유저들은 아주 작은 속도에도 굉장히 민감하게 반응을 합니다. 100 ~300 의 정말 작은 초 단위도 느낄만큼 유저들은 서비스의 속도에 대해서 아주 민감하네요. 이런 UI 를 해결하기 위해서, React 는 higher order component 중 하나인 React.memo 를 제공합니다. 1. React.memo() 에 대한 간략한 소개 React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정합니다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트하게 됩니다. React.memo() 로 감싸져있는 내용을, 리액트는 결과를 먼저 memoizing 하게 됩니다. 다음 렌더전에, props 의 결과가 똑같다면 react 는 me..

자바스크립트 MAP - array 는 배열로 관리하기. / array 를 key 로 접근

자바스크립트를 공부하면 나오는 array 여기서 ES6 부터는 map 으로 데이터를 관리하여 주게 됩니다. 이런식으로 array 가 새롭게 생성되어있을 때 Array의 각 요소를 순회하며 callback 함수를 수행하는 것을 map 이라고 합니다 . array 의 핵심 기능 그러면 map 에 대해서 알아봅시다. map 은 한마디로 "맵핑" 해주는 개념이라고 생각이라고 하면 된다. 배열.map((요소, 인덱스, 배열) => { return 요소 }); 이런식으로 배열에 있는 요소들을 맵핑해주며 우리가 원하는 작업을 할 수 있다. 많은 사람들이 forEach 를 사용하는데 이것보다 좀더 빠르고 간편하게 쓸 수 있습니다. 사용법 ) 특히 JSX 코드 상이나 리액트에서 쓸때 array 의 인자별로 내부 내용을 ..

5강 Class

코어 자바스크립트 내용을 이해하며 정리하기! 자바스크립트 5-1. 스태틱 메쏘드 / 프로토타입의 메쏘드 프로토타입 메소드와 스태틱 메소드의 차이를 인스턴스에 상속되는지(참조되는지) 에 따라 달라질 수 있다. 프로토타입 : instance 에서 바로 호출 가능 스태틱 메소드 : instance 에서 바로 호출 불가능 이라는 극명한 차이가 있다. 아래의 예시를 살펴보자. (출처 : 코어 자바스크립트 / 정재남) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var Rectangle = function (width, height) { this.width = width; this.height = height; } Rectangle.prototype.g..