mockapi.io 사용법

| 서론

안녕하세요, 팡일입니다.

 

오늘은 목업데이터를 api로 제공해주는 서비스인 'mockapi.io'의 사용법에 대해서 공유해보려고 합니다. 

 

현재 진행중인 사이드 프로젝트에서 백엔드 환경 연결이 이루어지지 않아, json-server를 사용해왔었는데요? 배포를 하면 데이터를 불러올 수 없다는 단점이 있어서, 이 부분을 해결하고자 mockapi를 임시 방법으로 사용하기로 결정했습니다.

 

 

 

| 1단계 : 가입하기

 

https://mockapi.io 사이트에 접속하면 위의 사진처럼 보여지는데요? 'Get started' 버튼을 눌러서 회원가입 화면으로 이동해줍니다.

 

 

 

자사 이메일 가입, 구글 로그인, Github 로그인 세 가지 방법을 제공해주는데요? 편하신 방법을 선택해주시면 됩니다. 저는 Github으로 로그인하기를 선택했습니다.

 

 

 

가입이 완료되면, 프로젝트 페이지로 이동하게 되며, 파란색 PLUS 버튼을 누르면, 새로운 프로젝트를 추가하는 모달이 열립니다.

 

프로젝트 이름을 작성하고, API Prefix를 작성해준 뒤, 파란색 Create 버튼을 눌러줍니다.

• 프로젝트 이름은 영어로 작성하는 것을 추천 드립니다.
• API Prefix는 그냥 기본값을 사용하셔도 되고, 추후 백엔드 개발의 엔드포인트로 맞춰서 사용하셔도 됩니다.

 

 

 

| 2단계 : 프로젝트 이해하기

 

프로젝트를 성공적으로 생성했다면, 위의 사진과 같이 생성된 프로젝트 카드를 볼 수 있습니다. 이를 클릭하면, 상세 페이지로 이동하게 됩니다.

 

 

 

현재 모자이크된 것처럼, 자동으로 생성된 API endpoint 내에는 해당 프로젝트의 난수값으로 서브도메인이 되어 있는 것을 볼 수 있습니다.

 

이 경로를 추후에 사용할 예정이니, 주의깊게 봐주셔도 좋습니다.

 

참조 : https://velog.io/@live_in_truth/mockapi-사용법-with-React-CSR2024-2-OpenSourceStudio-수업-참고-자료

 

위의 내용은 제가 참고했던 사이트에 작성자 분이 건네주신 부분이었는데요? prefix 관련해서 참고하시면 좋을 법한 내용이라, 이 부분도 공유 드립니다. 

 

공감되는 부분이기도 했어서, 저도 기본적으로 제공해준 '/api/v1' 엔드포인트를 사용했습니다.

 

 

 

| 3단계 : 리소스 만들기

가장 먼저 해야 할 일은 바로 Resource 즉, Entity라는 개념을 이해하고 생성해야 하는데요? 쉽게 말해서 객체를 의미한다고 생각하시면 될 것 같습니다.

 

학생 정보, 수강 정보, 회차 정보 등 특정 정보를 담당하는 주제라고 생각하시면 이해하기 쉬울 것 같습니다.

 

 

프로젝트 상세 페이지에서 파란색 'New Resource' 버튼을 누르면, 새로운 Resource를 추가할 수 있는 모달이 뜨게 됩니다. 

 

Resource name의 경우 딱 봐도 한 번 이해할 수 있는 영어 이름으로 작성해주시면 됩니다.

 

또한, 스키마 즉, 속성들을 추가해주어야 하는데요? 기본적으로 데이터 행을 구분할 떄 사용되는 PK는 'id'입니다.

 

이외에 필요한 속성들이 있으면, 플러스 버튼을 누르고 속성 이름과 속성 타입을 지정해준 뒤, 파란색 'Create' 버튼을 클릭해 줍니다.

 

Resource는 무료 버전에서 최대 2개까지 생성 가능하며, 삭제 후 다시 만들기가 가능합니다.

 

 

 

| 4단계 : Resource 목업 만들기

모달이 닫혀진 뒤, 생성된 Resource를 보면, 이러한 progress Bar가 생성된 것을 볼 수 있는데요? 마우스를 올리면 생성할 목업 데이터의 개수를 지정할 수 있으며, 클릭시 해당 개수 만큼 목업 데이터가 생성이 됩니다. 

 

 

 

또한, DATA 버튼을 클릭하게 되면, 위의 사진과 같이 생성된 데이터 목록을 JSON 형태로 볼 수 있습니다.

 

수정이 필요하다면, 직접 클릭하여 정보를 수정할 수도 있습니다. 수정 후에는 파란색 'Update' 버튼을 클릭하면 수정됩니다.

 

 

 

| 5단계 : API 연결하기

이제 드디어 Endpoint를 실제 코드에 적용하면 되는데요? 

 

제가 진행한 방법의 경우에는 'axios' 패키지를 사용하여 데이터 패칭을 진행하였고, 'api'라는 이름으로 api 규격을 생성하여 사용했습니다.

 

또한, Endpoint의 경우 외부에 노출되는 것을 방지하고자, '.env' 파일을 사용하는 구조로 구성했습니다.

// .env

VITE_BASE_URL= {endpoint url}

// axios.ts
export const api = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout: 5000,
});

// student.ts
/**
* 모든 학생 정보를 불러오는 GET
*/
export const getStudents = async ({
  page,
  size,
}: GetStudentsProps): Promise<GetStudentsResponse> => {
  try {
    const res = await api.get<Student[]>('/students', {
    });

    const students = Array.isArray(res.data) ? res.data : [];

    return {
      total_count: Number(res.headers['x-total-count'] ?? students.length),
      page,
      size,
      students,
    };
  } catch (error) {
    console.error('Failed to fetch students:', error);
    return {
      total_count: 0,
      page,
      size,
      students: [],
    };
  }
};

 

 

 

| 6단계 : 결과 확인

코드를 작동한 결과! 아래와 같이 정상적으로 목업데이터가 사용되는 것을 볼 수 있었습니다.

 

 

 

 

| 결론

이번 글에서는 백엔드 연동이 준비되지 않은 상황에서 프론트엔드 개발을 계속 진행하기 위한 대안으로 mockapi.io를 활용하는 전체 흐름을 정리해봤습니다.

 

기존에 사용하던 json-server는 로컬 환경에서는 충분히 유용했지만, 배포 환경에서는 데이터를 불러올 수 없다는 한계가 있었고, 이로 인해 실제 서비스 흐름을 검증하기 어려운 문제가 있었습니다. mockapi.io는 이러한 공백을 비교적 간단하게 메워주면서도, 실제 API를 사용하는 것과 거의 동일한 개발 경험을 제공해주었습니다.

 

백엔드 개발이 병렬로 진행되거나, 초기 기획·UI 단계에서 빠르게 화면을 만들어야 하는 상황이라면, mockapi.io는 한 번쯤 꼭 활용해볼 만한 도구라고 생각합니다. 프론트엔드 개발 흐름을 끊지 않고 이어가고 싶으신 분들께 작은 참고 자료가 되었으면 좋겠습니다!