Mock Data

박은정·2021년 8월 23일

프로젝트

목록 보기

4/34

Mock Data

mock : 거짓된, 가짜의
가짜 데이터, 샘플 데이터
~~실제 API에서 받아온 데이터가 아닌~~ 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터

Mock Data 사용하는 이유

프론트엔드 개발을 진행하려고 하는데 필요한 백엔드 API가 완성이 안되었을 때
~~백엔드에서 API가 완성될 때까지 무작정 기다리는 것이 아니라~~
Mock Data를 만들어 데이터가 만들어오는 상황을 미리 대비하고
데이터에 맞게 UI가 의도한 대로 구현되는지 먼저 확인해야 한다

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

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

댓글기능 Mock Data

댓글은 UI에 사용되고 변화하는 값이다
React에서는 이런 값들의 경우 state로 관리하면서 state의 변화를 통해 UI를 변화시킨다

댓글목록을 http통신을 이용해 → 백엔드 API를 요청 및 응답해서 가져오고
그것을 댓글 state의 초기값으로 사용하면
유저가 페이지에 들어왓을 당시의 최신 댓글정보를 가져와서 UI에 보여줄 수 있다

이러한 백엔드 API 개발이 완료되지 않았을 때 Mack Data를 만들어서 백엔드 API를 모방할 수 있는데
실제 백엔드 API에서 응답값인 형태인 json 파일로 만들어줘야 한다

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
    }
]

commentData.json 의 위치 : public 폴더 > data 폴더 > commentData.json 파일

public 폴더의 역할

우리가 웹을 배포한다 = 특정 폴더를 서버 컴퓨터에 올린다

서버와 연결된 특정 url로 접근하면 → 해당 폴더의 파일을 요청할 수 있다
: 뒤에 따로 추가적인 url을 붙이지 않으면 index.html을 요청한다
예) https://naver.com 로 접근할 때 naver.com에 연결되어있는 서버 컴퓨터의 폴더에 접근해서 index.html을 가져오는 것이다
우리가 CRA를 배포했을 때, 실제 서버에 배포되는 폴더는 public 폴더이기 때문에
→ 우리 서버 주소로 접근하면 public폴더에 들어가는 것과 동일하다
(개발서버: http://localhost:3000)

우리가 public에 특정 디렉토리, 파일을 만들어주면 서버 url을 통해서 접근이 가능하다

해당 commentData.json 은 http://localhost:3000/data/commentData.json 주소를 입력하면 확인이 가능하다
~~port number 3000은 변동될 수 있어서 에러가 나는 경우 확인해야 한다~~

commentList.js

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

import React, {Component} from 'react';
import Comment from './Comment/Comment';
import './CommentList.scss';

class CommentList extends Component {
    constructor() {
        super();
        this.state = {
            commentList: [],
            commentValue: ''
        };
    }

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

    render() {
        const {commentList, commentValue} = this.state;

        return (
            <div className="comment">
                <h1>Main Page</h1>
                <ul>
                    {
                        commentList.map(comment => {
                            return (
                                <Comment key={comment.id} name={comment.userName} comment={comment.content}/>
                            );
                        })
                    }
                </ul>
                <div className="commentInput">
                    <form onSubmit={this.addComment}>
                        <input
                            onChange={this.handleCommentValue}
                            type="text"
                            placeholder="enter comment"
                            value={commentValue}/>
                        <button className="addCommentBtn" type="submit" onClick={this.addComment}>
                            Click
                        </button>
                    </form>
                </div>
            </div>
        );
    }
}

export default Comment;

javascript 에서 http 요청을 보낼 때에는 fetch() 함수를 사용한다
- 첫번째 인자 : http 요청을 보낼 API 주소
- 두번째 인자 : 요청을 보낼 때의 옵션들을 객체 형태
json 파일을 저장해둔 주소를 API 주소로, 그리고 데이터를 가져오기 위한 요청이라
GET 메서드를 활용해서 요청을 보낸다

fetch('http://localhost:3000/data/commentData.json', {method: 'GET'})

데이터를 요청하는 시점을 특정해야 하는데,
여기서는 componentDidMount() 메서드를 활용해서
component가 mount되는 시점에 데이터를 요청하고 → 요청이 성공적으로 완료되면
setState() 메서드를 통해서 → commentList의 state를 요청의 응답값으로 바꿔준다