json-server를 Vue와 Nuxt에서 활용하는 방법: 실습과 예제로 풀어보기

 

json-server, Vue, Nuxt, 프론트엔드 개발, API 모킹, 데이터 페칭, REST API, 개발 생산성, 서버사이드 렌더링, 클라이언트사이드 렌더링

프론트엔드 개발을 하다 보면 백엔드 API가 아직 준비되지 않은 상황에서 작업을 진행해야 할 때가 종종 있습니다. 이때 json-server는 간단한 설정으로 RESTful API를 모킹(mock)할 수 있게 도와주는 훌륭한 도구입니다. 특히 Vue와 Nuxt 같은 프레임워크와 함께 사용하면 개발 초기 단계에서 데이터를 쉽게 시뮬레이션하며 UI를 구축할 수 있어 생산성을 크게 높일 수 있습니다. 이번 글에서는 json-server가 무엇인지, Vue와 Nuxt에서 이를 어떻게 활용할 수 있는지, 그리고 실제 예제를 통해 단계별로 알아보겠습니다. json-server를 사용하면 별도의 백엔드 구축 없이도 GET, POST, PUT, DELETE 같은 HTTP 메서드를 지원하는 API를 손쉽게 만들 수 있어, 개발 흐름을 끊김 없이 이어갈 수 있다는 점이 큰 매력입니다.

json-server란 무엇인가?

json-server는 간단한 JSON 파일을 기반으로 가짜 REST API를 제공하는 Node.js 기반 도구입니다. 예를 들어, db.json이라는 파일에 데이터를 작성하면 이를 기반으로 /posts, /users 같은 엔드포인트를 자동 생성해줍니다. 설치도 간단하고, 설정이 최소화되어 있어 프론트엔드 개발자가 백엔드 환경을 기다리지 않고 바로 작업을 시작할 수 있습니다. Vue와 Nuxt에서 이를 활용하면 API 호출을 테스트하고, 데이터 구조를 미리 설계하며, 클라이언트와 서버 간 상호작용을 시뮬레이션할 수 있습니다.

json-server 설치 및 기본 설정

먼저 json-server를 사용하려면 Node.js가 설치되어 있어야 합니다. 터미널에서 다음 명령어를 실행해 json-server를 글로벌로 설치합니다:

 

npm install -g json-server

설치가 완료되면, 프로젝트 디렉토리에 db.json 파일을 생성하고 아래와 같이 샘플 데이터를 입력합니다:

 

{
  "posts": [
    { "id": 1, "title": "Vue와 json-server", "content": "간단한 API 모킹" },
    { "id": 2, "title": "Nuxt 활용법", "content": "SSR과 CSR의 조화" }
  ],
  "users": [
    { "id": 1, "name": "홍길동", "email": "hong@example.com" }
  ]
}

이제 다음 명령어를 실행해 json-server를 시작합니다:

 

json-server --watch db.json

기본적으로 http://localhost:3000에서 서버가 실행되며, /posts나 /users 같은 엔드포인트를 통해 데이터를 조회할 수 있습니다. 브라우저에서 http://localhost:3000/posts를 열어보면 JSON 데이터를 확인할 수 있습니다.

Vue에서 json-server 활용하기

Vue는 클라이언트사이드 렌더링(CSR)을 기본으로 하는 프레임워크로, json-server와 함께 사용하면 API 호출을 테스트하기에 최적입니다. Vue CLI로 새 프로젝트를 생성한 후, axios를 설치해 데이터를 가져와 보겠습니다:

 

npm install -g @vue/cli
vue create vue-json-server-example
cd vue-json-server-example
npm install axios

src/components/Posts.vue 파일을 만들어 아래 코드를 작성합니다:

 

<template>
  <div>
    <h1>Posts from json-server</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} - {{ post.content }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: []
    };
  },
  async created() {
    try {
      const response = await axios.get('http://localhost:3000/posts');
      this.posts = response.data;
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
  }
};
</script>

src/App.vue에서 이 컴포넌트를 불러오고, npm run serve로 앱을 실행하면 json-server에서 가져온 데이터를 화면에 렌더링하는 걸 볼 수 있습니다. 이렇게 하면 백엔드가 없어도 Vue에서 데이터를 동적으로 표시하며 UI를 개발할 수 있습니다.

Nuxt에서 json-server 활용하기

Nuxt는 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 Vue 기반 프레임워크로, json-server와의 조합은 특히 SSR 환경에서 유용합니다. Nuxt 프로젝트를 생성하고 json-server 데이터를 가져와 보겠습니다:

 

npx create-nuxt-app nuxt-json-server-example
cd nuxt-json-server-example
npm install axios

Nuxt에서는 asyncData를 사용해 페이지 렌더링 전에 데이터를 가져올 수 있습니다. pages/index.vue를 다음과 같이 수정합니다:

 

 

<template>
  <div>
    <h1>Posts from json-server (Nuxt)</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} - {{ post.content }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  async asyncData({ error }) {
    try {
      const response = await axios.get('http://localhost:3000/posts');
      return { posts: response.data };
    } catch (err) {
      error({ statusCode: 500, message: 'Error fetching posts' });
    }
  }
};
</script>

npm run dev로 실행하면, Nuxt가 서버에서 데이터를 가져와 렌더링한 후 클라이언트로 전달합니다. SSR의 장점 덕분에 페이지 로드가 빠르고 SEO에도 유리합니다. 또한, Nuxt의 useFetch 같은 최신 컴포저블을 사용할 수도 있습니다:

 

 

<script setup>
const { data: posts } = await useFetch('http://localhost:3000/posts');
</script>

<template>
  <div>
    <h1>Posts with useFetch</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} - {{ post.content }}
      </li>
    </ul>
  </div>
</template>

useFetch는 Nuxt 3에서 제공하는 데이터 페칭 유틸리티로, 자동으로 서버와 클라이언트 간 데이터를 동기화해줍니다.

Vue와 Nuxt에서의 차이점

Vue는 CSR 중심이므로 데이터를 가져오는 로직이 주로 클라이언트에서 실행됩니다. 반면 Nuxt는 SSR을 지원하기 때문에 asyncData나 useFetch를 통해 서버에서 데이터를 미리 가져와 초기 HTML을 렌더링합니다. json-server와 함께 사용하면 Vue에서는 단순히 UI를 빠르게 테스트하는 데 중점을 두고, Nuxt에서는 SEO와 초기 로드 성능까지 고려한 개발이 가능합니다.

 

728x90

 

실무 팁과 주의사항

• CORS 문제: json-server와 Vue/Nuxt가 다른 포트에서 실행되므로 CORS 에러가 발생할 수 있습니다. 이를 해결하려면 json-server 실행 시 --host 0.0.0.0 옵션을 추가하거나, Nuxt의 nuxt.config.js에 프록시 설정을 추가하세요:

 

export default {
  serverMiddleware: [],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': 'http://localhost:3000'
  }
};

• 데이터 변경: json-server는 db.json을 메모리에 로드해 실행되므로, 파일을 직접 수정하면 서버를 재시작해야 반영됩니다. --watch 플래그를 사용하면 파일 변경을 감지해 자동으로 리로드됩니다.
• 프로덕션 고려: json-server는 개발용 도구이므로, 프로덕션에서는 실제 백엔드 API로 전환해야 합니다.

결론

json-server는 Vue와 Nuxt 개발에서 API 모킹을 간소화하며, 초기 프로토타입 제작이나 백엔드 독립적인 작업에 큰 도움을 줍니다. Vue에서는 클라이언트 중심의 간단한 데이터 페칭을, Nuxt에서는 SSR과 CSR을 모두 활용한 강력한 데이터 처리를 구현할 수 있습니다. 위 예제를 따라 하며 직접 테스트해보면, 프론트엔드 개발의 효율성이 얼마나 올라가는지 체감할 수 있을 겁니다. json-server와 Vue, Nuxt를 조합해 빠르고 유연한 개발 워크플로우를 경험해보세요!