문제 정의

프로젝트 초기 단계에서 백엔드 API가 아직 완성되지 않은 경우가 많습니다. 계속 기다릴 수는 없으니 백엔드를 기다리는 동안 프론트엔드 개발을 지속적으로 진행할 수 있는 방안이 필요했습니다.

해결 과정

이럴때 아주 유용한 라이브러리 JSON Server가 있었습니다. JSON Server는 간단한 JSON 파일을 RESTful API로 변환해주는 도구로, 빠르게 가짜 API를 생성하여 프론트엔드와의 연동을 테스트할 수 있습니다. 다음과 같은 단계를 통해 JSON Server를 설정하고 프론트엔드에 통합했습니다.

1. JSON Server 설치 및 설정:

   • 프로젝트 디렉토리에서 JSON Server를 글로벌 또는 로컬로 설치했습니다.

     npm install -g json-server
     

   • db.json 파일을 생성하여 초기 데이터를 정의했습니다.

     {
       "todos": [
         {
           "id": 1,
           "title": "첫 번째 할 일",
           "completed": false
         },
         {
           "id": 2,
           "title": "두 번째 할 일",
           "completed": true
         }
       ]
     }
     

   • JSON Server를 실행하여 API 엔드포인트를 활성화했습니다.

     json-server --watch db.json --port 3001
     

2. 프론트엔드와 JSON Server 연동:

   • 프론트엔드 애플리케이션에서 Axios 또는 Fetch API를 사용하여 JSON Server의 엔드포인트와 통신하도록 설정했습니다.

     // 예: Axios를 사용하는 경우
     import axios from 'axios';
     
     const api = axios.create({
       baseURL: 'http://localhost:3001',
     });
     
     export const getTodos = () => api.get('/todos');
     export const addTodo = (todo) => api.post('/todos', todo);
     export const updateTodo = (id, updatedTodo) => api.put(`/todos/${id}`, updatedTodo);
     export const deleteTodo = (id) => api.delete(`/todos/${id}`);
     

3. 프론트엔드 기능 구현 및 테스트:

   • JSON Server를 통해 제공되는 가짜 데이터를 활용하여 CRUD(Create, Read, Update, Delete) 기능을 구현하고, 실제 백엔드가 완성되기 전에 프론트엔드 기능을 충분히 테스트할 수 있었습니다.
   • 상태 관리 라이브러리(Zustand, Redux 등)와 연동하여 데이터의 흐름을 시뮬레이션하고, 사용자 인터랙션에 따른 동작을 검증했습니다.

결과

JSON Server를 활용한 임시 백엔드 설정을 통해 다음과 같은 성과를 얻었습니다:

• 프론트엔드 개발 지속 가능: 백엔드 완성을 기다리지 않고 프론트엔드 기능을 안정적으로 개발할 수 있었습니다.
• 개발 속도 향상: 목 API를 즉시 사용할 수 있어 개발 초기 단계에서의 지연을 최소화할 수 있었습니다.
• 기능 테스트 용이성: 실제 백엔드와의 연동 전에 프론트엔드의 기능을 독립적으로 테스트할 수 있어, 버그를 조기에 발견하고 수정할 수 있었습니다.

배운 점 (인사이트)

백엔드가 없어도 여러가지 방법으로 프론트엔드 개발을 이어갈 수 있음을 알게 되었습니다. 전체 프로젝트의 개발 속도를 확실히 향상시킬 수 있을 것 같습니다.