• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

강의중에 정말 궁금한게 있습니다 mock data에 한글이 입력될 경우 msw에서 값을 못 보냅니다

24.02.17 18:39 작성 조회수 319

0

안녕하세요 강의 잘 보고있습니다

/api/postRecommends API 호출로 데이터를 부를시에 mock data의 content 부분에 한글이 입력이 될 경우 PostRecommends 파일의 useQuery data 부분이 undefined로 나옵니다 그래서 확인을 해보니 msw의 HttpResponse.json에서 한글이 입력될 경우 Syntax Error 뜨는 것 같은데요 하지만 영어로 작성할 경우 정상적으로 데이터를 받아 옵니다

 

network 탭을 보아도 한글을 입력하든 영어가 입력되던 response에는 정상적으로 데이터가 보이지만, React-Query Dev Tool에서는 data: null 처리가 되고 실제로 받아오는 data 또한 없습니다

 

아래는 그에 따른 이미지 입니다

 

 

  1. content에 한글이 들어갈 경우

스크린샷 2024-02-17 오후 6.32.16.png스크린샷 2024-02-17 오후 6.32.34.png

  1. content에 한글이 들어가지 않을 경우

스크린샷 2024-02-17 오후 6.33.35.png스크린샷 2024-02-17 오후 6.33.54.png

한글만 들어가면 Syntax Error가 뜹니다

특정 버전에 대한 버그인지 원인을 모르겠습니다 ,,

 

답변 3

·

답변을 작성해보세요.

1

Sung Min Chos님의 프로필

Sung Min Chos

2024.02.19

이거 저도 겪은 에러인데
데이터에 한글들어가거나 이미지같은 슬러시가 데이터에 있을 때
SyntaxError: Unterminated string in JSON 에러 떨어지면서 정상적으로 통신이 안되더라구요.

응답값도 정상처럼보이는데 끝에 배열이 끊겨보여서 정상적이지도 않구요

영어를 제외한 스트링을 이스케이핑 처리를 해야 정상동작하는것같습니다

다른에러일수도있으니 useQuery 구조분해 할당할 때 error 추가해서 콘솔 찍어보세요
const{data,error} =useQuery

그러네요 이스케이핑 처리하니깐 잘 동작하네요... 버그인듯합니다, 답변 감사해요 ㅎㅎ

0

msw@2.2에서 에러가 나는 것 같습니다.

npm i msw@2.1 해보세요

네 알겠습니다

좀 전에 강의 공지 올리신 내용과 동일한가 보군요 답변 감사합니다

2.2.2에서 수정되었습니다.

0

이건 저도 처음보는 현상이네요. 강의에서는 한글 응답을 했을 때 잘 나오긴 합니다. 일단 msw에서는 데이터를 잘 응답하고 있는 것 같습니다. response에 찍히니까요. 한글 입력했을 때 개발자도구 콘솔에는 에러없나요?