JSON.parse) Unexpected token u in JSON at position 0 에러 해결

안녕하세요 프런트엔드 개발자 웹코기입니다.

더운 날씨와 함께 더 뜨거워지는 머리로 요즘 계속 실시간 채팅 관련 앱과 관련해서 React, ReactNative를 이용해 작업 중인데요 ~! JSON.parse에서 에러가 나서 한참을 찾다가 문제를 해결해 공유합니다...!!

 

Unexpected token ~?

먼저 서버에서 내려받은 JSON을 파싱 하기 위해 아래와 같이 코드를 작성했습니다.

if (lastMessage != null && lastMessage != undefined) {
	const a = JSON.parse(lastMessage.data);
}

 

서버에서 내려받은 JSON 데이터를 parse 하는 과정에서 아래의 오류가 발생했습니다.

문법 에러? 기대하지 않은 토큰?이라고 하는데 겉보기엔 전혀 에러를 찾을 수가 없어 한참을 더 고생했어요...

 

 

그리고 에러 해결

알고 보니 lastMessage 또는 lastMessage.data가 비었는데 파싱을 하려고 해서 계속 위의 에러가 난 것이었습니다.

 

여기서 중요한 점은 lastMessage는 제가 짠 소스 내부에선 로직상 여러 번 호출되기 때문에,

단순히 lastMessage!=null && lastMessage!= undefined로는 모든 에러를 걸러낼 수 없었어요.

 

그래서 부정 기호! 를 사용해서 확실히 걸러냈습니다. (확실하겠죠?)

"lastMessage 외에 에러 경우의 수를 모두 찾고, 정상적인 값이 들어있다면 파싱 해라"라고 정확히 코드 구문에 작성을 했어요.

if ( !lastMessage || !lastMessage.data ) {
	return
}else{
    const jsonData = JSON.parse(lastMessage.data);
    console.log(jsonData)
}