실무 적용

함수형 프로그래밍으로 실전 연습!

• 장바구니 예제를 이용함

• 상황

  • 유저가 새로운 아이템을 장바구니에 저장했을 때 상황
  • 장바구니에는 이미 저장된 서버에서 받은 데이터가 있음
  • 장바구니에 담으면 지금 담긴 아이템이 이미 장바구니에 있는지 확인
  • 확인 후 sizes:array[]의 name과 일치하는 아이템이면 해당 아이템의 quantity와 price를 더함
  • ex)

       const server = [
         {
           id: 1,
           sizes: [{ size: "L", name: "item", price: 1000, quantity: 1 }],
         },
       ];
  
       const addToCart = [
         {
           id: 1,
           sizes: [{ size: "L", name: "item", price: 1000, quantity: 2 }],
         },
         {
           id: 2,
           sizes: [{ size: "XL", name: "item2", price: 1000, quantity: 1 }],
         },
       ];
  
  addToCart와 server를 비교해서 새로운 배열 만듦
  
       const result = [
         {
           id: 1,
           sizes: [{ size: "L", name: "item", price: 3000, quantity: 3 }],
         },
         {
           id: 2,
           sizes: [{ size: "XL", name: "item2", price: 1000, quantity: 1 }],
         },
       ];

시작!

• 유저가 선택한 아이템들을 local이라고 함

• 먼저 getIntersectionByKey함수를 이용하여 server 데이터와 local 데이터를 비교해서 겹치는 아이가 있는지 찾는다.

• curry2의 경우 인자가 두 개 이상인 경우 사용할 수 있는 것 같다(정확히 파악 못 함)

• fxjs의 intersectionWith으로 중복 아이템을 찾는다.

• intersectionWith 사용하지 않으면 아래와 같이 사용가능

• 이제 서버와 중복이 있는 로컬 데이터와 서버 데이터를 getTupleByKey함수를 사용하여 튜플로 만든다

• getTupleByKey함수는 인자로 넘어온 key로 인덱싱된 객체를 사용하여 튜플을 리턴한다.

• 지금까지 결과, 이중배열의 첫번째 배열이 서버, 두번째 배열이 로컬이다.

• 이제 getAddedSizesQuantity 라는 함수를 만들어서 같은 size끼리 quantity, price를 더한다.

• 우리 getAddedSizesQuantity 함수는 살짝 복잡하다.
• 먼저 넘겨받은 tuple을 인자로 갖는 addSizesQuantity를 map을 돌린다.
• addSizesQuantity는 로컬, 서버 데이터에 있는 sizes 배열을 가지고 key가 겹치는 데이터를 찾는 것이다. 처음 했던 일과 동일
• 겹치는 sizes 배열을 찾으면 map으로 sumOfProperites 함수를 실행한다.
• getMerged는 합친 sizes 배열을 서버 데이터와 합치는 함수다.

• sumOfProperites 는 object의 property의 숫자란 숫자란 숫자를 다 더하는 함수다.

• 여기까지 실행하면 이중배열로 quantity, price가 더해진 sizes 배열이 완성된다. 이제 getMerged 함수로 서버 데이터의 sizes와 합쳐주면 된다.

• getMerged는 튜플을 받아서 서버 데이터만 뽑고, sizes와 합친 뒤 map을 이용하여 sizes를 합치는 함수다.

따단~! 머리 터지겠다 오늘은 쉬어야지..

큰도움 @최준