포스트맨 작업물을 fetch 서비스함수, 타입 생성해서 git에 pr요청하는 과제를 하면서
공공데이터포털의 open API를 postman으로 먼저 테스트 해보는 중이었다.
발급받은 serviceKey를 넣어줬는데 오류없이 잘 되길래 바로 service,type.ts 파일 생성한 다음
마지막으로 main.ts 에서 console.log 찍어서 확인해 보는데
왜....왜죠......?
TMDB랑 OpenWeather 다 잘만 되는구만 저 공공데이터만 오류 때문에 확인이 안됐다 ㅠㅠㅠㅠㅠ
구글링으로 SyntaxError: Unexpected token '<' is not valid JSON 찾아보니 (➰ 참고)
- Uncaught (in promise) : promise 형태의 return이 잘못된 형식으로 왔다.
- SyntaxError : 문법적 오류로 언어의 구문에 맞지 않을 때 발생된다. (➰ 참고)
- "<OpenAPI_S"... is not valid JSON : 유효한 JSON 데이터가 아니다.
대부분의 기술블로그의 글에서 오타를 수정하고 고친 경우가 많아서
혹시 모를 오타 ( , 를 ; 으로 작성했다거나..) 가 있나 확인해봤지만 없었다ㅠㅠ
내가 사용한 오픈API는 JSON으로도 결과를 받을 수 있어 JSON으로 데이터타입을 지정도 해줬는데 왜..!
이것도 시도해보고 저것도 시도해보고 해봤는데 알고보니 서비스키 문제였다.
정확히는 디코딩 문제 🙄 ( ~샤라웃 투 병호님~)
공공데이터포털의 마이페이지 > 데이터활용 > Open API > 인증키 발급현황에 있는
하나의 인증키를 복사해서 postman에서 넣어주고, 그대로 service.ts에도 넣어줬는데 알고보니
인증키가 디코딩, 인코딩 두 가지였다. 오엠쥐,,,
내가 본 페이지에서는 인코딩으로만 나와있어서 키가 하나뿐인줄 알았지ㅠㅠㅠㅠ
인코딩 키를 넣은게 문제인줄은 꿈에도 모르고
키를 재발급 받아야되나? 아님 역시 JSON 파싱이 제대로 안됐나..?! 별의 별걸 다 검색해보고 있었다 휴
내가 넣은 키는 인코딩 키.
포스트맨에서는 인코딩으로 키를 넘겨줘야 정상적으로 응답이 가능하기 때문에 포스트맨에서는 문제가 없었던 것이고,
string으로 인증키를 넘기면 자동으로 인코딩 되기 때문에 여기에 인코딩 키를 넣으면 이미 인코딩 된 값이 또 인코딩 되며 오류가 발생한다. (➰ 참고)
serviceKey: decodeURIComponent(SERVICE_KEY) 이렇게 디코딩처리 하는 방법, 또 찾아보면 반대로 인코딩처리 하는 방법도 있다.
📝 - 오늘의 교훈 -
오류메시지는 물론이고 디버거도 !!!!!!!!!!!! 꼼꼼히!!!!!!!!!!!!! 보자,
그리고 맘대로 넘겨짚지 말고 무조건 구글링하자!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 😮💨