Mock Data

프론트엔드 개발자가 샘플로 만들어 본 데이터

Mock Data를 사용하는 이유

• 백엔드 API가 완성되기 전에 프론트엔드 개발을 진행하려고 할 때 사용한다. 가짜 백엔드 API 데이터!

• 백엔드 API에서 보내주는 데이터와 response가 어떤 형태고, key와 value 값을 mock data를 통해 미리 시뮬레이션 한다.

사용 방법

• 댓글 목록을 http통신을 이용해 백엔드 API를 요청, 응답을 통해 가져오고 그걸 댓글 state의 초기값으로 사용하면, UI는 페이지에서 가장 최신 댓글을 불러 올 수 있다.

• 하지만 동적인 댓글 데이터를 백엔드 API 개발 전에 사용하려면 mock data가 필요하다. 이 때 mock data는 실제 백엔드 API 응답값의 형태인 json 파일로 만들어야 한다.

• Mock Data는 public 폴더 안에 data 폴더를 따로 만들어서 저장시킨다. 왜냐하면 public 폴더는 실제 서버에 배포되는 폴더이기 때문이다. 마찬가지로 naver 홈페이지에 들어가는 건 naver.com에 연결 된 index.html을 가져오는 것과 같다.

• 웹페이지의 mock data는 http://localhost:3000/data/mock data 파일 이름 으로 검색하면 볼 수 있다.

• 자바스크립트에서 http 요청을 보낼 때는 fetch 함수를 사용한다.

• fetch 함수는 첫번째 인자로 http 요청을 보낼 API 주소, 두번째 인자로 요청을 보낼 때의 옵션들을 객체 형태로 받는다.

function ReviewList() {
  const [reviewList, setReviewList] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/reviewData.json', {
      method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. 
    })              // 예시코드에서는 이해를 돕기 위해 명시적으로 기입해뒀습니다.
      .then(res => res.json())
      .then(data => {
        setReviewList(data);
      });
  },[])

• useEffect 훅을 활용하여 컴포넌트가 렌더링 된 이후 데이터를 요청한다. 데이터 요청이 성공하면 setReviewList 함수를 사용해서 reviewList state를 응답 받은 값으로 바꾼다.