Wecode 2차 프로젝트 시작전,
지금까지 사용하고 활용했던 부분들에 대해
정리하는 시간을 갖도록 해보겠습니다!

항상 탐구하고 기억할 수 있도록 노력하자👊

이번 1차 프로젝트인 스페이스 클라우드 같은 경우에는 그러지 않았지만,
UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우가 많습니다. 프론트엔드 개발자라면, API가 나오지 않더라도 mock data, 즉 가짜 데이터를 만들어서 미리 내가 만든 화면에서 데이터가 어떻게 나타나는지 테스트하며 개발을 진행할 수 있습니다. mock data를 잘 만들어 둔다면 백엔드와 실제 연결할 때도 수월하게 작업할 수 있을 뿐더러, 받기 원하는 자료의 형태가 구체적으로 특정되기 때문에 소통에도 도움이 됩니다.
이러한 소통은 시간을 단축해주고 데이터를 불러오는 방식에서의 오류
및 수정에 대한 리스크를 줄여줍니다.

Mock Data란?

정의

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

1-2. mock data가 필요한 이유

• API 가 아직 준비중인 경우
  프로젝트 진행 시 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많습니다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인해야 합니다.
  특히나 프로젝트를 진행하는 경우 Backend API 유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감 입니다.

• Backend 와의 소통이 효율적으로 이루어질 수 있습니다
  (예를들어, 주고 받는 데이터가 어떤 형태인지, key-value 값을 미리 맞춰볼 수 있습니다.)

Mock Data를 관리하는 방법

첫번째 방법 : .js파일로 데이터를 분리

• 첫번째 방법은 .js 파일로 데이터를 분리하는 방법입니다.
• js 파일은 어떤 데이터인지 알 수 있게 명명합니다.
• 배열 데이터를 변수에 담고 필요한 컴포넌트에서 import 해서 사용합니다.
• .js 파일은 데이터를 import 하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성합니다.

두번째 방법 : JSON파일로 데이터를 분리

• 두 번째는 실제 API 에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법입니다.
• 해당하는 데이터는 리액트 내에서 http://localhost:3000/(데이터주소)/ 를 통해서 확인할 수 있습니다.
• 해당 주소를 API 주소로 생각하고 fetch 함수와 http GET method 를 사용해 실제 API 에서 데이터를 받아오는 것처럼 코드를 작성합니다.

이번 프로젝트의 경우 두번째 방법을 활용하여 실제로 데이터를 받아왔을 때
좀 더 확실하게 문제없이 데이터가 들어오는걸 확인해 볼 수 있었습니다.

이상입니다~😎