Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

mock 데이터를 가지고 통신을 하던 중 이런 에러를 발견했다.

Uncaught (in promise) SyntaxError: 
Unexpected token '<', "<!DOCTYPE "... is not valid JSON

유독 한 컴포넌트에서만 통신을 했을 때 이런 문제가 발생했는데
문제는 간단하게 해결되었다.

useEffect(() => {
	fetch('/data/popularVideo.json')
  	.then(res => res())
  	.then(data => setVideos(data.items))
}, [])

데이터 주소의 시작에 "/" 를 잊어버렸던 것이다.

겸사겸사 경로에 대해 같이 정리하면 좋을 것 같아서 블로그를 적었다.

절대 경로

웹 페이지나 파일이 가지고 있는 고유한 위치를 말한다.

상대 경로

상대 경로란 현재 위치를 기준으로한 위치이다.

• / : 루트
• ./ : 현재 위치
• ../ : 현재 위치의 상단 폴더

결론적으로 항상 데이터 통신을 할 때에는 우리가 원하는 파일이 !어디에! 위치해 있는지 알려주는 것이 정말정말 중요하다!