syntaxerror: unexpected token < in json at position 0 에러

클론코딩하다가 api를 이용할 일이 있어 코딩을하다 syntaxerror: unexpected token < in json at position 0라는 에러가 났다.

정확히는 fetch를 사용하여 api호출로 JSON 데이터를 가져오려고 했을때 SyntaxError가 났다.

에러 문구

에러 해결법

1. JSON데이터를 잘 전송 했는가?

cURL POST방식으로 json데이터 전송이 잘 되었는지 확인했다.

2. application/json을 명시

에러를 해결하기 위해 에러 문구를 구글링하여 나랑 똑같은 문제를 가진분을 찾아냈다.

stack overflow 사이트의 질문글을 참조하여 다음과 같이 fetch에서 헤더 내 Accept에 application/json을 명시해주니 깔끔하게 문제가 해결되나 싶더니..

참고 : https://stackoverflow.com/questions/37269808/react-js-uncaught-in-promise-syntaxerror-unexpected-token-in-json-at-posit

다른종류의 문법 에러문구다.

3. 문자열 오류

또 한 번 에러 문구를 구글링하다 검색을 하다 문자열이 잘못되었거나, 간단한 오타가 있어도 문구가 뜬다고 한다. 다시 한번 코드를 보다 작은 따옴표안에 띄어쓰기가 있는 것을 알아채 오타를 수정했다.

참고한 사이트

• https://jamesdreaming.tistory.com/171
• https://itprogramming119.tistory.com/entry/%EC%97%90%EB%9F%AC%EC%BD%94%EB%93%9C-04-Unexpected-token-o-in-JSON-at-position-1

보완

코드를 조금더 보완하기 위해 값의 변경이 이뤄지는걸 방지하고자 const 상수화를 해준다.