최종 수정 : 2020.10.07(수)

🥶 Error serialzing ....

SerializableError: Error serializing `.initialState.account.user` returned from `getServerSideProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value all together.
....

한참 잘 하고 있었는데 두둥 에러등장..

프론트에서 타입스크립트 코드 정리한다고 한참 뒤적거리다가, 콘솔을 확인하니 에러가 등장했다. 이게 또 타입스크립트 만지다 잘못했나? 했지만 아니고, 백엔드 서버가 문제였다. 해더-쿠키 읽어서 유저정보 확인하는 과정에서 정리안된 코드(프론트-백엔드 오가며 작업한것이 화근!🥵) 덕분에 서버에러가 난 것! 코드는 마무리 될 때까지... or 뒷정리를 잘하자! 😫

원인

결론은 백엔드서버에서 동일한 상태코드 응답을 2회 작성 했을때 에러발생시킴(다른 상태코드로 응답할 경우 에러 안났음)
여기서 원인 찾는데 고생한 이유 중 하나는 프론트에서 구현한 저 변수명 때문인데, 참 바보같이.. 화면에 ServerError 라고 잘 쓰여있구만 프론트에서 뒤적뒤적 거렸다~

• initialState.account.user : 리덕스 스토어의 상태, 유저데이터를 담는다.
• getServerSideProps : nextjs의 서버사이드랜더링 함수

결국 유저데이터 업데이트 할때 문제가 생긴다는 것을 알았고, 서버를 확인하니, 바로 문제해결 스타또오!

• undefined는 직렬화되지 못하기에 null 로 대체 되도록, 또는 undefined가 발생하지 않도록 해야함.
• 왜 undefined가 발생 되었는지 찾아보잤!

문제의 코드

/** @쿠키유저정보 */
router.get('/match-cookie', async (req, res) => {
  try {
    // console.log('쿠킹?', req.cookies);
    if (req.cookies && req.cookies['egg-sns-token'])
      return res.status(200).json({
        message: 'success',
        user: {
          id: 1,
          userName: 'hwang',
          email: 'hwang@naver.com',
          phoneNumber: '000-0000-0000',
          fullName: 'hwang eunji',
          imageUrl: null,
          content: '안농하세영',
          secretMode: false,
        },
      });

    console.log('쿠키엄떠');
    return res.status(200).json({ message: 'empty-cookie-data' }); // 여기서에러
    // return res.status(400).json({ message: 'empty-cookie-data' }); // 다른 상태코드 보내면 안남 !
  } catch (error) {
    console.log('에러인가?');
    res.status(500).json({ message: 'server-error' });
  }
});

마무리 😇

근대 .. 나만 저 콘솔에러 내용이 어려운가? 직렬화가 뭐야.. 여기서 직렬화만 알았어도 쉽게 해결했을 것 같은데, 직렬화 저 Serializable 만 알았어도! 궁금할때 배워야 더 빨리 배운다. 검색해보자!

위키백과 직렬화
쉽게읽는 프로그래밍 : 직렬화(serialization)란? <- 아주 순한맛 추천
우아한형재-자바직력화 훓어보기 편
브런치 Effective Java - 직렬화(serialization)

직렬화

이해한 것을 정리해보면,

객체(또는 데이터)를 다른 외부 시스템에서 사용하려 할 때, 바이트(byte)형태로 변환하여 보내 사용(=== 직렬화), 사용처에서는 바이트형태의 데이터를 객체 또는 데이터로 복구(=== 역직렬화)시키는 사용한다.

• 직렬화 하는 형태는 바이트/문자열/이진 등
• 클라이언트와 백엔드간 통신에 JSON을 주고받는 것이 문자열 직렬화 방식!