자바스크립트 ajax 데이터 로딩시 파싱 에러나는 경우

  ajax를 사용하여 데이터를 불러올 때 파싱에러가 발생했다면? 일단 인코딩 문제도 아닌 것 같은데 그 이유를 알 수 없다면 아래의 상황을 의심해보자...

예전에는 서버에서 데이터를 불러올때 인코딩 문제가 가장 많았다 인코딩은 db, 서버언어, 프론트언어 어디서든 발생할 수 있기 때문이다. 사실 이런 문제로 시간을 많이 보냈지만 지금처럼 SPA(single page app)이 많아 지고 비동기식 호출이 많아 지면서 콘솔에 알지 못하는 파싱 에러가 출력될 수 있다.

가장 먼저 의심해야할 부분 중 하나로 비동기식 코드의 ajax를 살펴보자... 예를들어 json 타입의 데이터를 불러올 경우 불러올 데이터에 따옴표(quatation)가 둘어가 있는지 확인해보자.

# 서버쪽 따옴표 escape, 프론트는?

물론 서버쪽은 발생 가능한 따옴표 문제를 해결하기 위해 여러 방법도 함수도... 학습도 되어있다. 하지만 프론트 쪽에서 이런 문제가 발생하기 쉬운데 특히 API를 만들어 사용하는 경우 이 문제는 더 두드러진다. 가능한 원인은 아래의 두 가지이다.

i. 따옴표의 escape이 API 생성시 풀리는 경우
ii. ajax에서 response 데이터를 감싸는 따옴표가 다른 경우

먼저 위 경우는 API를 만들때 따옴표에 대한 이스케이프 즉 역슬러쉬가 사라지게 된 경우이다. 이 경우 다시 따옴표를 추가하여 API에 필요한 데이터 타입으로 변경하는 것으로 해결될 수 있다.

아래의 경우는 ajax 코드를 살펴봐야한다. 만약 ajax 코드가 아래와 같을 경우 파싱 문제가 생길 수 있다...

 
위 예제는 코드는 JSON에 사용된 따옴표와 동일한 따옴표가 텍스트로 포함되어있다. 이 문제가 오류의 원인으로 이때는 따옴표를 쌍따옴표에서 홀따옴표로 변경하거나 이스케이프 되도록 역슬러쉬를 사용하는 방법이 필요하다. 이를 해결하기 위하여 아래의 방법을 사용할 수 있다.

 
이제 다시 ajax를 동작해보자. 아마 따옴표에 문제가 있었다면 발생했던 파싱 에러는 더 이상 발생하지 않을 것이다.