Nuxt 를 배워보자

Nuxt에서 RESTful API 호출: 다양한 방법 총정리

_Blue_Sky_ 2025. 3. 22. 14:51
728x90

 

 
Nuxt.js는 프론트엔드 개발을 위한 강력한 프레임워크로, RESTful API 호출을 통해 백엔드 데이터를 가져오는 작업은 필수적입니다. 이번 글에서는 Nuxt에서 RESTful 호출을 구현하는 여러 방법을 소개하고, 각각의 특징과 사용 사례를 정리해 보겠습니다. useFetch부터 axios, 그리고 그 외 다양한 도구까지, 어떤 상황에서 어떤 방법을 선택해야 할지 알아보세요!
1. Nuxt 내장 도구: useFetch
설명
useFetch는 Nuxt 3에서 제공하는 기본 컴포저블로, RESTful API 호출을 간편하게 처리할 수 있습니다. SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)을 자연스럽게 지원하며, 반응형 데이터를 반환합니다.

 

사용법 
 
const { data, error, pending } = await useFetch('/api/students', {
  query: { classCode: 'A101' }
});
console.log(data.value); // { "2023001": "김철수", "2023002": "이영희" }
특징
  • Nuxt와 완벽히 통합: 서버와 클라이언트 환경을 자동으로 조정.
  • 캐싱 지원: key 옵션으로 요청별 캐싱 가능.
  • 반응형: data가 ref로 제공되어 Vue의 반응성을 유지.
언제 사용?
  • Nuxt 프로젝트에서 기본적인 API 호출이 필요할 때.
  • SSR과 CSR을 동시에 고려해야 할 때.
2. Nuxt의 $fetch
설명
$fetch는 useFetch와 비슷하지만 컴포저블이 아닌 전역 유틸리티 함수로 제공됩니다. 간단한 호출에 유용합니다.
사용법 
const data = await $fetch('/api/students', {
  query: { classCode: 'A101' }
});
특징
  • 간결함: 컴포저블 대신 일반 함수로 사용.
  • Nuxt 환경에 최적화: SSR/CSR 모두 지원.
언제 사용?
  • Nuxt에서 간단한 비동기 호출이 필요할 때.
  • 반응형 데이터가 필요 없는 경우.
3. 범용 HTTP 클라이언트: axios
설명
axios는 가장 널리 사용되는 HTTP 클라이언트 라이브러리로, Nuxt에서도 쉽게 사용할 수 있습니다. 범용적이어서 다른 프레임워크와도 호환됩니다.
사용법
import axios from 'axios';

const response = await axios.get('/api/students', {
  params: { classCode: 'A101' }
});
const data = response.data;
특징
  • 풍부한 기능: 인터셉터, 기본 설정 등 커스터마이징 가능.
  • 독립적: Nuxt 외 환경에서도 재사용 가능.
  • SSR 고려 필요: 서버/클라이언트 요청을 수동으로 관리해야 함.
언제 사용?
  • 복잡한 요청 설정이 필요할 때.
  • 기존에 axios로 작성된 코드가 많을 때.

 

728x90
4. 브라우저 기본: fetch (Fetch API)
설명
fetch는 브라우저에 내장된 기본 HTTP 요청 API로, Node.js 18+부터 기본 제공됩니다. Nuxt에서도 사용 가능합니다.
사용법
const response = await fetch('/api/students?classCode=A101');
const data = await response.json();
특징
  • 설치 불필요: 의존성 없이 사용 가능.
  • 단순함: 기본 기능만 제공, 추가 처리가 필요.
  • Nuxt 통합성 낮음: SSR에서 추가 작업 필요.
언제 사용?
  • 경량 프로젝트에서 외부 의존성을 피하고 싶을 때.
5. 경량 대안: ky
설명
ky는 fetch를 기반으로 한 경량 HTTP 클라이언트로, axios의 편리함을 일부 제공합니다.
사용법
import ky from 'ky';

const data = await ky.get('/api/students', {
  searchParams: { classCode: 'A101' }
}).json();
특징
  • 가볍고 현대적: JSON 파싱, 타임아웃 자동 처리.
  • Nuxt에서 사용하려면 설정 필요.
언제 사용?
  • 현대적인 프론트엔드에서 가벼운 요청이 필요할 때.
6. Node.js 특화: got
설명
got은 Node.js 환경에 최적화된 HTTP 클라이언트로, Nuxt의 서버 미들웨어에서 유용합니다.
사용법
const got = require('got');

const data = await got('/api/students', {
  searchParams: { classCode: 'A101' }
}).json();
특징
  • 빠르고 간소화: 스트리밍, 요청 취소 지원.
  • 서버사이드 중심: Nuxt 서버 로직에 적합.
언제 사용?
  • Nuxt 서버 미들웨어에서 API 호출을 처리할 때.
7. 캐싱과 실시간: SWR
설명
SWR은 "Stale-While-Revalidate" 전략을 사용하는 데이터 페칭 라이브러리로, Nuxt에서도 커뮤니티 모듈을 통해 사용 가능합니다.
사용법
import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());
const { data, error } = useSWR('/api/students?classCode=A101', fetcher);
특징
  • 캐싱과 자동 재요청: 실시간 데이터 동기화에 강력.
  • Nuxt 통합 제한적: 추가 설정 필요.
언제 사용?
  • 캐싱과 실시간 데이터 업데이트가 중요한 경우.
728x90
8. 서버 미들웨어와의 연계
설명
Nuxt의 서버 미들웨어를 사용하면 RESTful API를 직접 정의하고, Oracle DB 같은 백엔드와 연결할 수 있습니다.
사용법
server/api/students.js:
import { fetchStudentsByClass } from '../db/oracle';

export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const classCode = query.classCode;
  return await fetchStudentsByClass(classCode);
});
프론트엔드에서 호출:
const data = await useFetch('/api/students', { query: { classCode: 'A101' } });
특징
  • 통합 관리: 별도 백엔드 없이 Nuxt에서 API 제공.
  • 소규모에 적합: 대규모 트래픽은 별도 서버 추천.
언제 사용?
  • 백엔드와 프론트엔드를 하나의 Nuxt 프로젝트로 통합하고 싶을 때.
결론: 어떤 방법을 선택할까?
  • Nuxt에 최적화: useFetch, $fetch로 간편하게.
  • 범용성과 유연성: axios, fetch, ky 등.
  • 특수 요구사항: SWR(캐싱), got(서버사이드) 등.
  • 통합 솔루션: 서버 미들웨어로 직접 API 구축.
RESTful 호출은 단순히 데이터를 주고받는 행위지만, 도구마다 장단점이 뚜렷합니다. 프로젝트 규모, SSR 필요 여부, 성능 요구사항을 고려해 적합한 방법을 골라보세요. Nuxt에서 RESTful 호출을 마스터하면 더 효율적인 개발이 가능해질 겁니다!
 

Nuxt에서 RESTful API를 호출하는 다양한 방법을 정리해 드리겠습니다. Nuxt는 Vue.js를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 효율적인 웹 개발을 가능하게 합니다. API 호출은 Nuxt 애플리케이션에서 데이터를 가져오고 상호 작용하는 데 필수적인 부분입니다.

Nuxt에서 RESTful API 호출 방법

  1. asyncData:
    • asyncData는 Nuxt 페이지 컴포넌트에서 서버 사이드 렌더링을 위해 데이터를 가져오는 데 사용됩니다.
    • 페이지가 렌더링되기 전에 데이터를 가져오므로 초기 로딩 속도를 향상시킬 수 있습니다.
    • 서버 측에서 실행되므로 브라우저 환경에서만 사용할 수 있는 window 객체 등에 접근할 수 없습니다.
    • asyncData를 활용한 API 호출 예시 코드:
     
    export default {
  async asyncData({ $axios, params }) {
    const post = await $axios.$get(`/posts/${params.id}`);
    return { post };
  },
};
  2. fetch:
    • fetch는 asyncData와 유사하게 데이터를 가져오는 데 사용되지만, 컴포넌트 인스턴스에 접근할 수 있습니다.
    • 서버 사이드와 클라이언트 사이드 모두에서 실행됩니다.
    • fetch를 활용한 API 호출 예시 코드:
     
    export default {
  data() {
    return {
      post: null,
    };
  },
  async fetch({ $axios, params }) {
    this.post = await $axios.$get(`/posts/${params.id}`);
  },
};
  3. $axios:
    • $axios는 Nuxt에서 HTTP 요청을 보내는 데 사용되는 Axios 라이브러리의 인스턴스입니다.
    • @nuxtjs/axios 모듈을 설치하면 Nuxt 컨텍스트에서 $axios를 사용할 수 있습니다.
    • $axios를 사용하면 get, post, put, delete 등 다양한 HTTP 메서드를 사용하여 API를 호출할 수 있습니다.
    • $axios를 활용한 API 호출 예시 코드:
     
    export default {
  async mounted() {
    const response = await this.$axios.$get('/api/data');
    console.log(response);
  },
};
  4. useFetch:
    • Nuxt3에서 사용되는 기능으로, 컴포저블 형태로 API 호출을 단순화합니다.
    • 자동으로 데이터 로딩 상태를 관리하고, 에러 핸들링을 제공합니다.
    • useFetch를 활용한 API 호출 예시 코드:
    <script setup>
const { data: posts, pending, error, refresh } = await useFetch('/api/posts')
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">An error occurred: {{ error.message }}</div>
  <div v-else>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

API 호출 시 고려사항

  • 에러 핸들링: API 호출 중에 발생할 수 있는 오류를 적절하게 처리해야 합니다.
  • 데이터 로딩 상태: API 호출이 완료될 때까지 로딩 상태를 표시하여 사용자 경험을 개선합니다.
  • 보안: API 키와 같은 민감한 정보는 클라이언트 측 코드에 노출되지 않도록 주의해야 합니다.
  • 성능: 불필요한 API 호출을 줄이고, 데이터 캐싱을 활용하여 성능을 최적화합니다.
728x90