React json load error

Question

Data.json을 아래와 같이 설정하고

[
    {id: 1, name: kim, age: 30},
    {id: 2, name: lee, age: 25},
    {id: 3, name: park, age: 35}
]

리액트 app.js에서 json을 불러 출력하려고 하면 아래와 같은 에러가 나와요

SyntaxError: Unexpected token <, <!DOCTYPE ... is not valid JSON

아무리 검색해도 해결법을 못찾겠어서 글 올립니다ㅠㅠ
아래 스크립트는 app.js 작성한 내용입니다 ㅠ

백승훈 · Accepted Answer

안녕하세요 작성 글에 답변 드립니다. 😏

1. 먼저 질문 글을 올리실 때는 작성한 json 파일이나 풀 코드를 올리시는 게 맞습니다.

2. 당장 보이는 것으로 jsx 내부에 data.items가 있는데 data 자체를 console.log로 찍어보시기 바랍니다. 적어주신 json에서 items가 어디서 나왔는지도 확인 해보시는 게 좋을 듯 합니다.

3. 작성 글을 ChatGPT에 넣으면 다음과 같이 상세하게 다음을 찾아가는 길을 제시해줍니다. 배우는 단계에서 적극적으로 활용을 추천 드립니다.

이하 chatgpt

제시하신 문제는 주로 웹 개발에서 흔히 발생하는 문제 중 하나입니다. 문제의 핵심은 fetch 함수를 사용하여 로컬의 data.json 파일을 불러올 때 발생하는 문제로 보입니다. SyntaxError: Unexpected token < 오류 메시지는 대개 잘못된 경로나 설정으로 인해 예상했던 JSON 파일 대신 HTML 문서(보통은 404 Not Found 페이지)가 반환되었음을 나타냅니다. 이를 해결하기 위한 몇 가지 단계를 제안드립니다.

정확한 파일 경로 확인: fetch(./data.json) 호출이 올바른 위치에서 data.json 파일을 찾을 수 있도록 하십시오. 프로젝트의 루트 디렉토리나 public 디렉토리 내에 data.json 파일이 위치해 있는지 확인하십시오.

웹 서버 실행 여부 확인: 로컬 파일 시스템에서 직접 HTML 파일을 열 경우 fetch가 로컬 파일에 접근하지 못할 수 있습니다. 따라서, Create React App과 같은 개발 서버를 사용하고 있을 경우, 서버가 실행 중인지 확인하십시오.

JSON 파일의 유효성 검증: JSON 파일이 올바르게 형식화되어 있는지 확인하십시오. 제공하신 JSON 예제는 유효해 보이지만, 실제 파일에서 문제가 없는지 다시 한번 확인해 보시기 바랍니다.

App 컴포넌트 코드 수정: 제공하신 코드를 보면, data.items.map(...) 부분이 있는데, 이는 data.json의 구조와 일치하지 않습니다. data.json 파일에는 items라는 필드가 없으므로, 이 부분을 data.map(...)으로 수정해야 합니다.

조용구 · Answer

안녕하세요!

data.json 파일의 주소가 잘못되서
response.json() 실행했을 때 에러 발생되는 것으로 보입니다.

data.json의 정상적인 주소를 찾아서 사용하시는 게 좋을 것 같아요!
data.json의 주소를 브라우저에서 접속되는지 확인해보거나 개발자 도구에서 네트워크 탭에서 확인해보세요 :)