[SoloProject] Toast Side Effect issue

😭미들웨어가 왜 여기서도 실행될까

문제없이 기능이 동작하고는 있었지만 타입에러가 발생하는 현상을 확인했습니다.

먼저 오류 메시지부터 읽어보면 undefined에 배열메서드 map을 사용할 수 없기때문에 발생하는 타입에러입니다.

그렇다면 어디에서 타입에러가 발생한것일지 아래를 읽어봅니다.

addBookMarkProperty의 12번째줄에서 에러가 발생하고있네요

 

그런데 개발서버를 구동시키고 난 직후에는 에러가 발생하지않고

북마크와 관련한 이벤트가 발생하기 전까지는 에러가 발생하지 않습니다.

 

그렇다면 북마크로직과 어떤 연관이 있을 듯 한데 테스트를 해보다가 문제가 발생하는 지점을 찾았습니다.

자세히 살펴보면 북마크를 누르는 이벤트를 발생시켰을때

북마크를 누르는 이벤트는 문제없이 실행되지만

토스트 팝업이 나온 뒤 사라지는 과정에서 undefined가 전달되는것을 확인할 수 있습니다.

 

또한 에러 창의 아래를 살펴보면 트리거되는 이벤트의 시작점이

fulfilled이고 그 위에서 발생하는 것이 createAsyncThunk입니다.

 

이는 명백히 오류인데 addBookMarkProperty는 configureStore에서 설정해 준 미들웨어입니다.

이 미들웨어는 평소에는 실행되지 않아서 신경을 쓰고있지않았지만

toast팝업이 createAsyncThunk를 이용하는 시점에서 미들웨어가 트리거되었고

addBookMarkProperty가 기대하는 인자가 들어오지 않아서 에러가 발생하는 것으로 판단했습니다.

const store = configureStore({
  reducer: {
    dark: darkSlice.reducer,
    [ProductApi.reducerPath]: ProductApi.reducer,
    toast: toastSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(ProductApi.middleware, addBookmarkProperty),
});

이렇게 configureStore에서 미들웨어를 달아주었는데

이렇다보니 슬라이스를 구분하지않고 미들웨어가 사용되는 모든 경우에서 미들웨어가 동작해버린것입니다.

이는 ProductApi에 대해서만 미들웨어가 동작하길 기대했던 제 입장에서는 버그처럼 느껴진것이지요

 

하지만 문제가 있었습니다.

createApi에 미들웨어를 따로 달아주는 방법을 모른다는 것이었습니다.

https://redux-toolkit.js.org/rtk-query/api/createApi

위 링크는 redux-toolkit의 createApi에 대한 레퍼런스인데

여기서는 미들웨어를 다는 예제같은것을 보여주지 않다보니 조금 문제가 있었습니다.

 

뭔가 있을법도 한데 RTK에 대한 레퍼런스를 찾기가 힘들었습니다.

GPT에게 물어보니

if (action.type.startsWith('apiSliceName/')) {

와 같이 type의 startsWith를 통해 걸러줄수있다고하는데..

이건 아무리 찾아봐도 사용이 쉽지 않더라고요

 

우선 undefined에 대한 분기처리를 해주는것으로 문제를 해결했습니다.

  if (action.type.endsWith('fulfilled') && action.payload !== undefined) {
    action.payload = action.payload.map((data: ProductType) => {
      const localDataIdx = getBookMarkData.findIndex(
        (localData: ProductType) => localData.id === data.id,
      );

      return localDataIdx === -1
        ? { ...data, bookmark: false }
        : { ...data, bookmark: true };
    });
  }

---

🙉모달을 눌렀더니 엄청 긴 에러가

react devtools backend compact에서 경고가 발생했습니다.

제가 짠 코드는 당연히 아닐테니 로직이 잘못되었다기보다는 제 코드가 어딘가에서 잘못되었을 확률이 높을 것 같습니다.

차근차근 읽어보니 DOM property를 잘못사용하고있는게 아니냐는 경고입니다.

flood-opacity라는 속성을 사용했는데 네가 의미하는게 floodOpacity냐고 묻고있네요

svg의 프로퍼티와 관련한 설정일 듯한데 Delete라는 부분이 눈에띕니다.

제가 정의한 svg파일이거든요

Delete에 대한 코드가 있는 파일로 옮겨가보니 에러내용에 해당하는 코드를 발견할 수 있었습니다.

이것을 경고창이 요구하는대로

flood-opacity에서 floodOpacity와 같은 카멜케이스 형식으로 바꾸어주니 문제없이 동작합니다.

검색해보니 svg파일을 이용할때 흔히 발생하는 에러인듯하네요