장바구니 기능 구현 방안 고민

 

 

 

장바구니 기능을 구현하기 위한 방법 

---

1. 로컬 스토리지로 장바구니 아이템을 담아 api요청을 최소화 한다.

2. api요청을 통해 db관리를 항상 최신화 한다. 

3. 두가지의 단점을 보완한 조합 방법

 

 

 

 

1. 로컬 스토리지로 장바구니 아이템을 담아 api요청을 최소화 한다.

 

---

 

장점 : 

•  로컬스토리지로 담는다면 복잡한 상태관리 툴을 쓰지 않아도 된다.
• 비로그인 유저도 활용할 수 있다.
• api요청을 최소화 하여 비용을 절감할 수 있다.  

 

단점 : 

• 유저가 장바구니를 분명히 담았지만, 다른 디바이스로 가보면 보이지 않는 문제 발생.
  (해당 브라우저의 임시저장소에 저장되므로)
• 시간이 지나면 사라짐(expiry date가 있는 경우)

 

 

 

 

2. api요청을 통해 db관리를 항상 최신화 한다. 

---

 

 

장점 :

•  항상 장바구니 데이터가 최신화 되어있으므로 어디서나 접근해도 같은 데이터를 볼 수 있다. 
  (유저 경험 개선)

 

단점 : 

• 과도한 api호출로 비용증가 발생

 

 

 

 

 

3. 두가지의 단점을 보완한 조합 방법

---

 

방법 : 

과도한 api호출을 막기 위해 

delay기능을 적용해보자 

 

 

setTimeout을 사용해 해당 시간이 지나면 

api요청을 하는것으로. 

그러나 await과 setTimeout은 함꼐 사용할 수 없다. 

 

setTimeout은 promise를 반환하지 않기 때문.

promise를 반환하지 않는 다는 것은 

async와 await를 사용해도 정상적으로 작동하지 않는다는 의미다. 

 

 

 

Combination of async function + await + setTimeout

 

 

방법은

 

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function sleep(fn, ...args) {
    await timeout(3000);
    return fn(...args);
}

 

 

setTimeout을 집어넣고, 

직접 promise를 반환하게 하는것 !

 

 

나의 useApi 커스텀훅에 적용하려면 다음과 같게 된다 .

 

 

const trigger = async ({
    method: triggerMethod = method,
    path: triggerPath = path,
    data: triggerData = data,
    applyResult = false,
    isShowBoundary = true,
    shouldSetError = true,
    isDelay = false,
    delayTime = 0,
  }) => {
    setLoading(true);

    console.log("trigger 호출");
    setReqIdentifier(triggerMethod + "Data");
    try {
      //isDelay를 true로 설정할 경우
      //promise를 반환하는 timeout함수를걸어
      //요청을 delay시켜 비용절감 유도
      if (isDelay) {
        await timeout(delayTime);
      }
      const triggerResult = await API_FETCHER[triggerMethod](
        triggerPath,
        triggerData
      );