[FP] 객체 지향의 데이터 & FP 의 함수

객체 지향 프로그래밍과 함수형 프로그래밍을 섞어서 쓴다?

책을 통해 함수형 프로그래밍을 공부하는 도중에 위와 같은 주제가 나왔어서, 그럼 실제로 두개의 기법을 모두 활용한다면 어떤 형태일까? 가 궁금했다.

• 객체지향 프로그래밍의 장점 및 필요성
  • 계층적 데이터를 처리할 필요가 있을 때
  • 실무에서 레거시 객체와 상호작용할 떄
  • 실세계 문제를 모형화하기가 좀 더 유리함

위의 문제들은 JS의 값-객체 패턴 등으로는 가져가기 조금 힘든 장점들이기에 객체 지향에 취약한 JS 언어라고 하더라도 이전 블로깅에서 했던 내용인 ramda의 lens or Object.freeze를 통한 객체 동결 등의 스킬을 이용해서 OOP 패턴을 이용하는 것에 대한 장점이 충분히 있다.

이 때, 함수는 순수함수와 불변성을 유지하는 함수형 프로그래밍을 통해서 만든다. 그럼 위와 같은 생각을 바탕으로 간단한 코드를 작성해보자.

class Developer {
    constructor(name, age, position) {
        this._name = name;
        this._age = age;
        this._position = position;
    }

    get age() {
        return this._age;
    }

    get position() {
        return this._position;
    }

    get name() {
        return this._name;
    }
}

const DEVELOPERS = [
        new Developer('yongki', 31, 'FrontEnd'),
        new Developer('jihoon', 33, 'DevOps'),
        new Developer('crystal', 24, 'BackEnd'),
        new Developer('jason', 32, 'BackEnd'),
        new Developer('milli', 28, 'FrontEnd'),
        new Developer('minsu', 22, 'FrontEnd')
    ]

const capitalizeNames = (developers) => developers.map(developer => developer.name.toUpperCase());

const filterDeveloperOver30 = (developers) => developers.filter(developer => developer.age >= 30);

const getDevelopersOver30WithCapitalNames = developers => capitalizeNames(filterDeveloperOver30(developers));
console.log(getDevelopersOver30WithCapitalNames(DEVELOPERS)); // ['YONGKI', 'JIHOON', 'JASON']

const filterFrontEndDevelopers = developers => developers.filter(developer => developer.position.toUpperCase() === 'FRONTEND')
const getFEDeveloperWithCapitalNames = developers => capitalizeNames(filterFrontEndDevelopers(developers));

console.log(getFEDeveloperWithCapitalNames(DEVELOPERS)); // ['YONGKI', 'MILLI', 'MINSU']

이런식으로 설계하면 OOP의 복잡한 데이터 설계의 이점을 누리면서도 함수형 프로그래밍의 순수함수 및 불변성 유지를 통한 예측 가능한 프로그램 제작 의 이점 또한 누릴 수 있게 된다.

개인 사이드 프로젝트로 프레임워크 or 라이브러리를 쓰지 않고, OOP & FP를 활용하여 개발을 해보자.

또다른 아이디어

: 전에 프로젝트를 할 때 OOP 패턴을 주로 사용하여 개발한 적이 있었다. 웹 게임 개발이었는데, 꽤나 큰 프로젝트였고, 레거시 코드가 전부 OOP로 돼있었다. 그 때 느낀건 UI 렌더링에 쓰이는 state 와 별도로 데이터를 관리하는 체계가 돼있으면 한번 쉬어가는 코너(?) 같은게 있어서 좋다는 생각이었다. 무슨 말인가 하면 보통 FE 개발을 하다보면 어떤 데이터를 업데이트하거나 하면 리렌더링이 자연스럽게 일어난다. 하지만, 데이터를 변형하고, 업데이트를 하더라도 리렌더링이 당시엔 필요하지 않을 수 있다. 리렌더링 시점과 데이터를 처리하는 시점이 꼭 같아야하는 이유는 없는거다. 그렇다고 할 때, 리렌더링 시점전까지 데이터를 담아둘 데이터 그릇(?) 모델?의 자리에 OOP 패턴을 넣는 것이다. 그런 관점에서 봤을 때 지난번 플젝 때 상당히 이점이 많다는 것을 경험했다. 하지만, 이에 더해 단점도 있었는데, 점점 객체의 변화 흐름을 팔로업하기가 어려웠다는 것이다. 어느 시점에 데이터가 바뀌었어도 리렌더링 등의 겉으로 드러나는게 명확하지 않기 때문에 예측 가능성이 약간 떨어지고, 점점 복잡해졌던 기억이 있다.

이런 부분을 생각했을 때, vuejs3 플젝을 진행할 때 pinia state에 렌더링 관련 데이터를 관리하고, 그 외에 데이터는 OOP 패턴으로 관리하면서 불변성을 유지하기 위해 함수형 프로그래밍으로 함수를 작성해서 조합하면 더 효율적인 프로그램을 짤 수 있지 않을까 싶다.