meloning / learn-nuxt Goto Github PK

store/index.js 내 commit 또는 dispatch의 함수 호출시 함수명을 문자열로 정의하여 호출하고 있다.

이는 ES6 + 문법중 동적 키값 정의 방식을 통해 상수화하여 개선해 볼 수 있다.

동적 키값 정의 방식을 활용하면 추후 TS 전환시 타입 추론 관점에서 이점을 얻을 수 있다.

현재 컴포넌트 내에서 raw하게 axios를 호출하는 있으며, cart와 product api 호출 부분이 통합된 채로 모듈화가 구성되어져 있다.

cart, product 각각 api 모듈화를 진행하고, 해당 모듈을 호출하는 컴포넌트에 알맞게 적용하여 리펙토링해야 한다.

교육을 위한 샘플 코드로 인해 같은 이미지가 나오는 것을 방지하고자 데이터 로드이전 시점에 imageUrl을 map을 통해 random한 이미지가 로드되도록 확장된 기능을 추가하였다.

const newCartItem = {
      ...cartItem, // spread operator
      imageUrl: `${cartItem.imageUrl}?random=${Math.random()}` // 동일한 주소에서 동일한 이미지를 가져오고 있기 때문에 캐싱될 확률이 있기에
    }

하지만 매번 필요할때마다 구현 부분이 흩어지며 정의하게 되어 응집력이 떨어진 모습으로 남아 있기에 이를 global util 함수를 따로 만들어 개선할 필요가 있다.