Mock Data 🐾

Bonnie RyuΒ·2020λ…„ 11μ›” 12일
1

차근차근 React 🐾

λͺ©λ‘ 보기
8/10

1. mock data

  1. mock dataλž€?
  • mock: κ±°μ§“λœ, κ°€μ§œμ˜
  • μ΄λ¦„μ—μ„œ μ•Œ 수 μžˆλ“―μ΄ mock data λŠ” κ°€μ§œ 데이터, μƒ˜ν”Œ 데이터
  • 즉, μ‹€μ œ API μ—μ„œ λ°›μ•„μ˜¨ 데이터가 μ•„λ‹Œ ν”„λ‘ νŠΈμ•€λ“œ κ°œλ°œμžκ°€ ν•„μš”μ— μ˜ν•΄ μƒ˜ν”Œμš©μœΌλ‘œ λ§Œλ“  데이터
  1. mock dataκ°€ ν•„μš”ν•œ 이유
  • API κ°€ 아직 쀀비쀑인 경우

    :: ν”„λ‘œμ νŠΈ 진행 μ‹œ APIκ°€ λ‚˜μ˜€κΈ° 이전에 νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒμ΄ λ¨Όμ € λ‚˜μ˜€λŠ” κ²½μš°κ°€ λ§Žλ‹€. μ΄λŸ¬ν•œ κ²½μš°μ—λŠ” λ°±μ—”λ“œμ—μ„œ APIκ°€ λ‚˜μ˜¬ λ•ŒκΉŒμ§€ λ¬΄μž‘μ • κΈ°λ‹€λ¦¬λŠ” 게 μ•„λ‹ˆλΌ, mock dataλ₯Ό λ§Œλ“€μ–΄ 데이터가 λ“€μ–΄μ˜€λŠ” 상황을 미리 λŒ€λΉ„ν•˜κ³  UIκ°€ κΈ°νšμ— 맞게 κ΅¬ν˜„λ˜λŠ”μ§€ λ¨Όμ € 확인해야 ν•œλ‹€.

  • Backend μ™€μ˜ μ›ν™œν•œ μ˜μ‚¬μ†Œν†΅μ„ μœ„ν•¨

    :: μ£Όκ³  λ°›λŠ” 데이터가 μ–΄λ–€ ν˜•νƒœμΈμ§€, key-value 값을 미리 맞좰볼 수 μžˆλ‹€.

2. mock data 관리 방법

data.js & data.json

πŸ“‚ data.js

🧷 data.js μœ„μΉ˜
ν•΄λ‹Ή μ»΄ν¬λ„ŒνŠΈ λ°”λ‘œ μ˜†μ— λ§Œλ“€μ–΄μ„œ, λ°”λ‘œ μ ‘κ·Όν•˜κΈ° μ‰½κ²Œ!

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;

🧷 app.js

import React from 'react';
import DATA from 'data.js';

πŸ“‚ data.json

🧷 data.json μœ„μΉ˜

  • public 폴더 > data 폴더 > data.json

🧷 data.json

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

🧷 app.js

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
profile
Ryuwisdom

0개의 λŒ“κΈ€