Mirage.js를 사용하여 React 앱에서 모의 API를 구축하고 사용하는 방법

당신과 같은 독자들이 MUO를 지원하는 데 도움을 줍니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 읽어보세요.

풀스택 애플리케이션을 개발할 때 프런트엔드 작업의 상당 부분은 백엔드의 실시간 데이터에 의존합니다.

MUO 오늘의 영상 콘텐츠를 계속하려면 스크롤하세요.

이는 API를 사용할 수 있을 때까지 사용자 인터페이스 개발을 보류해야 함을 의미할 수 있습니다. 그러나 API가 프런트엔드를 설정할 준비가 될 때까지 기다리면 생산성이 크게 감소하고 프로젝트 일정이 연장될 수 있습니다.

이 문제에 대한 훌륭한 해결 방법은 모의 API를 활용하는 것입니다. 이러한 API를 사용하면 실제 API에 의존하지 않고도 실제 데이터의 구조를 모방하는 데이터를 사용하여 프런트엔드를 개발하고 테스트할 수 있습니다.

Mirage.js 모의 API 시작하기

미라지.js 웹 애플리케이션의 클라이언트 측에서 실행되는 테스트 서버를 갖춘 모의 API를 생성할 수 있는 JavaScript 라이브러리입니다. 즉, 실제 백엔드 API의 가용성이나 동작에 대해 걱정할 필요 없이 프런트엔드 코드를 테스트할 수 있습니다.

Mirage.js를 사용하려면 먼저 모의 API 엔드포인트를 생성하고 반환해야 하는 응답을 정의해야 합니다. 그런 다음 Mirage.js는 프런트엔드 코드가 생성하는 모든 HTTP 요청을 가로채고 대신 모의 응답을 반환합니다.

API가 준비되면 Mirage.js의 구성을 변경하여 API 사용으로 쉽게 전환할 수 있습니다.