231205 개발일지 TIL - JSON.parse 오류와 JSONP 데이터 처리 방법(SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data)

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

문제 발생
JSON 데이터를 파싱하는 과정에서 발생했는데 데이터 형식에 관련된 오류이다.

문제 원인
JSON.parse 함수는 JSON 형식의 문자열을 JavaScript 객체로 변환하는 역할을 한다. 이 함수는 정확한 JSON 형식의 문자열만을 처리할 수 있다. 이번 문제의 원인은 JSONP(JSON with Padding) 형식의 데이터였는데 JSONP는 JSON 데이터를 요청하는 방식 중 하나로, 동일 출처 정책을 우회하기 위해 사용된다. 하지만 JSONP 응답은 일반적인 JSON 형식이 아닌 함수 호출의 형태를 띠기 때문에, JSON.parse 함수로는 직접 파싱할 수 없어서 발생했다.

해결 방법
JSONP 데이터에서 순수한 JSON 데이터만을 추출하는 것이다. JavaScript에서는 indexOf(), lastIndexOf(), substring() 함수를 사용하여 JSONP 데이터에서 JSON 문자열을 추출할 수 있다. 이후에는 JSON.parse() 함수를 사용하여 JSON 문자열을 JSON 객체로 변환하면 된다.

느낀 점
이 문제를 해결하는 과정에서 JSON과 JSONP의 차이, 그리고 JSON.parse 함수의 동작 방식에 대해 더 깊게 이해할 수 있었다. 또, JavaScript에서 데이터 형식에 따라 적절한 함수나 방법을 선택하는 것의 중요성을 깨닫게 되었다.
이런 유형의 오류를 미리 방지하려면 데이터의 형식을 정확히 이해하고, 이에 맞는 처리 방법을 선택하는 것이 중요하다는 것을 다시 한번 깨달았다.