44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
fxjs 라이브러리 takeL 관련하여 질문드립니다.
안녕하세요기본편 부터 응용편 까지 천천히 학습하고 있습니다.응용편 부터는 라이브러리를 가져와서 강의를 진행하시는데 강의 수강 중 궁금한 사항이 있어 질문드립니다. github에 올려주신 오픈소스를 참조하는데 takeL 부분이 이해가 되지 않아 문의드립니다. L.take = curry(function* (l, iter) { let prev = null; iter = iter[Symbol.iterator](); for (const a of iter) { if (a instanceof Promise) { yield (prev = a.then((a) => (--l > -1 ? a : Promise.reject(nop)))); prev = prev.catch(noop); } else { yield (--l, a); } if (!l) break; } }); L.take를 이렇게 표현하면 앞선 Promise가 resolve 되길 기다리는 Promise를 그대로 이어가면서 전달 가능한데 yield (prev = (prev || Promise.resolve()) .then((_) => a) .then((a) => (--l > -1 ? a : Promise.reject(nop)))); 이렇게 표현하신 이유가 어떤이유인지 알고싶습니다. 또 제가 작성한 수정한 부분에 문제가 있다면 알려주시면 감사하겠습니다. 또 궁금한 내용이 오픈소스에 for of 아래 a.catch(noop); Promise를 catch 하는 코드가 추가되어 있는데 이 부분 역시도 어떤의도로 구현한 것인지 궁금합니다. 수업내용에서는 비동기/동시성을 통해 한번에 Promise 콜백이 병렬적으로 평가되면서 배열에 담기는 시점에 콜스택에서 에러가 출력되지 않기 위해 사용하는 트릭으로 알고있는데요, L.take 에서 a.catch가 실행되는 시점에는 Promise가 reject로 풀려서 전달될 수 없을것 같은데 이 부분도 설명부탁드립니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
[ 비동기 상황에서의 Lazy, Strict 기법이 혼합된 평가 ] 에 대한 이해
안녕하세요 11:45초 경의 payment를 평가하는 과정에서 발행하는 과정을 제가 이해한대로 정리해 보았는데 틀린 부분이 있는지 궁금합니다.go() 를 통해 함수들을 연달아 수행하게 한다.그 내부에는 L.range, L.map, L.takeUntil, _.flat이 들어가 있다.L.range, L.map, L.takeUntil은 모두 Lazy 함수이므로, 제너레이터를 생성한다. 즉, next()로 값을 요구하기 전까지는 리턴하는 값이 없다._.flat()은 Lazy 함수가 아닌 일반 함수이다. 따라서 리턴값을 내 놓기 위해 리턴에 해당하는 배열을 모두 채워야 한다.flat이 값을 채우기 위해 takeUntil에 next()를 요청한다.takeUntil은 flat에서 주기 위한 값을 만들기 위해 map 에 next()를 요청함.map도 마찬가지로 range에 next 요청range는 next()를 통해 1을 반환한다.map은 받은 1을 가지고 Impt.getPayments를 실행시키고, 반환되는 promise를 takeUntil에 넘김takeUntil은 받은 프로미스를 해결되면 조건식에 넣어서 판단할 것이라는 새로운 프로미스를 생성하여 리턴값으로 반환함.flat은 takeUntil로 부터 받은 프로미스가 해결되면 그 값을 자신의 결과 배열에 넣을 것이라는 프로미스를 생성하여 반환함.(* 이때 console.log를 찍게되면, 여기서 반환되는 프로미스가 출력되는 것 )잠시후에 프로미스 체인에 연결된 모든 프로미스가 resolve 되고, resolve 된 값은 flat의 결과 배열에 넣어짐. 끝나지 않은 상태이므로 flat은 takeUntil에 또 값을 요청함 ( flat 에서 해결된 프로미스는 (끝나지 않았을 경우) 다시 프로미스를 반환함. 즉, flat이 어떤 조건을 만족해서 더 받아오는 것이 끝나야 비로소 promise가 완전히 resolve 되고, 비로소 res를 리턴할 수 있음 - (* flat~takeAll~take 이므로 FxJS/Strict/take.js 코드 참조 )6~12 번의 반복flat이 takeUntil에 값을 요청했는데, takeUntil이 조건문을 만족하지 못하는 값을 받은적이 있어 false로 마감되었음. 따라서 next()를 해도 반환되지 못하고, 상태는 done임.flat은 더이상 받을 값이 없으므로, 최종 프로미스가 resolve 되고 그 동안 받아서 정리해온 배열을 리턴값으로 반환함
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
input값이 이터러블 함에도 range를 쓴 이유가 궁금합니다.
_.go( L.range(Infinity), L.map(i => track[i]), L.map(({cars}) => cars), L.takeWhile(({cars:{length:l}}) => l==4), _.each(console.log));강의에서 보여주신 위 코드를 보면, range를 통해서 이터러블한 순서를 만들어, track 배열의 요소를 순회하고 있습니다.하지만 track 자체도 list 이므로 이터러블하기에, 위 방법처럼 range를 써야할 필요를 잘 모르겠습니다. 혹시 의도하신 바가 있을까요?_.go( track, L.map(({cars}) => cars), L.takeWhile(({cars:{length:l}}) => l==4), _.each(console.log));
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
질문있습니다!
안녕하세요. 질문 있어서 글 올립니다.만약 복잡한 reduce 함수 하나 대신 3개의 map과 간단한 reduce 함수로 분리한다면 전자는 반복을 한번만 하면 되고 후자는 반복을 총 4번 해야한다는 계산이 서는데 왜 성능상 차이가 없는 것인지 궁금합니다.스스로 찾아보려고 햇는데 실력이 부족한지 관련 내용을 찾지 못해 질문드립니다ㅠㅠ
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
DB Insert관련
강의들으면서 공부할겸 게시판을 만들고 있는데예를 들어 이런 식의 html이 있고<input id='title'/><textarea id='content'/><button onclick="onSave">save</button> 실제 코드는 다른데 대략적으로 이런식의 자바스크립트 코드가 있다고 치면async onSave(event) { const param = { title: document.getelementByID('title').value, content: document.getelementByID('content').value } await _.go( [param], _.each(v => { //validation 함수 if (!v.title) {alert('title을입력하세요'); throw new Error(message);} } ), v=>insertData({data:v}), //db insert method _.tap(v=>{ alert('데이터저장성공'); location.href='list.html'; //게시글 작성후 list페이지로 redirect }) ) }이렇게 go에서 validation이나 redirect함수를 넣는것과아래처럼 따로 빼네는것async onSave(event) { const param = { title: document.getelementByID('title').value, content: document.getelementByID('content').value } if(!param.title) { alert('title을입력하세요'); return ; } await _.go( [param], v=>insertData({data:v}), _.tap(v=>{ alert('데이터저장성공') }) ) location.href='list.html'; }둘중 어떤것을 더 선호하고 효율적인지 알고싶습니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
강의에 대한 제언
좋은 강의 정말로 감사합니다. 당연히 아시겠지만, 모든 엘리먼트에 이벤트 리스너를 다는 것 보다, 부모에 이벤트 핸들링을 위임하는 방식이 코드 작성량도 적고 메모리 사용량도 적은것으로 알고 있습니다. 추후 강의 개편을 하실 때, 이 내용을 강의에 넣어주실 수 있을까요?
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
DOM 조작 관련 질문입니다.
$.el 함수를 구현하실 때, 실제 DOM을 만들어서(비록 렌더링 되지는 않았지만) wrapper를 구현하셨는데, document.createDocumentFragment 로 하지 않으신 이유가 있나요?
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
L.map, L.filter
강의 깃허브에서 fx.js를 그대로 복붙하고 나서도 L이 정의되지 않았다고 나오는데 따로 해줘야 되는게 있나요??
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
indexBy 함수에 대한질문입니다.
안녕하세요 정말 좋은 강의 감사합니다.IndexBy 함수에 대한 질문이 있어서 글 작성합니다.indexBy에 첫번째 인자로 function을 넘겨주시는데 indexing하고 싶은 키 값 자체 하나만 string으로 받는것이 indexBy 함수를 외부에서 사용하는 개발자 입장에서 선언적으로 사용할 수 있지 않을까요?예를들면 _.indexBy("id", users) 라고 사용하는것이 더 좋을 것 같은데함수를 넘겨주는 이유가 있으신가요?! 다시 한번 좋은 강의 감사합니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
해당 강의를 듣고 나면
안녕하세요. 요즘 리액트 컴포넌트를 만들 때 관심사 분리를 더욱 잘하기 위해 노력 중인 주니어 개발자입니다.컴포넌트 설계 시 도메인 종속적이지 않도록 유의하고 있으며 도메인 특화된 컴포넌트를 위해서 비종속적 컴포넌트에 합성해서 만들어 사용하려고 노력 중입니다.이 얘기를 왜 드렸나면 리액트에서 컴포넌트는 결국 함수이며 위에 언급된 고민들은 결국 함수를 합성하는 것과 다르지 않다고 생각이 들더군요. 그 와중에 이 강의가 눈에 들어왔습니다. 질문1. 해당 강의는 위의 고민과 같은 결의 문제를 해결하는데 도움이 되는 강의일까요?질문2. (위의 글과 상관없이) fxjs, fxts 라이브러리를 사용하지 않으면 해당 강의에서 다루는 내용을 실무에서 응용하는 게 힘들까요?(잠깐 수강해봤을 땐 문제를 정의하고 그 문제를 fxjs 속 특정 함수를 통해 어떻게 해결하는 지 보여주는 것의 반복이었던 거 같은데 그래서 여쭤봅니다)
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
내용없음
내용없음
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
함수 추출에 대한 고민
안녕하세요 선생님 질문이 있습니다. 재사용성이 낮은 함수도 함수화를 시킬 수 있다면 함수로 묶고,합성을 해서 사용하는 게 더 나은 판단인가요개발을 하다 보면 어느 정도 수준까지 계층을 만들어야 할지 고민이 됩니다. 예를 들어 두 개의 배열 인자를 받고 새로운 배열로 평가 후 값을 누적한다는 함수가 있다고 할 때,const compare = (a, b, f) =>_.go(_.range(a.length === b.length ? a.length : 0), _.map(f(a, b)), _.reduce(_.add)); -> 사용예: compare([1, 2, 3], [4, 5, 6], (a, b) => i => a[i] + b[i]); // 출력값: 21 재사용할 가능성이 낮다고 판단이 되는 함수에도 특정 부분을 함수로 추출하여 작업하는 방식으로 진행한다면const accrue = (a, b, f) => _.pipe(_.map(f(a, b)), _.reduce(_.add));const compare = (a, b, f) => _.go(_.range(a.length === b.length ? a.length : 0), accrue(a, b, f)); -> 사용예: let acc = accrue([1, 2, 3], [4, 5, 6], (a, b) => i => a[i] + b[i]); acc([0,1,2]); // 출력값: 21 (위의 함수는 충분히 재사용성이 높습니다 그냥 임시로 예를 들었습니다 ^^) 계속해서 함수로 추출하고 추출해서 작업하는 것이 장기적으로 봤을 때 좋은 결과를 가져갈까요?물론 어느 정도 재사용이 가능한 부분은 함수로 추출하는 것이 맞는다고 판단이 되지만,충분히 익명 함수를 사용하여 작업을 해도 되는 상황을모든 경우를 함수로 추출하는 것이 과연 올바를까 고민이 되어 질문드립니다.
- 해결됨함수형 프로그래밍과 JavaScript ES6+ 응용편
뷰포트에 보이는 엘리먼트만 이미지 로드하고 싶을 때
_.go( Images.fetch(), Images.tepl, $.el, $.append($.qs('body')), _.tap( $.findAll('img'), L.map(img => { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { new Promise((resolve, reject) => { img.onload = () => resolve(img) img.src = img.getAttribute('lazy-src') img.onerror = () => reject() }).catch(_ => { img.src = 'https://images.chosun.com/resizer/u9nJRxs0BbtjygJ4HzKukecXnOk=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/UVBJZL3RXAB36BDSHVM3MW2WNY.jpg' }) $.addClass('fade-in', img) } }) }) return () => observer.observe(img) }), C.takeAllWithLimit(8), _.each(_ => _) ), $.findAll('.remove'), $.on('click', async ({currentTarget}) => { await Ui.confirm('정말 삭제하시겠습니까?') && _.go( currentTarget, $.closest('.image'), $.remove ) } ) )뷰 포트에 보이는 이미지 엘리먼트만 이미지를 로드해주고 싶은데 이렇게 코드를 작성해도 괜찮을까요? 더 좋은 방법이 있다면 알고 싶습니다!
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
기존에 반복문이 1개 돌던거를 이렇게하면 2번 도는데...
기존에 반복문이 1개 돌던거를 이렇게하면 2번 도는데... 성능적으로 오히려 떨어지는거 아닌가요
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
array in object... 는 어떤 식으로 재귀가 가능할까요..?
안녕하세요. 강의 덕분에 함수형 프로그래밍이 너무 재밌는 사람입니다..! 감사합니다! 최근에 fxJS 를 통해서 뭔가 만들어보자 라고 생각해서 Hacker News API 를 이용해서 여러함수들을 실행해보고있는데요! 밑의 스크린샷을 보면 객체안에 comments 배열, 또 객체 안에 comments 배열 ... 로 결국엔 하나의 HTML 표현하려고 합니다.뭔가 deppflatten 과 재귀를 사용하면 될것같다! 하고 여러 시도를 해봤는데, 도무지 좋은 정답이 생각이 안나네요..! 이와 같은 문제에 있어서 어떤 느낌으로 해결할 수있을까요??!
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
queryToObject 질문드립니다.
const queryToString = _.pipe( split("&"), _.map(split("=")), _.map(([k, v]) => ({ [k]: v })), function (a) { log(a); return a; }, _.reduce((a, b) => Object.assign(a, b)) ); log(queryToString("a=1&c=cc&d=dd")); 위와 같이 작성했을 때, 에서 아직 Object.assign하기 전인데 0: { a: '1' }이 안 나오는 이유가 궁금합니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
재귀는 어떻게 표현할 수 있을까요?
함수형으로 연습을 많이 하고 있는데 재귀는 어떻게 표현해야 하는지 잘 모르겠습니다.. 예를들면 const breadcrumb = () => { let path = ""; (function recur(file) { path = "-" + file.getTitle() + path; if (file.parent) recur(file.parent); })(file); path = path.slice(1); return path; }; 이런 코드가 있다고 하면 어떻게 함수형으로 작성할 수 있을까욤..?
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
모든 명령형 => 함수형 가능한가요?
명령형으로만 코드를 작성해와서 이런 방식으로 사고하는게 아직은 많이 미숙한것 같습니다. 명령형으로 작성할 수 있는 모든 코드를 함수형으로 동일하게 표현할 수 있나요?? 가르쳐주신데로 명령형은 상태를 정의하고 변화시키는 방식으로 사용하는데 함수형은 그렇지 않기 때문에 질문드립니다!
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
명령형 => 함수형 변환
const f1 = (str) => { let acc = ''; for (let i = 0; i < str.length; i++) { acc += str.slice(0, i + 1) + '\n'; } console.log(acc); }; f1("*****") 먼저 명령형으로 작성한다음 함수형으로 바꾸려하는데.. 변환이 잘 안되네요.. 위 코드는 어떻게 하면 함수형으로 바꿀 수 있을까요?
- 미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
이해한게 맞을까요?
each는 인자와 함수를 전달받는데 함수를 실행시켜 효과를 일으키되 원래 인자를 그대로 리턴해준다? 라고 이해하면 되나요?