mock data?

mock data란?

• 이름에서 알 수 있듯이 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.
• 실제 API에서 받아온 데이터가 아닌 필요에 의해 샘플로 만들어 본 데이터이다.

사용 이유는?

사용이유는 간단하다.

• 개발 진행 시 필요한 API가 완성이 안되어있을 경우 mock data를 만들어 데이터가 들어오는 상황을 미리 구현해보는 것이다.

mock data 활용

이전에 만들었던 westagram에 mock data를 활용해보자

• 일단 mock data는 백엔드 API를 모방하기에 실제 백엔드 API에서 응답값의 형태인 json 파일로 만들어줘야한다.

//commentData.json
[
  {
    "id": 0,
    "text": "리액트의 기초 알아보기",
    "like": true
  },
  {
    "id": 1,
    "text": "westargram 만들기",
    "like": true
  },
  {
    "id": 2,
    "text": "기능 구현 해보자...",
    "like": false
  }
]

• mock data를 활용하기 위해 commentData.json 파일을 만든 후
  commentData.json 위치 - public 폴더 > data 폴더 > commentData.json

public 폴더의 역할

• 웹을 배포한다는 것은 특정 폴더를 서버 컴퓨터에 올려두는 것을 의미
• CRA로 만든 프로젝트를 배포 했을 때, 실제 서버에 배포되는 폴더가 public폴더
• 따라엇 우리 서버 주소로 접근하면(개발서버의 경우 http://localhost:3000) public 폴더에 들어가는 것과 동일

mock data 호출

http://localhost:3000/data/commentData.json 를 API 주소로 생각하고 http 요청을 통해서 API 요청을 보내고 응답을 받아보자

//feed.js
import ...

const Feeds = ({ feeds }) => {
  const [chats, setChats] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/commentData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setChats(data);
      });
  }, []);

return(
  ...
  )
  
export default Feeds;

• javascript에서 http 요청을 보낼때는 fetch 함수를 사용한다.
• fetch 함수는 첫번째 인자로 http 요청을 보낼 API주소, 두번째 인자로 요청을 보낼때의 옵션들을 객체형태로 받는다.
• 우리가 json 파일을 저장해 둔 주소를 API주소로, 그리고 데이터를 가져오기 위한 요청 GET method를 활용해 요청을 보낸다,
• 데이터를 요청하는 시점을 특정해야하는데, 여기서는 useEffect 훅을 활용하여 컴포넌트가 렌더링 된 이후 데이터를 요청, 요청이 성공적으로 완료되면 setChats 함수를 사용하여 chats state 를 응답 받은 값으로 바꿔준다.

이제 백엔드 API가 완성될 때 까지 기다리지 않고 mock data를 이용해서 백엔드 API를 모방해서 프론트엔드 개발을 진행할 수 있다...!