mock data
프론트엔드 개발을 진행하다 보면, UI 구성에 필요한 백엔드 API 가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있다.
이런 경우 백엔드에서 API가 완성될 때 까지 무작정 기다리는 게 아니라, 데이터가 들어오는 상황에 대비해 의도한 대로 UI 가 구현되는지 확인해야 한다.
이때 사용되는 데이터가 MOCK(모조, 거짓 ) data 이다.
즉, 실제 api 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터가 바로 MOCK DATA 이다.
사용 이유
백엔드 API 가 미완성인 상황에서 mock data 를 사용하지 않는다면, 실제 data 들이 들어올 부분들을 하드코딩으로 대체하고 작업을 진행하게 된다. mock data 사용없이 개발을 진행한다면 여러 문제가 발생하게 된다.
개발이 진행됨에 따라 코드가 많이 확장된 상태이기 때문에, 백엔드 api가 완성되고 실제 데이터를 반영하는 작업을 수행할 때 번거로울 수 있다. 또한, 실제 데이터에서는 존재하지 않는 값을 토대로 UI 를 그렸거나, 반대로 실제 데이터를 기반으로 작업해야 하는 내용이 누락되었을 수도 있다.
- 백엔드 API 미완성인 상태에서도 작업에 차질 업이 개발 가능
- 백엔드 API 구성을 미리 맞춰 볼 수 있음.
- 실제로 API 통신을 진행할 때 원할하게 할 수 있음.
mock data 생성
실제 서버에서 보내주는 데이터의 형시과 동일하게 만들어야 하기 때문에 .json 확장자 피일로 json 형식의 데이터를 생성한다.
실제로 들어올 데이터의 형태에 맞게 객체 혹은 배열 안에 가짜 데이터를 구성하게 되는데, 이때 백엔드 개발자와 소통해 key-value 값을 동일하게 맞추어 추후 실제로 API 통신을 원할하게 진행할 수 있도록 한다.
mock data 를 .js 파일의 상수 데이터가닌 .json 파일로 만드는 이유는 서버에서 받아올 데이터의 모조 데이터인 만큼 프론트엔드 개발자가 로컬 서버에서 mock data 를 받아오도록 구현해야 하기 때문이다.
mock data 위치
mock data 파일의 위치는 npm start 시 로컬 서버에 올라가는 폴더인 public 폴더 하위 에서 관리 해야한다. public 폴더 하위에 data 폴더를 생성한 후 해당 폴더에서 mock data 를 관리 한다.
mock data 사용
mock data 는 실제 데이터와 동일하게 fetch 메서드에서 호출 한다.
실제로 백엔드 서버와 통신을 할때 fetch 메서드의 첫 번째 인자로 http 요청을 보낼 api 주소를 받는데, 프론트엔드가 그전에 따로 만든 mock data 의 주소를 입력한다..
두번째 인자는 요청을 보낼 때의 옵션 객체를 전달하는 부분이다.
위사진에서는 서버로부터 데이터를 받아오는 GET 요청이기 때문에 method 옵션에 GET 이라고 명시해 주었다.
(PATCH, DELETE, POST 등 다양한 method 들이 있다. )
json 형태의 response 데이터를 자바스크립트 객체 형태로 바꾸어준 다음, 받아오 데이터를 화면에 그려주기 위해 productList state 를 업데이트 해준다.
호출 시점
mock data 를 받아오는 시점은 실제로 데이터를 불러오는 시점이 언제인지에 따라 다른다. 버튼을 클릭했을 때 받아와야 하는 경우도 있고, 페이지를 불러올 때 바로 화면에 그려줘야 하는 경우도 있다.
위 사진 에서는 페이지를 불러올 때 화면을 그려줘야 하기때문에
useEffect hook 을 통해 컴포넌트가 마운트 된 후 한번만 데이터를 받아오도록 한다.
정리
- mock data 는 실제 api 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 모조 데이터 이다.
- mock data 를 활용하면 백엔드의 api 가 미완성인 상태에서도 차질없이 개발을 진행 할 수 있고, api 구성을 미리 맞춰 볼수 있기 때문에 실제 api 통신을 원활하게 할 수 있다.
- mock data 는 public 폴더 하위의 data 폴더에서 관리 한다.
- 실제 데이터를 불러오는 시점에 fetch 메서드를 통해 mock data를 받아올 수 있도록 한다.
