Json server + Axios 공부하기 01

 

1. Json-sever 설치

yarn add json-server

 

2. 3001 퍼트에서 Json-server 실행

yarn json-server --watch db.json --port 3001

 

3. db json에 목업 데이터 저장

{
  "slider": [
    {
      "id": 1,
      "src": "/images/slide-img01.png",
      "text": "첫번째 슬라이드 버튼",
      "alt": "첫번째 슬라이드"
    },
    {
      "id": 2,
      "src": "/images/slide-img02.png",
      "text": "두번째 슬라이드 버튼",
      "alt": "두번째 슬라이드"
    },
    {
      "id": 3,
      "src": "/images/slide-img03.png",
      "text": "세번째 슬라이드 버튼",
      "alt": "세번째 슬라이드"
    },
    {
      "id": 4,
      "src": "/images/slide-img04.png",
      "text": "네번째 슬라이드 버튼",
      "alt": "네번째 슬라이드"
    },
    {
      "id": 5,
      "src": "/images/slide-img05.png",
      "text": "다섯번째 슬라이드 버튼",
      "alt": "다섯번째 슬라이드"
    }
  ],
  "test": [
    {
      "id": 1,
      "src": "/images/slide-img01.png",
      "text": "첫번째 슬라이드 버튼",
      "alt": "첫번째 슬라이드"
    },
    {
      "id": 2,
      "src": "/images/slide-img02.png",
      "text": "두번째 슬라이드 버튼",
      "alt": "두번째 슬라이드"
    },
    {
      "id": 3,
      "src": "/images/slide-img03.png",
      "text": "세번째 슬라이드 버튼",
      "alt": "세번째 슬라이드"
    },
    {
      "id": 4,
      "src": "/images/slide-img04.png",
      "text": "네번째 슬라이드 버튼",
      "alt": "네번째 슬라이드"
    },
    {
      "id": 5,
      "src": "/images/slide-img05.png",
      "text": "다섯번째 슬라이드 버튼",
      "alt": "다섯번째 슬라이드"
    }
  ]
}

 

4. Axios get으로 Json-server의 목업 데이터 불러온 후 화면에 정보 띄우기

(react에서는 이미지를 public 쪽에 저장하여야 하며,

불러올 때도 img src={`${process.env.PUBLIC_URL}${slide.src}`} 이런식으로 불러옴

const [slider, setSlider] = useState([]);

  const fetchSlider = async () => {
    const { data } = await axios.get("http://localhost:3001/slider");
    setSlider(data);
    console.log(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 합니다.
  };

  useEffect(() => {
    //effect 구문에 생성한 함수를 넣어 실행합니다.
    fetchSlider();
  }, []);

  return (
    <div>


      <ul className="slideWrap">
        {slider.map((slide) => {
          return (
            <li key={slide.id}>
              {slide.id}
              {slide.text}
              <img
                src={`${process.env.PUBLIC_URL}${slide.src}`}
                alt="slide-img"
              />
            </li>
          );
        })}
      </ul>

    </div>
  );
}

export default App;