Mocking 개념에 대해 알아보자

프로젝트를 하다 보면 프론트엔드와 백엔드 개발이 동시에 진행되는 경우가 많다. 하지만 백엔드 개발이 늦어지거나, 아직 구현되지 않은 기능 때문에 프론트엔드 개발이 멈추는 상황이 발생하기도 한다. 이때 개발 효율을 높이고 원활한 협업을 가능하게 하는 방법이 바로 Mocking을 활용한 개발이다.

 

가상의 백엔드를 만드는 Mock

Mock는 '가짜의', '모의의'라는 뜻을 가지고 있다. 소프트웨어 개발에서 Mock는 실제 시스템이나 컴포넌트가 아직 준비되지 않았을 때, 그 역할을 대신 수행하는 가상의 객체나 서버를 의미한다. 즉, 백엔드 개발이 완료되지 않았어도, Mock를 이용해 마치 백엔드가 완성된 것처럼 프론트엔드 개발을 진행할 수 있게 된다.

 

왜 Mock data를 사용해야 할까?

Mock 기반 개발은 다음과 같은 여러 장점을 제공한다.

1. 동시 개발: 프론트엔드와 백엔드 팀이 서로의 개발이 끝나기를 기다리지 않고 동시에 개발을 시작할 수 있다. 백엔드 팀은 실제 로직을 구현하는 동안, 프론트엔드 팀은 Mock 데이터를 기반으로 화면을 구성하고 기능을 개발한다.
2. 개발 속도 향상: 백엔드 개발이 지연되더라도 프론트엔드 개발은 Mock 데이터를 사용하여 계속 진행할 수 있다. 이는 전체적인 프로젝트 개발 기간을 단축하는 데 기여한다.
3. 의존성 감소: 실제 백엔드 시스템의 복잡한 설정이나 데이터베이스 연결 등의 환경에 얽매이지 않고 개발 및 테스트를 진행할 수 있다. 이는 개발 환경 설정에 드는 시간을 줄여준다.
4. 테스트 용이성: 특정 시나리오나 에러 상황을 Mock 데이터를 통해 손쉽게 재현하고 테스트할 수 있다. 예를 들어, 네트워크 오류나 특정 데이터가 없는 경우 등 실제 백엔드에서 재현하기 어려운 상황도 Mock을 통해 쉽게 테스트 가능하다.
5. 피드백 반영 용이: 프론트엔드 개발자는 Mock 데이터를 통해 빠르게 UI/UX를 구현하고, 사용자나 디자이너로부터 피드백을 받아 즉시 반영할 수 있다.

 

Mocking은 어떻게 작동할까?

 

Mock 기반 개발은 주로 다음과 같은 방식으로 진행된다.

1. API 명세 정의: 프론트엔드와 백엔드 팀이 가장 먼저 해야 할 일은 API(Application Programming Interface) 명세를 명확하게 정의하는 것이다. 어떤 요청(예: GET /users, POST /products)을 보냈을 때 어떤 형식의 데이터가 응답으로 올 것인지(JSON 형태, 필드명, 데이터 타입 등)를 구체적으로 약속한다. Swagger나 OpenAPI Spec 같은 도구를 활용하면 API 명세를 효과적으로 공유하고 관리할 수 있다.
2. Mock 서버 구축 또는 클라이언트 측 Mocking:
   • Mock 서버: API 명세에 따라 특정 주소(endpoint)로 요청이 오면 미리 약속된 가상의 JSON 데이터를 응답하는 가짜 서버를 만든다. 이 Mock 서버는 실제 백엔드 서버와는 독립적으로 작동한다. json-server나 Mock Service Worker (MSW) 같은 도구들이 여기에 해당한다.
   • 클라이언트 측 Mocking: 프론트엔드 코드 내에서 API 호출 부분을 가로채(intercept) 실제 백엔드 대신 Mock 데이터를 직접 반환하도록 설정하는 방법도 있다. 주로 개발 및 테스트 환경에서 사용되며, axios-mock-adapter나 Mirage JS 등이 활용된다.
3. 프론트엔드 개발: 프론트엔드 개발자는 Mock 서버나 클라이언트 측 Mocking을 통해 제공되는 가상의 API를 사용하여 화면을 구현하고 기능을 개발한다. 실제 데이터처럼 보이므로 UI/UX 작업을 자연스럽게 진행할 수 있다.
4. 백엔드 개발: 백엔드 개발자는 정의된 API 명세에 따라 실제 비즈니스 로직과 데이터베이스 연동 등을 구현한다.
5. 통합: 실제 백엔드 시스템이 완성되면, 프론트엔드에서 Mock API 대신 실제 백엔드 API로 연결을 변경하고 최종적인 통합 테스트를 진행한다.

 

예시: 사용자 정보 가져오기

 

쇼핑몰 웹사이트에서 사용자 프로필 정보를 보여주는 페이지를 개발하는 상황을 예로 들어보자.

 

1. API 명세 정의: 프론트엔드와 백엔드 팀은 /api/user/profile 이라는 주소로 GET 요청을 보냈을 때, 다음과 같은 JSON 형태의 데이터가 응답으로 올 것이라고 약속한다.

   {
     "id": "user123",
     "username": "개발자_김",
     "email": "dev.kim@example.com",
     "level": "VIP",
     "points": 1500
   }

2. Mock 서버 구축 (json-server 활용): 백엔드 개발이 아직 진행되지 않았으므로, 프론트엔드 팀은 json-server를 사용하여 Mock 서버를 만든다. db.json 파일을 다음과 같이 작성한다.
   
   

   // db.json
   {
     "profile": {
       "id": "user123",
       "username": "개발자_김",
       "email": "dev.kim@example.com",
       "level": "VIP",
       "points": 1500
     }
   }

   
   그리고 터미널에서 json-server --watch db.json --port 3001 명령어를 실행하면, http://localhost:3001/profile 로 접속했을 때 위 JSON 데이터가 응답으로 온다.
   
   
3. 프론트엔드 개발: 이제 프론트엔드 개발자는 http://localhost:3001/profile 이라는 주소로 API 요청을 보내서 Mock 데이터를 받아와 사용자 프로필 화면을 구현한다. 실제로 백엔드 개발이 완료되지 않았어도, 마치 실제 데이터가 있는 것처럼 화면을 만들고 디자인을 적용할 수 있다.
   

   // 프론트엔드 (JavaScript) 코드 예시
   fetch('http://localhost:3001/profile') // Mock 서버 주소로 요청
     .then(response => response.json())
     .then(data => {
       // 받아온 Mock 데이터를 이용해 사용자 프로필 정보를 화면에 표시
       document.getElementById('username').textContent = data.username;
       document.getElementById('email').textContent = data.email;
       document.getElementById('level').textContent = data.level;
       // ...
     })
     .catch(error => console.error('Error fetching profile:', error));

   
   
   
4. 백엔드 개발: 백엔드 팀은 실제 데이터베이스와 연동하여 /api/user/profile API의 실제 비즈니스 로직을 구현한다.
   
   
5. 통합: 백엔드 개발이 완료되면, 프론트엔드 코드에서 API 요청 주소를 http://localhost:3001/profile 대신 실제 백엔드 서버의 https://api.myshop.com/user/profile 과 같은 주소로 변경하여 통합 작업을 마무리한다.

Mock 기반 개발은 프론트엔드와 백엔드 팀 간의 효과적인 협업을 가능하게 하고, 개발 과정의 병목 현상을 줄여 프로젝트를 더 빠르고 효율적으로 진행할 수 있게 돕는 강력한 방법이다. 처음 개발을 시작하는 사람이라도 Mock의 개념과 활용법을 익혀둔다면, 실제 프로젝트에서 많은 도움이 될 것이다.