(TIL 29일차) 스타일쉐어 1차 프로젝트 OOTD (3)

프론트 쪽에서 만드는 가짜 데이터(Mock data)

Mock data란?

• Mock : 거짓된, 가짜의
• 즉, 샘플 데이터로 해석, 협업 과정에서 백엔드 개발자가 API 구현이 덜 됐을 경우를 대비해 먼저 mock data를 사용하여 구현

Mock data의 역할

• UI 구성을 미리 하며 map 함수(컴포넌트)를 구현해 놓고 나중에 API 경로만 설정해 줌
• 프로젝트를 하는 경우 API가 먼저 나오는 경우가 드물기 때문에 프론트엔드 개발자는 먼저 레이아웃을 구성하고 상황을 미리 분석하는 과정 필요

---

Mock data를 사용하는 2가지 방법

1. js파일에 json 데이터를 작성하여 import 하는 방법

• 위치는 자유롭지만 접근하기 쉬운 경로

const SlickData = [
  {
    id: 1,
    skills: "HTML"
  },
  {
    id: 2,
    skills: "CSS"
  },
  {
    id: 3,
    skills: "JavaScript"
  },
  {
    id: 4,
    skills: "React"
  },
  {
    id: 5,
    skills: "React Native"
  },
  {
    id: 6,
    skills: "Angular"
  },
  {
    id: 7,
    skills: "Vue"
  },
  {
    id: 8,
    skills: "Redux"
  },
  {
    id: 9,
    skills: "TypeScript"
  }
];

export default SlickData;

// mock data 사용하는 js파일
import React from 'react';
import DATA from 'data.js';

2. data.json 파일을 직접 생성하여 사용

• 1번 방법과 다르게 public > data > data.json 으로 구성

{
  "data": [
    {
      "id": 1,
      "name": "yang",
      "age": 30
    },
    {
      "id": 2,
      "name": "kim",
      "age": 29
    }
  ]
}

import React, { Component } from 'react'

export class Main extends Component {
  constructor(){
    super();
    this.state = {
      data: []
    };
  }

  componentDidMount = () => {
    fetch('http://localhost:3002/data/data.json')
      .then(res => res.json())
      .then(res => {
        console.log("firstly: ", res.data)
        this.setState({
          data: res.data
        }, () => {
          console.log("secondly: ", this.state.data)
        })
  })
}

  render() {
    console.log("thirdly: " , this.state.data)
    return (
      <div>
        hello
      </div>
    )
  }
}

export default Main

---

• https://velog.io/@joonsikyang/ReactMock-Data
  준식님 블로그