Westagram Mock Data 처리

프론트엔드 개발을 하다보면 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있다. 이런 경우 데이터가 원활히 들어와 의도한 UI를 만들어 내는지 확인해보기 위해 Mock(모조, 거짓) Data를 활용하여 개발을 진행한다.

모조 데이터는 실제 서버에서 보내주는 데이터 형식과 동일하게 만들어야 하기 때문에
.Json 확장자 파일로 Json형식의 데이터를 생성한다.

아래와 같이 예시로 Json 형식의 데이터를 만들어 보았다.

[
  {
    "id": 1,
    "name": "haydenMoon127",
    "img": "images/bosungMoon/me.jpeg",
    "postImg": "images/bosungMoon/wine.jpeg",
    "defaultComment1": "위워크는 어떠신가요?",
    "defaultComment2": "힘내요 화이팅"
  },
  {
    "id": 2,
    "name": "JasonMoon815",
    "img": "images/bosungMoon/coffee.jpg",
    "postImg": "images/bosungMoon/beer.jpeg",
    "defaultComment1": "프로젝트 화이팅",
    "defaultComment2": "한달간의 여정 할수있어"
  },
  {
    "id": 3,
    "name": "johnsonMoon1014",
    "img": "images/bosungMoon/kimbob.jpg",
    "postImg": "images/bosungMoon/hotel.jpeg",
    "defaultComment1": "여태까지 잘 해왔자나",
    "defaultComment2": "1년 2년 차근히 꾸준히"
  }
]

예시로 준비한 Mock Data를 위스타 그램 피드에 접목해 보겠다.

우선 feed.js 파일의 부모인 Main.js에 UseEffect와 feach를 통해 Mock데이터를 호출 및 가공 해준다.

  useEffect(() => {
    fetch('/data/FeedMockData.json')
      .then(response => response.json())
      .then(result => setFeedDataList(result));
  }, []);

그리고 아래와 같은 useState와 map 매서드를 통해 자식 테그에 props할 Jason 객체를 만들어 준다.

  const [feedDataList, setFeedDataList] = useState([]);

      <div className="main">
        <div className="feeds">
          {feedDataList.map((result, i) => {
            const feed = feedDataList[i];
            return <Feed key={i} feed={feed} />;
          })}
        </div>

여기서 map 밖에 div를 준 이유는 피드 scss에 flex를 줘서 세로 나열을 하기 위함이다.

이제 자식 테그인 feed.js로 가서 props를 넣어주고

const Feed = ({ feed }) => {

데이터가 들어가야할 테그에 아래와 같이 데이터를 넣어준다.

{feed.name}
{feed.img}
{feed.postImg}

배운점

State, Props, Map, UseEffect, Feach에 대한 이해도가 조금씩 올라가고 있지만, 응용까지 하기엔 역량의 부족함을 느끼고 있다. 전체적인 강의를 다시 들어보면서 손으로 코드를 하나하나 쳐보는 연습이 필요하다고 생각한다.

오늘과 내일은 구현한 기능들을 반복 연습 하고, 이후에 있을 Monster 과제를 통해 위의 부족한 부분들을 포괄적으로 복습할 기회가 있으니 주말동안 과제를 통해 코드에 익숙해 지도록 해보겠다.

꾸준히 성장하는 개발자가 되겠다!