Basic callbag ํฉํ ๋ฆฌ ๋ฐ ์ฐ์ฐ์ ์์ํ๊ธฐ. Callbag์ ์คํ ์ด์ง๋ง, callbag-basics์ ์ฌ์ฉํ ์ ์๋ ์ค์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
Highlights:
- Reactive ์คํธ๋ฆผ ํ๋ก๊ทธ๋๋ฐ ์ง์
- Iterable ํ๋ก๊ทธ๋๋ฐ ์ง์ (also!)
- ๋์ผํ operator๊ฐ ์์ ๋ ๊ฐ์ง์ ๋ชจ๋ ์ ์ฉ๋ฉ๋๋ค.
- ์๋ค! ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํฌ๊ธฐ๋ 7kB์ ๋ถ๊ณผํฉ๋๋ค!
- ๋น ๋ฅด๋ค! xstream ๋ฐ RxJS๋ณด๋ค ๋น ๋ฆ ๋๋ค
- ํ์ฅ์ฑ: ์ฝ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ต๋๋ค. callbag์ ๋ชจ๋ ์ ํธ๋ฆฌํฐ ํจ์์ ๋๋ค.
Observable๊ณผ (๋น๋๊ธฐ) Iterable ๋ฅผ ๊ฐ์ด ์ฌ์ฉํ๋ ์์์ ํด๋ณด์ธ์. ๊ทธ๊ฒ ๋ฐ๋ก callbag ์ ๋๋ค. ๋ํ, callbag spec์ ๋ฐ๋ฅด๋ ๋ช ๊ฐ์ง ๊ฐ๋จํ ์ฝ๋ฐฑ(callbacks)์ผ๋ก ๊ตฌํ๋๊ธฐ ๋๋ฌธ์ ์ฝ๋๊ฐ ๊ฐ๋ณ์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ๋ก callbag์ ์๊ณ ๋น ๋ฆ ๋๋ค.
npm install callbag-basics
์ฐ์ฐ์ ๋ฐ ํฉํ ๋ฆฌ๋ฅผ Import ํ๋ ๋ฐฉ๋ฒ:
const {forEach, fromIter, map, filter, pipe} = require('callbag-basics');์์์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๋ฐ์ XY ์ขํ๋ฅผ ์ถ๋ ฅ ํฉ๋๋ค:
const {forEach, fromEvent, map, filter, pipe} = require('callbag-basics');
pipe(
fromEvent(document, 'click'),
filter(ev => ev.target.tagName === 'BUTTON'),
map(ev => ({x: ev.clientX, y: ev.clientY})),
forEach(coords => console.log(coords))
);
// {x: 110, y: 581}
// {x: 295, y: 1128}
// ...์์ง์ด๋ ์๊ณ์ ์ด์ฌ์ด ๊ฐ๋ฆฌํค๋ ์ฒ์ 5๊ฐ์ ํ์๋ฅผ ์ถ๋ ฅ ํฉ๋๋ค.
const {forEach, interval, map, filter, take, pipe} = require('callbag-basics');
pipe(
interval(1000),
map(x => x + 1),
filter(x => x % 2),
take(5),
forEach(x => console.log(x))
);
// 1
// 3
// 5
// 7
// 9ํน์ ๋ฒ์์์ ์ซ์ 5๊ฐ ์ ํํ๊ณ 4๋ก ๋๋ ๋ค์, ์ถ๋ ฅ ํฉ๋๋ค.
const {forEach, fromIter, take, map, pipe} = require('callbag-basics');
function* range(from, to) {
let i = from;
while (i <= to) {
yield i;
i++;
}
}
pipe(
fromIter(range(40, 99)), // 40, 41, 42, 43, 44, 45, 46, ...
take(5), // 40, 41, 42, 43, 44
map(x => x / 4), // 10, 10.25, 10.5, 10.75, 11
forEach(x => console.log(x))
);
// 10
// 10.25
// 10.5
// 10.75
// 11callbag์ ํฌํจ๋ ํจ์ ๋ชฉ๋ก์ ๋๋ค.
- source: ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ callbag
- sink: ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ callbag
- puller sink: ๋ฐ์ดํฐ๋ฅผ ์์ค์ ๋ฅ๋์ ์ผ๋ก ์์ฒญํ๋ ๋ฐ๋ callbag
- pullable source: ์์ฒญ ์์ ์์๋ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ์์ค
- listener sink: ์์ค๋ก๋ถํฐ ์๋์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ์ฑํฌ
- listenable source: ์์ฒญ์ ๋ํ ๋๊ธฐ ์์ด, ์ฑํฌ์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋ ์์ค
- operator: ๋ค๋ฅธ callbag์ ๊ธฐ์ด๋ก ํ๋ callbag
Callbag์ ์ฒ ํ: ์ค์ค๋ก ๋ง๋์ธ์. :) pr์ ๋ณด๋ผ ์๋ ์์ง๋ง, ๊ทธ๋ฌ๋ ์ ์ฅ์ ์์ ์์ ์๋ฝ์ ๊ธฐ๋ํ์ง ๋ง์ธ์. ํ๋ก์ ํธ๋ฅผ ํฌํฌํ๊ณ ์ํ๋๋๋ก ์ฌ์ฉ์ ์ ์ํ๊ณ ํฌํฌ๋ฅผ npm์ ๊ฒ์ํ์ญ์์ค. ์ฝ๋ฐฑ ์คํ์ ๋ฐ๋ฅด๋ ํ ๋ชจ๋ ๊ฒ์ด ์ํธ ์ด์ฉ ๋ ๊ฒ์ ๋๋ค! :)