2주 프로젝트의 2주일 차 첫 날… 맞나? 아니면 1주차의 주말인가? 블로깅이 밀려서 정확한 날짜는 기억이 나지 않는다 ㅠㅠ
여튼 .. 원래 레시피 목록에는 하드코딩이 되어 있었는데, 백앤드에서 데이터를 보내줬다고 가정하면서 json data를 fetch로 불러오는 걸 연습해보았다!
import React, { Component } from "react";
import "./BestRecipe.scss";
class BestRecipe extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
data: []
};
}
componentDidMount() {
fetch("../../Pages/Home/Data.json")
.then(response => response.json())
.then(
result => {
console.log(result, "b4");
this.setState({
isLoaded: true,
data: result
});
console.log(result, "after");
},
error => {
this.setState({
isLoaded: true,
error
});
}
);
}
render() {
const { error, isLoaded, data } = this.state;
if (error) {
console.log(data, "얍얍1");
return <div>Error in loading</div>;
} else if (!isLoaded) {
console.log(data, "얍얍2");
return <div>Loading ...</div>;
} else {
console.log(data, "얍얍3");
return (
<>
{data.map(food => (
<div className="home_recipe_wrapper">
<div className="home_recipe_container">
<div className="home_recipe_img_container">
<img url={food.img} alt={food.name}></img> )
<div className="home_recipe_words_container">
<h4 className="home_recipe_category">{food.des}</h4>
<h2 className="home_recipe_name">{food.name}</h2>
</div>
</div>
</div>
</div>
))}
</>
);
}
}
}
export default BestRecipe;이것이 나의 코드…
https://howtocreateapps.com/json-html-react-tutorial/#3_Fetching_an_API
이 사이트를 참고해보았다! 근데 나는 역시나 똥손이였다.
분명 함수식에서의 에러는 다 제거했는데… 이미지와 텍스트가 로드되지 않는다!!!!
response 부분이 의심스러워서 콘솔도 찍어봤는데 이렇게…
fetch("../../Pages/Home/Data.json").then(response =>
console.log(response.json())
);결과는…
Unexpected token < in JSON at position 0라니.. 띠용????
그래서 wecode 전용 stack overflow에 문의를 해봤다!
콘솔을 찍어보라고 하셔서 그것도 해보았다!
class BestRecipe extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
data: []
};
}
componentDidMount() {
fetch("../../Pages/Home/Data.json")
.then(response => response.json())
.then(response => console.log(response, "응답하라!"))
.then(
result => {
this.setState({
isLoaded: true,
data: result
});
},
error => {
this.setState({
isLoaded: true,
error
});
}
)
.then(result => console.log(result, "결과!!"));
}
찍어 보았는데… 반응은 result가 undefined라는 것.. 네트워크 탭도 확인해보았는데..
200 OK면 괜찮은거 같은데 왜 안될까 왜 왜???
여기서 문제는 두 가지였는데… 우리는 타요만 기억하면 된다
타고 타고타고 집요하게 타고들어가기!
그 ‘탄다는 것’에서의 포인트는 두 가지이다.
fetch함수를 쓰려면 public 폴더 하에서 관리하기
fetch함수 특성상 정해진 url에 접속해서 파일을 불러오는데, 그 대상이 되는게 바로 public 폴더이다. 브라우저에서 public 바로 밑에 있는 index.html에 접근해서 화면을 나오게 하는 것…!
나의 경로를 다시 보자면…../../Pages/Home/Data.json
이렇게 두 번 이상 경로를 타게 되면 build 폴더를 벗어나기 때문에 json.data를 불러올 수 없는 것이였다!
이 경우는 public 폴더안에 data.json 파일을 옮기고 fetch("./data.json") 경로 설정을 다음과 같이 해주면 된다리
데이터가 src폴더에 있을땐 import 하기
src폴더 내에 있는 json파일은 import 하기! 브라우저가 화면을 띄울때 index.js 파일부터 읽는데.. 거기선 또 Routes로 연결 되어있고.. Routes로 들어가면 또 거기서 import된 파일들을 확인하고 계속 타고타고타고타고 올라갑니다. 근데! 저는 위에서 json data를 한번도 import 하지 않았기 때문에 undefined 값이 불려진 것이다.
html로 페이지를 만들때는 js파일에서 fetch를 쓰는 게 훨씬 간단했는데
react로 넘어가니까 넘 복잡한것 같다.. 그래도 경로설정만 잘해주면 된다는것
다시 한번 말하지만 우리가 기억할 것은 타요다!
react가 파일을 어떤 경로로 타고타고타고타고 들어가는지 그 원리만 알면 해결쓰~~
백엔드에서 주소 받아와서 한 fetch에 대해선 다음 이 시간에 정리할 예정!