Mock data

Mock data?

'가짜의' 란 뜻을 가진 mock의 의미를 가진 mock data는 샘플 데이터라고 볼 수 있다.
실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터

• mock data는 실제 백엔드의 API의 응답값 형태인 json 파일로 만들어줘야 한다.

---

Mock data를 사용하는 이유?

프론트에서 필요한 백엔드의 API가 아직 완성이 안되었을 때, 데이터를 기다리는 게 아니라 mock data를 만들어 상황에 미리 대비하고 의도한 대로 UI가 구현되는지 확인해야 하기 때문에 사용한다.

또한, mock data를 만드는 과정에서 백엔드에서 보내주는 데이터의 형식를 맞춰보면서 미리 확인한다면 수월하게 연결할 수 있다.

---

mock data 생성 & 호출

 

mock data를 생성한 모습

• 실제 백엔드에서 넘겨주는 정보의 데이터 형식처럼 나타내야 한다.

백엔드한테 데이터를 요청할 때는 fetch() 함수를 사용한다.

 

---

fetch()

fetch() 함수의 사용 방법은 다음과 같다.

1. 데이터를 가져오기 위해서 fetch()함수를 사용해 API주소와 가져올 방식을 설정한다.
2. 첫 번째 then함수를 사용해 API의 응답정보를 담은 객체인 response(res)를 사용하기 위해 response의 json함수를 호출한다.
   = API의 정보를 읽기 위해 json화 한다.
3. 두 번째 then함수에서 response를 사용할 기능을 설정한다.

fetch 메서드

• GET :데이터를 가져오기 위한 요청을 할 때 사용
• POST : 데이터를 등록할 때 사용
• DELETE : 데이터를 삭제할 때 사용

---

알아야 할 것!

자바스크립트의 함수는 위에서부터 아래로 차례대로 순서를 진행하는 동기적함수와 병렬적으로 진행하는 비동기적 함수로 나누어진다.
fetch() 함수는 병렬적으로 진행하는 비동기적인 함수이다.
그렇기 때문에 fetch함수에서 API를 호출하는 과정이 끝나지 않았더라도 다른 함수가 실행될 수 있기 때문에 순서가 섞일 수 있다. 이 과정에서 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 사용하여 순서를 고정시킬 수 있다.

---

추가로 알아보기
then이란?
fetch()이란?