[DAY45]TIL

Inseo·2023년 3월 22일

항해99

목록 보기
43/63
  1. 문제
    localhost:3000에서
    map is not a function
    is not iterable
    non-serializable

라는 오류가 계속 나온다...........

  1. 시도

검색 결과 직렬화 할 수 있는 값은 다음과 같다.

원시 타입(primitive types): 문자열(String), 숫자(Number), 불리언(Boolean), null, undefined 등

객체와 배열: 객체(Object)와 배열(Array)은 JSON 형식으로 변환할 수 있기 때문에 직렬화 가능

Date: 자바스크립트의 Date 객체는 JSON 형식으로 변환할 수 있으므로 직렬화 가능

ArrayBuffer와 TypedArray: 바이트 배열로 직렬화 가능

Map과 Set: ECMAScript 2015(ES6)부터 지원되는 Map과 Set 객체도 JSON 형식으로 직렬화 가능

함수는 직렬화 할 수 없는 값으로 간주되므로, 액션 객체의 payload에 함수가 포함되어 있으면 직렬화할 수 없는 값이라는 오류가 발생함.
브라우저 API에서 제공하는 객체나, 서버에서 전송된 객체 등은 직렬화 가능한 값인지 확인해야함.
Redux에서는 createSlice()를 사용하여 슬라이스를 생성할 때, extraReducers 옵션으로 비동기 작업을 처리하는데, 이 때 일반적으로 직렬화 가능한 값을 반환하는 비동기 함수를 사용해야 함

  1. 해결 및 깨달은 점
    위와 같은 오류는, 먼저 처음에 서버에서 불러오기 전 비어있는 값일 때 발생한다.
    따라서 옵셔널 체이닝을 통해 해결해주거나, 리덕스 스토어에 initialState에 초기 값의 자료형을 설정해주는 방법도 있다.
    나의 경우에는 로그인이 성공했을 때, 자동으로 '/'로 navigate 되도록 하기 위해 payload에 해당 함수를 보내줬는데, 이것 때문에 자꾸 오류가 발생했다고 생각한다.
profile
항상 피곤한 인서의 개발블로그

0개의 댓글