개발자
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 작성한 내용입니다 ㅠ
답변 2
인기 답변
안녕하세요 작성 글에 답변 드립니다. 😏 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(...)으로 수정해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!