Mockoon을 활용한 프론트엔드 개발 효율성 향상: 가상서버 및 Proxy 설정

1. Mockoon이란?

Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다. (출처 : https://mockoon.com/)

Mockoon을 사용하는 이유

문제 발생

시작은 개발을 진행하면서 일반적인 플로우는 아래와 같을 것이다.

 

 

(2~3번이 바뀔 수 있고, 같이 진행될 수 있지만...)

 

하고 싶은 말은 백엔드가 만들어져야 프론트엔드가 확실하게 만들어진다. 이다.

현재 우리 팀은 프론트엔드는 백엔드가 작업을 할 때 퍼블리싱을 하고, json파일을 만들어서 필요한 데이터를 임시로 만들어서 작업을 한 후 백엔드가 완료가 되면 프론트에서 API를 연결하여 실제 백엔드에서 오는 요청에 따라서 처리하는 과정으로 만들고 있다.

 

 

위와 같은 병목 현상이 있었고, 임시 데이터를 실제 API 및 실제 요청 데이터로 바꾸면서 생기는 에러, 딜레이(정적인 데이터가 아니라 요청해서 가져오는 과정이기 때문에...)를 컨트롤할 수 없고 API가 완성된 후 다시 시간을 들여서 고쳐야 했다.

해결 방법

위의 문제를 파악한 후 들은 생각은 아래와 같다.

실제 백엔드 API와 같은 결과를 줄 수 있는 서버를 열어서 프론트에서 요청과 응답으로 확실하게 화면을 만들기

그러면서 한편으로 생각한 것은 당장 프론트도 만들기 벅찬데 무슨 서버까지 관리를 하냐... 그러면서 Mocking에 대해서 찾아보던 중 Mockoon에 대해서 알게 되었다.

Mockoon은 무엇인가?

Mockoon의 핵심 기능은 처음 설명한 것과 같다. 로컬 환경에서 REST API 모킹을 할 수 있다는 것이다.

쉽게 말하면 API가 없지만 만들어서 쓸 수 있다는 것이다.

Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다.

 

1. 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있다.

 

나는 Mockoon을 처음 보자마자 POSTMAN이 떠올랐다. 그래서 간단한 기능을 쉽게 쓸 수 있을 것이라 생각했다. (앱을 설치해서 사용한다. CLI로도 사용할 수 있다.)

우리 팀은 프론트랑 백엔드랑 분리되어 있으며 프론트에서 API를 요청하는 곳이 DEV환경 서버에 직접 요청해서 가져온다. 그래서 dev환경 서버에 배포되어 있지 않은 API를 접근할 수 없다.

하지만 Mockoon을 이용하면 간단하게 로컬환경에서 서버를 열고, 해당 서버에 엔드포인트를 만들어서 요청을 하고 받을 수 있다.

 

 

get요청으로 /newTest로 엔드포인트를 지정해서 만든 것이다. 왼쪽에 보면 localhost:5555로 서버가 되어있는 것이 보일 것이다.

즉, newTest는 http://localhost:5555/newTest 로 요청을 보내면 {"test":true}를 응답으로 받는 것이다.

이렇게 간단하게 로컬환경에서 설정 및 사용할 수 있다. (뒤에서 자세히 설명할 예정)

2. OpenAPI 사양과 호환

 

Swagger에서 캡처한 화면이다.
여기서 OAS3가 핵심인데, OAS는 OpenAPI Specification 3.0으로 RESTful API를 위한 표준 언어에 구애받지 않는 인터페이스 정의이다. 이 사양을 통해 사람과 컴퓨터 모드 소스코드, 추가문서, 네트워크 트래픽 검사 없이도 서비스의 기능을 발견하고 이해할 수 있다.

Swagger는 OpenAPI 사양을 활용한 것이고 이걸 Mockoon에서도 사용할 수 있다는 의미이다.

 

 

 

2. Mockoon-설치

1. Mockoon 설치

1-1. 설치하기

https://mockoon.com/

 

공식 홈페이지에서 다운로드를 이용해서 진행할 수 있다.

 

 

각 OS에 맞는 앱을 설치하거나, CLI 환경을 이용해서 사용할 수 있다.

나는 앱을 설치해서 사용했고, Docs 기능별로 CLI를 사용하는 방법도 있으니 찾아보면서 하면 어렵지 않을 것이다.

 

2. Mockoon 세팅

2-1. 기본 세팅

setting 탭에서 5555라고 쓰여있는 곳이 port를 의미하는 것이다.
로컬 환경에서 mocking을 위한 툴이기 때문에 localhost:port로 진입이 가능하다.

중요 !! : Router 탭 옆에 재생버튼을 눌러야 서버가 열린다. 

 

2-2. router 설정

기본적인 router는 +를 이용해서 HTTP route로 설정할 수 있다.
Method를 선택하고, End-Point를 지정한 후 응답 body를 작성해 주면 된다.
원한다면 응답 코드도 바꿀 수 있고, 중간에 Response 1 옆의 + 를 이용하면 여러 시나리오를 만들 수 있다.

200, 401,404 등등... 그리고 사용해보지 않았지만 응답을 랜덤 하게 주는 것도 가능해서 랜덤 한 응답에 대응하는 것도 미리 구현할 수 있는 것 같다.

이렇게 하면 기본적인 http:localhost:5555/newTest 라우터가 완성됐다.

 

2-3. Header 설정

작업을 하면서 CORS error가 발생해서 해결하기 위해 Header에 설정을 추가해 줬다.

Header 탭을 이용해서 모든 요청에 대해서 지정한 Header를 포함해서 작성할 수 있다. 하단에 있는 CORS headers 버튼만으로도 한 번에 다 추가되니 값만 원하는 대로 바꿔서 사용할 수 있다.

 

 

2-4. Swagger에 만들어진 API를 Mockoon에 사용하기

사용하는 swagger 주소에 -json을 붙이면 JSON 형태로 나온다.

https://example.swagger-json  << 이런 식으로..

 

JSON으로 작성된 내용

이 내용을 .json파일로 만든다.

 

import를 이용해서 Swagger에서 가져온 json을 넣어주면 Mockoon에서 쓸 수 있는 .json 형태로 다시 변환해 준다.

mockoon.json(mockoon으로 변환한 JSON)에는 port 등 기본적인 설정이 되어 있기 때문에 git을 이용해서 공유해서 팀원들끼리 공유도 쉽게 가능하다.

swagger.json -> mockoon.json으로 변환해서 mockoon.json 파일을 열면 사용 가능하다.

 

 

2-5. Proxy 설정

Mockoon을 사용하고자 하는 이유 중 가장 큰 이유를 차지하는 Proxy기능이다. Proxy 설정을 이용해서 실제 서버와 Mockoon을 동시에 사용하면서 Mockoon이 일종의 Proxy서버의 역할을 하게 되는 것이다.

2-4에서 이미 정의되어 있는 API를 Swagger.json으로 사용하는 방법을 적었지만, 나는 쓰지 않고 있다.

내가 쓰는 방법은 Proxy 설정을 활성화하고 TargetURL을 지정한다.

 

 

 

Proxy탭에서 Target URL을 지정하고 Enable proxy mode를 체크하여 활성화해 준다.
Proxy 설정이 되어있는지 확인하는 방법은 좌측에 서버 이름 옆에 마크유무에 따라서 활성화상태인지 아닌지 확인할 수 있다.

Proxy 설정을 해서 얻는 가장 큰 장점은 기존에 완성되어 있는 API를 그대로 쓸 수 있다. 는 점이다.

Mockoon을 통해 가상서버를 실행할 때, 지정된 엔드포인트가 없는 경우 요청이 TargetURL로 전송된다.
이 방식을 통해 백엔드 개발이 완료되기 전에 요청경로와 응답데이터를 설정하여 실제 요청 경로로의 요청/응답 처리 로직을 개발할 수 있다.

 

실제 개발 중인 페이지에서 DevTools의 네트워크 탭

 

Mockoon 라우터

위의 사진은 localhost:5555에서 요청/응답을 받은 결과물이다. 200으로 성공적으로 응답을 받았다. 하지만 아래 mockoon에 세팅되어 있는 라우터는 /newTest 1개밖에 없다.

 

이 결과물이 Proxy를 이용한 것이다. /client/~~ 로 요청했지만, Mcokoon에는 엔드포인트가 없기 때문에 지정해 놓은 target URL인 실제 API에 요청을 해서 응답을 전달해 준다.

 

 

 

3. Mockoon 활용 후

Mockoon을 활용한 개발 프로세스

Mockoon의 여러 특징과 장점을 활용하여 우리 팀의 프론트엔드의 개발 프로세스가 아래와 같은 플로우로 바뀌었다.

 

 

백엔드가 완성되기 전에 작업을 진행해야 하는 경우나, 가상 서버를 세팅해서 요청/응답 로직이 필요하다면 Mockoon을 활용하는 방법을 생각해 보면 좋을 것 같다.