- 프론트앤드에서 서버와의 통신을 위해서 API 통신을 해야한다.
- 서비스의 규모가 커지면 몇 사람이 프론트앤드와 백앤드 모든 것을 할 수 없기 때문에 프론트앤드와 백앤드를 분리한다. 그러면 프론트앤드 엔지니어는 프론트앤드만 담당하고 백앤드 엔지니어는 백앤드만 담당하며 각각의 영역에 최적화된 생각을 하고 서로 독립된 방식으로 개발할 수 있다.
- 프론트 앤드의 처리를 하기 위해서는 백앤드에서 데이터를 받아와야 한다. 대부분의 프론트앤드에서는 서버와의 통신을 위해서 AJSX라는 기술을 사용하는데, 간단히 말해서 Axios, fetch API, XMLHttpRequest를 사용하여 서버와 통신을 하는 기술이다.
- 그런데 백앤드에서 어떤 문제가 발생해서 API를 통신할 수 없는 상황이 생겼을 때, 또는 어떤 기능을 개발해야 하는데 백앤드에서 아직 기능이 구현되지 않은 경우 프론트앤드는 백앤드와 통신을 할 수 없기 때문에 개발의 진행이 막힐 수 있다. 백앤드의 개발 상황에 따라 프론트앤드 개발이 잘 이뤄지지 않는 경우가 발생할 수 있다.
- 이런 문제를 해결하기 위해서 백앤드의 상황에 관계 없이 백앤드와의 통신을 할 수 있는 기능을 개발할 필요가 있다. 이 방법으로는 백앤드의 통신을 따라하는 모의 API 프로토콜을 만드는 것이다.
- 프론트앤드에서 백앤드로 통신을 하기 위해서는 통신을 위한 프로토콜이 필요하다. 예를 들어 아이디, 비밀번호를 통신을 해야 한다고 생각해 보자.
리퀘스트
{
"user_id": "hello@world.email",
"password": "hello&World"
}리스폰스
{
"access_token": "123456789"
}- 위의 예시는 리퀘스트와 리스폰스의 프로토콜의 예시이고 백앤드와 프론트앤드는 이런 통신 프로토콜을 미리 정하여 백앤드에서 아직 기능을 제공하지 않은 상황에서도 프론트앤드가 위 프로토콜에 맞게 코드를 만들 수 있다.
- 하지만 프론트앤드의 코드에서 위 프로토콜로 통신을 하기 위해서는 위의 프로토콜을 모의한 가짜 서버를 만들어야 한다.
- 가짜 서버는 간단하게 만들 수 있어야 하며 직관적으로 이해가 쉬워야 한다. - 프로그래밍 언어에서 가짜 대상을 만드는 것을 모의라고 하며 영어로는 mock이라고 부르는데, 이 가짜 서버는 모의 서버라고 해서 mock API라고 부른다.
- 모의 리퀘스트와 리스폰스를 만드는 방법으로는 서버를 만드는 방법과 서버를 만들지 않는 방법이 있다.
- 서버를 만드는 방법으로는 대표적으로 일반적인 서버를 만드는 프로그램인 express를 사용해서 모의 객체를 만드는 방법이 있으며, 모의 리퀘스트 리스폰스를 만드는데 특화된 json-server라는 서버를 여는 방법이 있다.
- express 및 json-server 모두 깃허브에서 상당히 많은 스타수를 가지고 있으며, 범용 서버를 만드는 express의 경우 62k, 특정 API의 페이크 객체를 만드는 json-server의 경우 69k의 스타수를 가지고 있다. (23년 10월 기준)