marpple / fxjs Goto Github PK
View Code? Open in Web Editor NEWFunctional Extensions Library for JavaScript
License: MIT License
Functional Extensions Library for JavaScript
License: MIT License
안녕하세요 ~
인프런의 함수형 프로그래밍 강의를 통해 해당 라이브러리를 알게 되었습니다.
이러한 형태로 현재 현업에서 진행하는 프로젝트에 적용하고 싶은데,
angular를 사용하고 있어 Typescript를 사용 할 수 밖에 없는 상황에 있습니다.
타입스크립트 안에서도 라이브러리를 사용 할 수 있고, 주로 사용되는 api가 몇개 안되지만
index.d.ts로 정의된 인터페이스가 없어서 직접 문서를 하나 하나 찾아가면서 쓸 수밖에
없는거 같습니다...
그래서 혹시 Typescript에서 쉽게 사용 할 수 있게,
index.d.ts로 정의된 타입스크립트 인터페이스를 제공 할 계획이 있으신지 문의드립니다 ~
(현재.. 주요 API는 제가 만들고 있지만...양이 너무 많아서...시간이 넘 오래 걸릴거같습니다 ㅠ)
Original reduce 와 fxjs2 의 reduce 사용 결과가 다른걸 발견하여 해당 사항에 대해 이슈 남깁니다. (v0.2.7)
감사합니다.
console.log(
go([ 1, 2, 3, 4, 5 ],
arr => arr.reduce((obj, userId) => Object.assign({}, obj, { [ userId ]: true }), {})
),
) // { '1': true, '2': true, '3': true, '4': true, '5': true }
console.log(
go([ 1, 2, 3, 4, 5 ],
reduce((obj, userId) => Object.assign({}, obj, { [ userId ]: true }), {}),
),
)
/XXXXX/node_modules/fxjs2/call.js:2
return f(a);
^
TypeError: f is not a function
at call (/XXXXX/node_modules/fxjs2/call.js:2:10)
at call2 (/XXXXX/node_modules/fxjs2/reduce.js:9:5)
at recur (/XXXXX/node_modules/fxjs2/reduce.js:19:13)
at go1 (/XXXXX/node_modules/fxjs2/go1.js:2:45)
at reduce (/XXXXX/node_modules/fxjs2/reduce.js:16:10)
at reduce (/XXXXX/node_modules/fxjs2/reduce.js:13:37)
at go (/XXXXX/node_modules/fxjs2/go.js:5:10)
at Object.<anonymous> (/XXXXX/makeHash.js:16:3)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
FxJS의 map 같은 함수에서 index를 두번째 인자로 넘겨주는 부분이 없는데요. 이 부분은 커링이라던지 인자가 여러개 넘어가서 발생하는 문제를 없애려고 그러신건가요?! index 를 쓰고 싶은 경우에는 혹시 어떻게 처리를 하나요?
(페메로 주신 질문입니다.)
아래와 같은 코드가 있습니다.
const { go, map, extend, sortByDesc, range, slice } = require('fxjs')
const L = require('fxjs/Lazy'
const plain = go(
range(10000),
map((a) => extend(a, { age: a + 1 })),
sortByDesc(({ age }) => age),
)
console.log(slice(0, 50, plain))
위 코드에서 slice
도 go
함수 안에 넣어서 다음과 같이 표현하고 싶은데요,
const plain = go(
range(10000),
map((a) => extend(a, { age: a + 1 })),
sortByDesc(({ age }) => age),
slice(0, 50)
)
다음과 같은 에러 메시지를 만납니다.
TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
at _createForOfIteratorHelper (/Users/jun.choi/dev/fx/node_modules/fxjs/cjs/Lazy/sliceL.js:29:476)
at sliceL$ (/Users/jun.choi/dev/fx/node_modules/fxjs/cjs/Lazy/sliceL.js:43:23)
제가 예상하기로는 sliceL 을 감싸고 있는 curry 함수가 인자 하나만 저장(?) 할 수 있도록 설계 되어 있는 것 같은데,
slice 함수의 경우는 위와 같이 파이프 라인으로 표현 할 수 없는 것 인가요?
파샬에서 fxjs 로 넘어오려고 작업을 하고 있는데요
이전에는 중간에 _.stop 으로 파이프를 끝내거나 에러 핸들링을 _.catch 을 써서 파이프 내부에서 에러핸들링을 했었는데 fxjs 에는 관련된 기능을 지원하는 함수가 보이지 않는 것 같네요!
제가 파이프 사용에 대해서 잘 몰라서 그런 것일 수 있는데, _.stop 이 either 모나드의 방식과 비슷하다고 생각하고 있었는데 _.stop 이 이번에는 없어져서 그 이유와 이를 대체할 수 있는 펑셔널한 방법이 궁금합니다!
예전에 _.stop 을 썼을때 로직이 함수 중간에 분기에 따라서 리턴을 해주는 부분이 많아서 였었는데요
// no pipe
function takeC () {
const a = takeA()
if (a == 1) return 'no a'
const b = takeB(a)
if (b == 2) return 'no b'
const c = takeC(b)
if (c % 2) return 'no c'
}
// with pipe
function takeC() {
return go(
takeA, stopIf(isEqual(1)),
takeB, stopIf(isEqual(2)),
takeC,
ifElse(c => c % 2, () => 'no c', id)
)
}
1번처럼 하면 변수 선언도 많아지고 if - return 도 많아지면서 함수형이 맞나 싶더라구요.
그래서 사용하던 방식이 아래처럼 파이프를 타는 거였는데 사실 좋은 방법인지는 모르겠습니다.
그렇다고 에러를 던지는 것도 ... 좀 그렇고 해서... fxjs 에서 권장하는 함수형적인 방법이 궁금합니다
간혹 순회할 배열의 각 요소에 자체적인 인덱스 정보가 없는 경우가 있습니다.
이런 상황에서 각 요소의 index를 받고 싶은데, 아직 API 차원에서 제공하지는 않는 것 같더라구여.
그래서 다음과 같이 우회적으로 구현을 했습니다.
let index = 0;
go(
[{name: 'foo'}, {name: 'bar'}, {name: 'baz'}, ...],
map((item) => {
item.index = index;
i++;
return item;
}),
...
)
위 예제에서 map의 인자로 전달하는 함수가 index도 전달받을 수 있게 할 계획이 있으신가요?
아니라면 더 나은 방법으로 구현할 수 있나요?
안녕하세요 자바스크립트로 하는 함수형 프로그래밍 공부를 하면서
FxJS를 잘 사용하고 있습니다!
다름이 아니라 Typescript 지원 (d.ts 파일) 및 fx.js파일을 ts로 수정하는 것에 대해
어떻게 생각하시는 지 의견을 묻고 싶습니다.
물론 대부분의 함수가 Generics로 타입을 넘겨줘야 할 거 같지만,
정적 타입핑과 함수형 프로그래밍을 같이 사용할 수 있다면
사용자 측면에서나 디버깅도 더더욱 편해질 거 같다는 생각이 듭니다.
현재 포크해서 작업 중인데 의견을 먼저 여쭤보고 싶습니다.
감사합니다!
현재 RN 프로젝트에서 fxjs2 패키지를 이용중입니다. 개발용으로 앱을 띄우는 과정에서는 별다른 문제가 없지만, APK를 만드는 과정에서 자꾸 모듈 에러가 발생합니다.
// 프로젝트 번들링 명령어
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
// 디버그 APK 생성 명령어
./gradlew assembleDebug
// 릴리즈 APK 생성 명령어
react-native run-android --variant=release
error Unable to resolve module `../.internal/baseApplyEach.js` from `node_modules/fxjs2/Strict/applyEach.js`:
None of these files exist:
* node_modules/fxjs2/.internal/baseApplyEach.js(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
* node_modules/fxjs2/.internal/baseApplyEach.js/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg). Run CLI with --verbose flag for more details.
Error: Unable to resolve module `../.internal/baseApplyEach.js` from `node_modules/fxjs2/Strict/applyEach.js`:
혹시나 싶어 다음 명령어로 기본 프로젝트를 생성해서 fxjs2 패키지 설치 후 APK를 만들어 봤는데, 위와 같은 에러가 발생했습니다.
npx react-native init AwesomeProject
node_modules/fxjs2 내부를 까보면 실제로 파일이 없는 것도 아니라서 되게 당황스럽네요..
인프런 강의 시청이후 테스트 코드 짜서 예제 풀어보는 식으로 해보고있습니다
하지만 처리된 결과가 함수형 프로그래밍 방식으로 제대로 처리된것인지 의문이들어서
코드 리펙토링 좀 부탁드리려 합니다
const log = console.log;
const {L}= ;
log()
// 데이터 리스트 Promise 로 구성된 실전같은 Test data
const list = [
Promise.resolve({id: 1, name : "강성재", age : 30, gender : '남자', height: 180, status : "사용",
family : [
Promise.resolve({id: 2, name : "강성화", age : 37, gender : '여자', height: 145, status : "미사용"}),
Promise.resolve({id: 2, name : "강성진", age : 35, gender : '남자', height: 185, status : "사용"}),
]}),
Promise.resolve({id: 2, name : "김나은", age : 31, gender : '여자', height: 145, status : "미사용",
family : [
Promise.resolve({id: 2, name : "김나우", age : 18, gender : '남자', height: 195, status : "미사용"}),
Promise.resolve({id: 2, name : "김나나", age : 22, gender : '여자', height: 175, status : "사용"}),
Promise.resolve({id: 2, name : "김나자", age : 25, gender : '여자', height: 165, status : "미사용"}),
]}),
Promise.resolve({id: 2, name : "강진우", age : 31, gender : '여자', height: 145, status : "미사용",
family : [
Promise.resolve({id: 2, name : "강상호", age : 45, gender : '남자', height: 195, status : "미사용"}),
Promise.resolve({id: 2, name : "강상화", age : 25, gender : '여자', height: 175, status : "사용"}),
Promise.resolve({id: 2, name : "강상주", age : 23, gender : '여자', height: 165, status : "미사용"}),
]}),
];
// 12. 성이 강씨인 유저, 가족 검색
async function f(iter, obj){
const myRe = obj.myRe;
// 유저 필터
const filterUser = _.filter((user) => myRe.test(user[obj.key]));
// 유저 리스트
const userList = await filterUser(iter);
// 가족리스트
const familyList = await _.go(
iter,
L.map((u) => u.family),
_.deepFlat,
filterUser,
);
// 유저와 가족의 배열을 합친다
return [...await familyList, ...await userList];
}
// 비동기 순차실행
(async ()=>{
let arr = await f(list, {
myRe : /^강/,
key : "name"
});
log(arr);
})();
debounce - this is undefined
I like fxjs more than lodash
in my vue js project, debounce-this issue is occured
import _ from 'lodash';
import {debounce} from 'fxjs2';
debounceInput : debounce(function(e){
console.log(this) // undefined
if(vm.password !== e.target.value){
vm.isSamePW = true;
}else vm.isSamePW = false;
}, 500).bind(this),
debounceInput : _.debounce(function(e){
console.log(this) // Vue component
if(vm.password !== e.target.value){
vm.isSamePW = true;
}else vm.isSamePW = false;
},500),
I think this is bug.
These parts are missing from the API and there is a lack of explanation in common.
이번에 프로젝트에서 내부적으로 쓰는 함수 파일을 패키징해서 npm 모듈로 따로 관리를 하게 되었는데요.
원래 fxjs 를 활용해서 stopIf, goIf 같은거를 만들어서 쓰고 있었는데, 패키징 하고 나서 stop 이 작동을 안하길래 살펴보니까 reduceS 에서 Stop 인스턴스를 제대로 판단을 못해주고 있는 것으로 확인했습니다.
제 추측으로는 npm 모듈화를 하면서 원래 프로젝트에서 쓰는 fxjs 디펜던시랑 이번에 모듈화한 함수 파일의 fxjs 디펜던시랑 다르게 인식을 해서 Stop 의 instanceof 가 제대로 작동하지 않은게 아닌가 생각하고 있습니다.
이 문제는 심볼도 동일할 것 같은데, stop 처럼 인스턴스를 다뤄서 fxjs 에 의존적인 부분은 따로 패키징을 하지 않는 방향으로 진행하는 것이 해결 방법일까요?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.