/ TECH

7월 22일 기술 스크랩

Getting Started with Vue Composables

  • 조립형 컴포넌트를 위한 hook 형태의 함수모음(?)
  • Vue에서도 재사용을위해 hook을 도입 하는구나.
  • composables 하다는 의미는 재사용성 일까? 유틸함수를 모아 놓은 것 같은데?
  • 재사용 가능한 함수API로 컴포넌트를 개발 하라는 의미 일지도.

An Introduction to Functional Programming in JS

  • 함수형 프로그래밍의 기초에 관한 영상
  • React hook 을 사용하고 있으니 일반적인 이야기?
  • OOP기반의 객체 보다 데이터기반으로 함수를 통해 정제결과를 얻는 방식
  • 근데 누가 더 좋다 나쁘다는 아닐거 같고
    • 상황에 맞게 써야 하지 않을까?
  • 확실히 테스트는 유리 하다
    • 객체는 쓸대없이 더미 파라메터나 의미없는 셋팅을 해야 하는경우가 있다.
    • 함수는 그에 비해 입력 / 출력만 검증 하면 그뿐
  • currying을 사용한 함수의 composition은 너무 올드패션 아닐까?
    • 근데 currying이 정말 좋은 방법일지는 미지수
    • 복잡도나 디버깅이 어렵다
  • 영상에 있는 내용을 코드로 만들어 봤다. (코딩하니 행복해..)
// OOP
// ClassMember 라는 객체 명세를 알아야함
// increasePay는 객체 내부로 숨겨짐
// increasePay는 Class 한정이고 다른 Class 에서 재사용 불가
// Test 시 객체를 생성 해야함. 사용하지 않는 더미 파라메터가 필요.
class ClassMember {
       
    constructor (name, pay) {
        this.name = name;
        this.pay = pay;
    }
 
    getPay() {
       return this.pay
    }
 
    increasePay(amount) {
       this.pay = this.pay + amount;
    }
}
 
const members = [
    new ClassMember("성식형", 100),
    new ClassMember("김코딩", 100),
];
 
const updateMembers = members.map((member)=>{ return member.increasePay(300)};
 
 
// 함수형
// FuncMembers 라는 데이터 구조를 알아야함
// 그에 맞춰서 increasePay 를 구현
// increasePay는 함수이므로 같은 규격의 데이터라면 재사용이 가능
// 독립 함수라 Test를 쉽게 함. 검증데이터만 넣으면 됨.
const FuncMembers = [
    ["성식형", 100],
    ["김코딩", 100]
];
 
function increasePay(members, amount) {
    return members.map((member)=>{
        retur [member[0], member[1] + amount];
    });
}
 
increasePay(FuncMembers, 300);
 
// currying
// 함수의 합성이 과연 좋은 방법일까?
function currying(func){
    return function(firstValue){
        return function(secondValue) {
            return func(firstValue, secondValue);
        }
    }
}
 
const add = currying((a,b)=>{ return a+b});
console.log(add(1)(3));