2021λ
, κ°λ°κ΄λ ¨ λμλ₯Ό 3κΆμ μ½μ΄λ³΄μλ μκ°μ μ²μ μλΌλμμ ꡬ맀νκ²λ μ±
.
ν¨μν μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ° (μ μ μ μΈλ)
μ΄μ©λ€ λͺ¨λλμ λν΄μ λ€μ΄λ³΄κ² λ ν ν¨μν νλ‘κ·Έλλ°μ λν΄μ κΆκΈμ¦μ΄ μ겨μ ꡬ맀νκ² λμλ€.
μ¬μ€ λ΄κ° μ΄μ κΉμ§ μκ³ μμλ ν¨μν νλ‘κ·Έλλ° μ΄λΌκ³ νλ©΄ κ·Έμ currying μ‘°κΈ μ λμκΈ° λλ¬Έμ, κ·Έκ²μ΄ μ΄λ€κ²μ λ§νλμ§λ₯Ό μλκ²μ λͺ©νλ‘ μ±
μ μ½κΈ° μμνλ€.
/* λνμ μΈ currying example */
const letsSum = function (x: number) {
return function (y:number) {
return x + y;
}
};
console.log(letsSum(1)(3)); // 4
λλ΅μ μΈ μ± μ λ΄μ©
μ±
μ underscore.jsμ methodλ₯Ό νλνλ λΆμνκ³ κ΅¬νκΉμ§ ν΄λ³΄λ©΄μ λμ€μλ lodashμ μ μκ° λ§λ partial-js μ λν΄μ μ€λͺ
νλ€.
μ€λͺ
μ΄ μμ± μκ³ λ μ€ν μ½λ μ‘°κ° μ‘°κ°μ 첨λΆν΄λμ΄ μ€μ΅μ ν μ μλλ‘ νκΈ° λλ¬Έμ μ€μ λ‘ μ±
μ μ½κ³ , λͺ¨λ μ½λκΉμ§ μ³λ³΄λ©΄μ κ·Έ μ€ν κ²°κ³Όλ₯Ό console.log
μ μ°μ΄λ³΄λ κ³Όμ μ΄ μ±
μ μλ½(?)νλλ°μ λ§μ μκ°μ κ±Έλ¦¬κ² νλ€. μ€μ λ‘λ λ§μ μκ°μ΄ 걸리기λ νλ€.
html
, jquery
μ ν¨κ» dom
μ μ‘°μνλ μμ λ₯Ό ν¨μν νλ‘κ·Έλλ°μΌλ‘ μ§μ μ€μ΅νλλ‘ νλ λΆλΆμ΄ μλ€. (μ¬μ€ μ΄λΆλΆμ λμΆ© μ½κ³ λμ΄κ°λ€)
λλμ
μμμλ μ€λͺ
νλ―μ΄ currying μ‘°κΈ μ λμ μ§μμ κ°μ§κ³ μλ λ΄κ° μ΄λ₯Ό μ΄ν΄νκΈ° μ²μμλ μ΄λ €μ μ§λ§, μ±
μμ κΌΌκΌΌν μ€λͺ
μ ν΄μ£Όκ³ λ 첨λΆλ μ½λλ μ³λ³΄λ©΄μ μ±
μ μ½μ΄λκ°λ©΄μ μ΄λμ λλ μ΄ν΄κ° λμλ€κ³ μκ°νλ€.
νΉν javascriptλ₯Ό μ¬μ©νλ κ°λ°μλΌλ©΄ λ©΄μ μμ κΌ μ§λ¬Έμ λ°κ²λλ κ·Έ λλ§μ closure
μ λν΄μλ μ½λμ ν¨κ» μ μ€λͺ
ν΄μ£Όκ³ μμ΄ μ΄ν΄νλλ°μ λ§μ λμμ΄ λμλ€. λ ν¨μν νλ‘κ·Έλλ° λΌμ΄λΈλ¬λ¦¬λ₯Ό μ§μ ꡬνν΄λ³΄λ κ²λ κ½€ ν₯λ―Έλ‘μ λ€. νκ°μ base functionμ λ§λ€κ³ μ¬κΈ°μ λ€λ₯Έ functionμ λΌμλ£μμΌλ‘μ¨ μ¬λ¬κ°μ§ λ€λ₯Έ κΈ°λ₯μ νλ ν¨μλ₯Ό 쑰립νλ κ³Όμ μ΄ μ μ°¨μ μΌλ‘ μ½λ©νλλ°μ μ΅μνλ λμκ² μΈμμ μΌλ‘ λ€κ°μλ€.
λν μ§μ°νκ°(Lazy evaluation) λΌλ κ°λ
μ μ²μ μκ²λμλ€.
(μ¬κΈ°μ μ§μ°νκ°λ κ²°κ³Όκ°μ΄ νμν λκ°μ§ κ³μ°μ λ¦μΆλ κΈ°λ²μ΄λ€)
μλΉμ€ κ°λ°μ μ§μ€νλ€λ³΄λ©΄ μ¬μ€ μ΄λ° rawν levelμ μ°μ°ν¨μ¨κ°μ λΆλΆμ λμΉκΈ° μ½λ€. μ¬μ€ λ΄κ° κ·Έλ¬λκ² κ°λ€. κ°λ°μ ν λ λ¬Όλ‘ μ±λ₯μ μ κ²½μ°μ§ μλλ€λκ²μ μλμ§λ§, μ§μ°νκ° κ°μ κ°λ
μ μκ°ν΄λ³΄λ©΄μ μν₯λ²μλ₯Ό νμ
νκ³ μ€μ λ‘ μ μ©ν μ μλμ§ μκ°ν΄λ³΄λ κ°λ°μλ λ§μ΄ μμ κ²μ΄λΌκ³ μκ°νλ€.
underscore
λ lodash
μ μ΄λ° μ§μ°νκ°λ₯Ό μν methodλ₯Ό ꡬνν΄λμλ€λ λΆλΆλ ν₯λ―Έλ‘μ λ€. μ μκ° λ§λ partial-js
λν. κ³Όκ±°μ κ°λ°μλ€μ μ΄λ°κ²μ μ΄λ»κ² μκ³ λ―Έλ¦¬λ―Έλ¦¬ ꡬνμ ν΄λμ κ²μΈμ§!
/* partial js μμλ Lμ μ΄μ©ν΄ μ§μ°νκ° ν¨μλ₯Ό νΈμΆν μ μλ€ */
var count = 0; // 루ν μΉ΄μ΄νΈ
var list = [1, 2, 3, 4, 5, 6];
_.go(list,
L.map(function(v) {
count++;
return v * v;
}),
L.filter(function(v) {
count++;
return v < 20;
}),
L.take(2),
console.log); // [1, 4]
μ±
μ μ½μΌλ©΄μ μλ‘μ΄ λ°©λ²μΌλ‘ ν¨μλ₯Ό ꡬννκ³ , λ μ¬λ¬ ν¨μλ₯Ό μ‘°ν©ν΄μ μλ‘μ΄ ν¨μλ₯Ό λ§λ€μ΄λ΄λκ²μ 보κ³
"μ μ΄λ κ²λ ν μ μꡬλ!"
λΌλ μκ°μ΄ λ€κΈ΄ νμμ§λ§, λμμ μ΄λ₯Ό μ€μ μλΉμ€ κ°λ°ν λ μ¬μ©ν μ μμ κ²μΈκ°μ λν μλ¬Έλ λ€μλ€.
ν¨μν νλ‘κ·Έλλ°μ΄ ν¨κ³Όμ μΌλ‘ μ¬μ©λ μ μλ μ¬λ£λ collection
, array
κ°μ λμΌν modelμ λ°λ³΅μΌλ‘ κ°μ§λ dataνλ€ μΌ κ²μ΄λ€. νμ§λ§ μλΉμ€λ₯Ό κ°λ°ν΄λ³΄λ©΄ μλ―μ΄ μ€μ λ‘ μ°λ¦¬κ° κ°λ°νλ©΄μ μ ν λ, backendμμ ApiνΈμΆλ‘ λ°μμ¨ response dataλ₯Ό μ§μ μ μΌλ‘ λ³κ²½νλ κ²½μ°λ κ±°μ μλ€. λλΆλΆμ΄ λ°μμ¨ response dataλ₯Ό listν ν΄μ 보μ¬μ£Όλ λ°©μμΌλΏ.
νΉνλ λκ°μ frontend κ°λ°μλ€μ λ 곡κ°ν κ²μ΄λ€. κ°μ₯ λμ€μ μ΄κ³ μ λͺ
ν React
λ§ μκ°νλλΌλ κ·Έ dataμ 무결μ±μ μ μ§νλκ²μ μμ£Ό μ€μν μ μ 쑰건μΌλ‘ κ°μ Έκ°κ³ μκΈ° λλ¬Έμ΄λ€. (μ λ ν¨μν νλ‘κ·Έλλ°μ μ
무μμ μ¬μ©ν΄λ³΄μ§ μμκ³ , κ΄λ ¨ λμ λν μ²μ μ νλ€λκ²μ κΌ μΌλν΄λκΈΈ λ°λλλ€ π
)
μ΄λ€ collection
λ€μ chaining
ν΄μ dataλ₯Ό λ³κ²½ν λ§ν κ·Έλ° μμ
μ μμ§ νμ§ λͺ»ν΄λ³΄μκΈ° λλ¬Έμ μ΄λ¬ν μκ°μ κ°μ§μλ μλ€. κ·Έλμ μ΅κ·Όλ€μ΄ μ
무λ₯Ό ν λ μ΅λν μ΄λ¬ν λ°©ν₯μΌλ‘ μ½λ©μ ν΄λ³΄λ €κ³ λ
Έλ ₯λ ν΄λ³΄κ³ μμ§λ§ μμ§ μ μ μ©ν΄λ³Ό μ μλ μν©μ μ€μ§ μλκ² κ°λ€.
μ΄λ ν μλ‘μ΄ λΌμ΄λΈλ¬λ¦¬λ₯Ό λ§λ€κ±°λ λμ©λμ collection
ννμ dataλ₯Ό λ€λ£°λμλ μμ£Ό ν¨κ³Όμ μΌλ‘ μ¬μ©ν μ μμ κ² κ°λ€.
μ¬κΈ°κΉμ§κ° λ΄κ° μ΄ μ± μ μ½κ³ λ λλ μ΄λΌκ³ ν μ μκ² λ€. ν¨μν νλ‘κ·Έλλ°μ μ λ§ λ§€λ ₯μ μ΄κ³ μ μ°¨ μ§ν₯μ μΌλ‘ μ½λ©νλ κ²λ³΄λ€ μ¬μ¬μ©μ±μ΄λ λ²μ©μ±μμ ν° ν¨κ³Όλ₯Ό λ³Ό μ μλκ²μ νμ€ν κ² κ°λ€. λ€μ νλ‘μ νΈ μ§νμμλ λͺ¨λ λΆλΆμ ν¨μνμΌλ‘ μ§λ³΄λ κ²λ μ’μ μ΅λ λ°©λ²μ΄ λ κ² κ°λ€.