SyntaxError: Unexpected token } in JSON at position 68

문제 상황

 

회원가입 기능을 완료한 뒤 로그인 기능을 구현하고 테스트 해보던 중 다음과 같은 오류가 떴다.

 

 

이런 부류의 에러가 났을 때 해결하는 것이 제일 힘들다.

보면 알겠지만 내가 만든 파일의 어느 부분에서 오류가 났는지 표시되는 부분이 하나도 없다.

 

어느 지점에서 문제가 생겼는지 파악하기 위해 console.log를 찍어보기도 하고 정상적으로 작동했던 부분 뒤에 작성했던 코드들을 부분적으로, 혹은 전체적으로 지워보기도 했다.

 

하지만 터미널에 찍히는 콘솔은 없었고 여전히 에러메세지는 나왔다.

 

 

 

해결

 

SyntaxError: Unexpected token * in JSON * 과 같은 오류는 API를 구축하고 프론트 부분을 client를 사용할 때 많이 발생하는 오류인 것 같다. 실제로 저번에도 비슷한 오류를 겪었지만 오늘도 똑같은 실수를 하고 말았다.

 

아래의 사진 두 개 모두에서 볼 수 있듯이 Thunder client라던가 Rest client, http 같은 client들을 사용하다 보면 request로 body를 보내야 하는 경우가 많다.

 

 

그런데 이 때, 보내지는 데이터의 형태는 JSON 형태이기 때문에 JSON 형식을 맞춰주지 않게 되면 지금과 같은 오류가 발생하는 것이다.

 

내 경험을 예로 들자면 다음 코드에서와 같이 두 번의 실수를 했다.

 

// request.body

{
    name: "example6",
    email: "example6@naver.com",
    password: "example6",
    passwordConfirm: "example6",
    gender: "women",
    birthday: "1311-12-22"
}

첫 번째는 request.body로 데이터를 보낼 때 이런 식으로 작성했고

 

{
    "name": "example6",
    "email": "example6@naver.com",
    "password": "example6",
    "passwordConfirm": "example6",
    "gender": "women",
    "birthday": "1311-12-22",
}

두 번째는 이런식으로 작성했다.

 

첫 번째 예시

첫 번째 예시를 보면 크게 문제될 것이 없어보인다. 물론 javascript 코드라면 문제가 없다. 하지만 JSON형태로 봤을 때는 key값 부분도 마찬가지로 ""를 넣어주어야 한다.

 

두 번째 예시

두 번째 예시도 이상할 것이 없어보인다. 그런데 마찬가지로 javascript의 객체라면 허용될 { }안의 마지막 ' , ' 때문에 데이터가 정상적으로 넣어지지 않는다.

 

위 두 가지의 예시를 고친 제대로 된 코드를 써보자면 다음과 같다.

 

{
    "name": "example6",
    "email": "example6@naver.com",
    "password": "example6",
    "passwordConfirm": "example6",
    "gender": "women",
    "birthday": "1311-12-22"
}

 

request.body에 이런 식으로 JSON 형식을 맞춰서 적게 된다면 이런 오류를 피할 수 있다.