로그인 응답 구조로 인해 발생한 오류 "undefined" is not valid JSON

 

로그인을 해야 접근이 가능하도록 구현을 하는 중이다.

직전에 로그인 시 접근 가능한 기본 페이지를 만들고 라우터에 적용하는 것까지 마쳤는데 서버 실행 후 로그인에 정보를 입력하니 이와 같은 오류가 떴다.

 

| SyntaxError: "undefined" is not valid JSON

 

"undefined" is not valid JSON는 JSON.parse()에 넘긴 값이 "undefined" (문자열 "undefined" 또는 실제 undefined)일 때 발생한다. 즉, localStorage.getItem('user')가 undefined인데도 JSON.parse()를 실행했기 때문.

 

DeshboardPage.js의 아래 코드에서 문제가 발생된 것으로 보인다.

const user = JSON.parse(localStorage.getItem('user'));

 

 

/ 수정 후

- user가 없으면 접근 못하도록 조건문도 추가한다.

const DashboardPage = () => {
  // localStorage에서 user 정보 안전하게 가져오기
  const userData = localStorage.getItem('user');
  const user = userData ? JSON.parse(userData) : null;

  // 로그인하지 않은 경우
  if (!user) {
    return <p>로그인이 필요한 페이지입니다. 🔒</p>;
  }

  ...(생략)
};

 

 

그런데, 같은 에러가 계속된다.

 

userData가 "undefined" (문자열)일 가능성도 고려하지 못한 점이 원인일 수 있다. 이를 확실히 방지하려면 userData가 정확히 null이 아닐 때만 JSON.parse() 하도록 바꿔야 한다.

 

 

/ 최종

import React from 'react';

const DashboardPage = () => {
  const userData = localStorage.getItem('user');
  let user = null;

  if (userData && userData !== 'undefined') {
    try {
      user = JSON.parse(userData);
    } catch (e) {
      console.error('user 데이터 파싱 오류:', e);
    }
  }

  if (!user) {
    return <p>로그인이 필요한 페이지입니다. 🔒</p>;
  }

  return (
    <div>
      <h2>대시보드 🧭</h2>
      <p>환영합니다, {user.username}님!</p>
      <p>이메일: {user.email}</p>
    </div>
  );
};

export default DashboardPage;

 

 

 

| localStorage에 undefined가 저장된 이유

 

자, 이제 에러는 뜨지 않지만 다음 문제가 발생했다.

 

 

 

 

localStorage.setItem('user', JSON.stringify(user))를 하기 전에 user 객체가 undefined일 수도 있다.

이럴 경우 JSON.stringify(undefined) → "undefined"가 저장된다.

그래서 로그인 성공 후 저장할 때도 반드시 user가 유효한지 확인하는 게 좋다

 

if (user) {
  localStorage.setItem('user', JSON.stringify(user));
}

 

 

 

 

> localStorage에 저장된 값 확인

 

< Chrome 브라우저 >

- F12 (개발자도구) > Application 탭

- 왼쪽 메뉴 Local storage > http://localhost:3000

- key와 value에 token, user항목의 값이 있는지 확인

 

 

> user에 undefined로 user저장이 안된 것이다.

 

 

> 로그인 응답 (res.data) 확인

 

로그인 처리 함수에서 console.log(res.data)로 const { token, user } = res.data;의 user 객체가 있는지 확인한다.

 

 

 

 

여기에서 user객체 확인에는 문제가 없었다. 그런데 이 값을 처리하는데 문제는 res.data 안에 user라는 속성이 없고, 바로 사용자 정보가 들어 있다. 구조분해 할당에서 user는 undefined가 되는 것이다.

 

 

LoginPage.js 에서 로그인 처리 함수 handleSubmit의 코드를 아래와 같이 수정한다.

 

- 수정전

const { token, user } = res.data;

localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user)); // ❌ user가 undefined

 

- 수정후

const { token, ...user } = res.data; // 나머지 전부를 user로 간주

localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user));

 

...user를 통해 token을 제외한 나머지 속성들을 user 객체로 모아야 한다.

이제 정상적으로 localStorage에 저장되고, 로그인 유지 및 사용자 인증이 작동한다.