Web Front-end
[React/JS] 리왜씀 (React 왜 쓰나요)
https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React 공식문서를 참고하면 아래와 같이 안내되어 있습니다. React는 상호작용이 많은 UI를 만들 때, 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하고, React는 데이터가 변경됨에 따라, 적절한 컴포넌트만 효율적으로 갱신하고 렌더링하게 됩니다.(이뭔솔?) 처음 본다면, 어떤 어려움이 있는지 모르겠습니다. 3줄요약으로 지르고 가겠습니다. React를 만든 Facebook은 데이터를 실시간으로 화면에 반영을 해야했다. Facebook은..
[JS/함수형] 추상화 연습해보기
Reduce, Filter ,Go, Pipe ,Map을 활용해서, 추상화를 단계별로 해보자. Redcue ,Filter,Map , Go, pipe, curry는 모두 정의되어있으며, 기본적으로 주어져 있고, Filter,Reduce,Map은 curry가 적용되어 있다고 하자. 제품 데이터 const products = [ {name: '반팔티', price: 15000, quantity: 1}, {name: '긴팔티', price: 20000, quantity: 2}, {name: '핸드폰케이스', price: 15000, quantity: 3}, {name: '후드티', price: 30000, quantity: 4}, {name: '바지', price: 25000, quantity: 5} ]; Pro..
[JS/함수형] Currying
Currying - Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. HAskell , Scala와 같이 전통적인 함수형 언어에는 기본내장이 되어있지만, JS에서는 커링이 내장되어 있지 않습니다. 왜 필요한가요 ? 함수안에 함수를 쓰는건 "함수형 프로그래밍"에서는 아주 흔한 광경이고, 그렇게 쓰다보면, 함수(함수(함수(함수(함수.....)와 같은 무한액자식 구성이 될 수 있고, 이렇게 되면, 가독성과 에러잡는데 엄청난 문제가 생기게 된다. 그리고, 사용하기도 어려워진다. Code(구현) Currying의 간단한 예제부터 보자. Currying은 함수가 재귀적으로(Nested)한 형태를 띄고 ..
[JS/함수형] Go, Pipe
함수형 프로그래밍에서는 "Code"자체를 값으로 다룰 수 있게 된다. 하지만, 코드를 "값"으로 표현하게 된다면, 중첩에, 중첩에 중첩이 되는 재귀적인 관계를 형성하게 되고, 나중에 사용하기에 번거롭고, 가독성도 매우 떨어진다. 따라서, 이 문제를 해결을 해야한다. Go와 Pipe,Currying은 이러한 상황에서 제안된 아이디어들이다! Go Go는 함수가 연속적으로 call 되는 구조를 띄고 있을 때, "Go"라는 하나의 함수로 축약하여, 나열하는 형식으로 구현하고, 즉시 그 값을 평가하자. 장점 함수를 나열한다는 건, 가독성을 높일 수 있다 . 값이 즉시 평가되기 때문에, 결과값을 바로 볼 수 있다. 축약이라는 말에서 알 수 있듯이, Go 함수는 내부적으로 Reduce를 이용하게 된다. 하지만, Go..
[JS/함수형] Reduce
Reduce Reduce는 여러가지 값을 하나로 축약하는 논리를 펼칠 때 , 사용하게 되는 함수이다. Reduce를 설명할 때, 가장 많이 들게되는 덧셈의 예시이다! 이 예시로 리듀스에 대한 감을 잡고, 일단 다음단계로 활용해보자. 1~5까지 더하는 함수를 짠다고 하면, 이제 for ~of문도 배웠으니, 아래와 같이 짤 수 있다. // 1~5까지 더하는 함수 oneToFive=[1,2,3,4,5] let total=0 for (const n of oneToFive){ total+=n; } console.log(total); 누적합을 어떻게, 함수형스럽게 구현을 해볼까? 더하는 과정은 따로 함수로 뺀다. 누산과정은 재귀적으로 구현이 된다. reduce(add,[1,2,3,4,5])와 같이 , default..
[JS/함수형] Map,Filter 구현
Iterable Protocol을 따르는 값들은, Map,Filter,Reduce와 함께 쓰면 아주 실용적으로 쓸 수 있게 됩니다. (순회를 간단하고, 직관적으로 할 수 있고, 필요한 값들을 뽑아 낼 수 있습니다) Map Map은 JSON과 같은 "데이터 파일"이 입력이 들어올 때,하나의 함수로 내가 원하는 값을 뽑아낼 수 있도록,하는 장점이 있습니다. 예시를 보면서, Map에 대한 느낌을 받아보시죠! 아래와 같은 학생정보가 있다고 합시다 const students=[ {name:"Kim",major:"ComputerScience"}, {name:"Lee",major:"Business"}, {name:"Jay",major:"Music"}, {name:"Dode",major:"Rap"}, {name:"Yo..
[JS/함수형] 제너레이터와 이터레이터
Generator - 제너레이터 : Well-formed Iterator를 반환해주는 함수, Iterator를 생성하는 함수. 제너레이터 또한, 이터레이터이자 이터러블이다. - 제너레이터는, 특정 조건/로직을 추가할 수 있고, Generator 자체도 , 이터레이터이자 이터러블이기 때문에, for ..of문의 대상이 될 수 있다. fucntion *gen() { //Genetor 내부에서, 순회할 문장(context)를 만들어낸다. yield 1; if (false) yield 2; // 2제외 yield 3; yield 4; } // JS에서는 Gen를 이용하면 어떠한 값이든, 어떠한 상태든 순회할 수 있는 형태로 만들 수 있게 된다. let iter = gen(); console.log(iter[Sy..
[JS/함수형] Iterable Custom/전개연산자
이번에는 , 직접 Iterable이 어떻게 정의되어 지는지, 사용자 정의 Iterable을 만들어 볼거다. 10~0까지 반복을 하는 간단한 Iterable을 만들어 볼겁니다. * 잠깐, Iterable /Iterator ? Iterable : Iterator를 리턴하면서, [Symobol.iterator]()를 가진 값 Iterator : {value,done} 객체를 리턴하는 next 메소드를 가진 값 See the Pen JS Custom Iterator_practice1 by Doge (@DogeIsFree) on CodePen. 하지만, 이 Iterable은 완벽하지 못하다. 반복의 횟수를 통제할 수 없고, iterator를 1번,2번 ~~N번 진행하고, 그 다음부터 진행을 하고 싶은데, 그렇게 ..