트러블슈팅

🖥️ Front-End

✅ 프로젝트에 사용되는 babel-preset-react-app이 @babel/plugin-proposal-private-property-in-object 패키지를 의존성으로 선언하지 않고 사용하고 있어서 경고 발생

// 설치로 해결 
yarn add --dev @babel/plugin-proposal-private-property-in-object

 

✅ Promise가 state에 들어가 있어서 생긴 채널톡 오류. Redux state에는 비동기 작업 또는 Promise와 같은 값이 포함되어서는 안 되기 때문.

// 오류 메시지
serializableStateInvariantMiddleware.ts:212 A non-serializable value was detected in the state, in the path: `channelTalk`. Value: Promise 
Take a look at the reducer(s) handling this action type: channelTalk/bootChannelTalk.
(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

 

✅ redux-thunk를 사용하여 비동기 작업을 처리함.

import { createSlice } from "@reduxjs/toolkit";
import * as ChannelService from "@channel.io/channel-web-sdk-loader";

// 비동기 작업을 처리하기 위해 thunk를 사용하는 액션 생성자
export const bootChannelTalk = () => async (dispatch) => {
  const { REACT_APP_CHANNEL_PLUGIN_KEY } = process.env;

  // 스크립트 로드 후 익명으로 부트
  ChannelService.loadScript();
  ChannelService.boot({
    pluginKey: REACT_APP_CHANNEL_PLUGIN_KEY,
  });

  // 비동기 작업이 완료되면 동기적인 액션을 디스패치
  dispatch(channelTalkSlice.actions.bootChannelTalkSuccess());
};

const channelTalkSlice = createSlice({
  name: "channelTalk",
  initialState: {},
  reducers: {
    bootChannelTalkSuccess: (state, action) => {
      // 부트 성공 후 상태를 변경하는 로직 작성
    },
    // ... 다른 액션 및 리듀서들
  },
});

export const { bootChannelTalkSuccess } = channelTalkSlice.actions;
export default channelTalkSlice.reducer;

 

✅ styled-components에서 props를 사용할 때 뜬 경고

styled-components: it looks like an unknown prop "pt" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)

index.js에서 StyleSheetManager로 App 컴포넌트를 감싸준 다음 shouldForwardProp속성에 true를 반환하도록 추가. 임시 props처럼 동작하게 해줌.

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <StyleSheetManager shouldForwardProp={() => true}> {/* 추가 */}
          <GlobalStyle />
          <App />
        </StyleSheetManager>
      </ThemeProvider>
    </Provider>
  </React.StrictMode>
);

 

styled-components: API Reference

 

 

✅ FE&BE 간 Cookie 전달 이슈 (localhost:3000에서 토큰이 %25가 붙어서 나오는 문제)

 

- 프론트엔드는 localhost:3000으로 서버를 구동하고, 백엔드 서버는 IP 주소이기 때문에 도메인 불일치 문제가 생겼다. 실제로 same-origin policy에 어긋나게 접근을 하면, 네트워크 탭 set-cookie 부분 토큰 값 옆에 ! 경고 사인이 떴다.

- 도메인을 맞추기 위해 이미 배포된 프론트엔드 사이트에서 작업하니 토큰이 정상적으로 생겼다.

 

✅ Redux에서 로그인 상태를 유지하기 위해 redux-persist를 적용하다가 Uncaught TypeError: baseReducer is not a function 에러 발생

- 주어진 코드에서 "baseReducer"라는 변수 또는 함수가 기대한 형식이 아니라는 에러였다.

🔥 해결방법

- redux-persist를 사용할 때는 configureStore에 전달되는 reducer는 함수여야 한다.

  - authslice.js 파일에서 authslice → authReducer로 변경했다.

- 추가로 rootReducer 객체를 함수로 변환해야 한다. store.js 파일에서 combinedReducers 함수를 사용했다.

 

🔥 redux-persist 적용이 완료되었으나 non-serializable 에러 발생

- 이 오류는 Redux의 serializable action을 유지하는 원칙에 어긋나는 비직렬화 가능하지 않은(non-serializable) 값이 액션에 포함되어 있다는 것을 나타낸다.

해결방법

- 실수를 방지하기 위해 middleware가 실행되도록 하는 것이 권고사항이지만, 끄는 방법도 redux toolkit 공식문서에서 알려준다.

Usage Guide | Redux Toolkit

- store.js 파일에서 serializableCheck를 false로 지정한다.

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      // Serializable 체크를 비활성화하여 non-serialization 가능한 값 사용 허용
      // 특별한 상황에서만 사용해야 하며, 주의가 필요한 설정
      serializableCheck: false,
    }),
});

 

✅ [Violation] Avoid using document.write() 경고

document.write()에 대한 개입  |  Blog  |  Chrome for Developers

요약하자면 document.write()를 사용하는 것은 권장되지 않는다.

해결책: 채널톡을 사용하지 않으면 경고가 생기지 않는다. 채널톡을 사용하고 싶으면 경고는 남겨두어야 한다.

채널톡을 사용하고 싶기 때문에 경고창을 내버려 두기로 했다.

• 채널톡에서 사용하는 document.write() 부분

var t = document.getElementById("ch-plugin-script-iframe"),
  r = !1,
  o = function () {
    var e = t.contentDocument || t.contentWindow.document;
    e.open(),
      e.write(
        '<!DOCTYPE html><script async type="text/javascript" src="https://cdn.channel.io/plugin/ch-plugin-core.446b7109.vendor.js" charset="UTF-8"></script>'
      ),
      e.write(
        '<script async type="text/javascript" src="https://cdn.channel.io/plugin/ch-plugin-core-20240205163803.js" charset="UTF-8"></script>'
      ),
      e.write(
        '<html lang="en"><head><meta charset="utf-8"></head><body><div id="main"></div></body></html>'
      ),
      e.close(),
      (r = !0);
  };

t.onload || o(),
  (t.onload = function () {
    r || o();
  });