1. mock data

1-1. mock data란?

• mock: 거짓된, 가짜의
• 이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.
• 즉, 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말한다.

1-2. mock data를 사용하는 이유

프론트엔드 개발을 진행하려하는데 필요한 백엔드 API가 미완성 되었을 수도 있다.

이러한 경우에는 백엔드에서 API가 완성될때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 데이터에 맞게 UI가 의도한대로 구현되는지 먼저 확인해야 한다.

특히나 프로젝트를 진행하는 경우 백엔드 API 유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감이다.

또한 mock data를 만드는 과정에서 백엔드 API에서 보내주는 response가 어떤 형태인지, key-value값을 확인하고 미리 mock data와 백엔드 response의 형태를 맞춰보면서 개발을 진행한다면 추후 실제 API를 훨씬 수월하게 연결할 수 있다.

2. mock data 활용 예제

2-1. 댓글 예제

• 댓글은 UI에 사용되고 변화하는 값이다. React에서는 이런 값들의 경우 state로 관리하면서 state의 변화를 통해 UI를 변화시킨다.
• 댓글 목록을 http통신을 이용해 백엔드 API를 요청, 응답을 통해 가져오고 그걸 댓글 state의 초기값으로 사용하면 유저가 페이지에 들어왔을 당시의 최신 댓글정보를 가져와서 UI에 보여줄 수 있다.
• 하지만 백엔드 API 개발이 완료되지 않았을 수도 있다. 이러한 경우에 mock data를 만들어서 백엔드 API를 모방할 수 있다.
• mock data는 백엔드 API를 모방하기에 실제 백엔드 API에서 응답값의 형태인 json 파일로 만들어줘야 한다.

2-2. mock data 생성

• commentData.json
  

    [
      {
        "id": 1,
        "userName": "wecode",
        "content": "Welcome to world best coding bootcamp!",
        "isLiked": true
      },
      {
        "id": 2,
        "userName": "joonsikyang",
        "content": "Hi there.",
        "isLiked": false
      },
      {
        "id": 3,
        "userName": "jayPark",
        "content": "Hey.",
        "isLiked": false
      }
    ]

• mock data를 활용하기 위해 commentData.json 파일을 만들었다.
  • commentData.json 위치 - public 폴더 > data 폴더 > commentData.json
• public 폴더의 역할
  • 우리가 웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것을 의미한다.
    • 서버의 특정 url로 접근하면 경로에 해당하는 폴더의 파일을 요청한다.
      - 만약 url에 html 파일을 특정하지 않으면 index.html 이 요청된다.
      • e.g.) [https://naver.com](https://naver.com) → 로 접근하면 naver.com에 연결되어있는 서버 컴퓨터의 폴더에 접근해서 index.html을 가져오는 것
    • 우리가 CRA로 만든 프로젝트를 배포 했을 때, 실제 서버에 배포되는 폴더가 public 폴더이다.
    • 따라서 우리 서버 주소로 접근하면(개발 서버의 경우http://localhost:3000) public 폴더에 들어가는 것과 동일하다.
    • 예로, public/data/commentData.json 파일을 만들어두면, 서버 url을 통해 해당 파일에 접근할 수 있다.
      • 실제로, comentData.json 파일을 만들고, npm start로 개발 서버를 실행한 후, http//localhost:3000/data/commentData.json 을 브라우저 주소창에 입력하면 우리가 작성해 둔 데이터가 응답으로 오는 것을 볼 수 있다.
    • 해당 데이터는 브라우저에서 http://localhost:3000/data/commentData.json 주소를 입력하여 확인해볼 수 있다.(port number 3000은 변동될 수 있습니다. 에러가 나는 경우 확인해볼 것)

2-3. mock data 호출

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

    import React, { useState, useEffect } from 'react';
    import Comment from './Comment/Comment';
    import './CommentList.scss';
    
    function CommentList() {
      const [commentList, setCommentList] = useState([]);
    
      useEffect(() => {
        fetch('http://localhost:3000/data/commentData.json', {
          method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. 
        })              // 예시코드에서는 이해를 돕기 위해 명시적으로 기입해뒀습니다.
          .then(res => res.json())
          .then(data => {
            setCommentList(data);
          });
      },[])
    
      return (
        <div className="commentList">
          <h1>Main Page</h1>
          <ul>
            {commentList.map(comment => {
              return (
                <Comment
                  key={comment.id}
                  name={comment.userName}
                  comment={comment.content}
                />
              );
            })}
          </ul>
        </div>
      );
    }
    
    export default CommentList;

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