Nuxt 를 배워보자

Nuxt.js의 fetch: 다양한 활용 예제와 상세 설명

_Blue_Sky_ 2025. 2. 15. 12:34
728x90
728x90

 

Nuxt.js는 Vue.js를 기반으로 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 유연한 프레임워크입니다. 이러한 특징 덕분에 웹 애플리케이션 개발 시 빠르고 효율적인 데이터 관리가 가능하며, 특히 비동기 데이터를 처리하는 데 있어 fetch 기능은 필수적인 역할을 합니다. 본 글에서는 Nuxt.js의 fetch 기능을 다양한 예제와 함께 자세히 살펴보고, 각 기능의 특징과 적절한 사용 시나리오를 설명하여 개발자들이 더욱 효과적으로 Nuxt.js를 활용할 수 있도록 돕고자 합니다.

Nuxt.js의 fetch 개요

Nuxt.js는 ofetch 라이브러리를 기반으로 $fetch 함수를 제공하여 간편하게 API를 호출하고 데이터를 가져올 수 있도록 지원합니다. $fetch는 Promise 기반의 함수로, 비동기적으로 데이터를 가져온 후 해당 데이터를 컴포넌트에서 사용할 수 있도록 합니다.

다양한 fetch 사용 예제

1. 기본적인 API 호출

<script setup>
const { data } = await $fetch('https://api.example.com/posts');
</script>

위 코드는 https://api.example.com/posts 엔드포인트로 요청을 보내고, 응답 데이터를 data 변수에 할당합니다. 이렇게 가져온 데이터는 템플릿에서 사용할 수 있습니다.

2. 서버 사이드 렌더링 (SSR)에서의 데이터 패칭

Nuxt.js에서는 asyncData 옵션을 사용하여 페이지가 처음 렌더링될 때 서버에서 데이터를 미리 가져올 수 있습니다.

<script setup>
asyncData() {
  const { data } = await $fetch('https://api.example.com/posts');
  return { posts: data };
}
</script>

위 코드는 페이지가 처음 로드될 때 서버에서 데이터를 가져와 posts 변수에 할당하고, 이를 컴포넌트에 전달합니다. 이렇게 하면 사용자가 페이지에 접속하자마자 바로 완성된 페이지를 볼 수 있습니다.

3. 클라이언트 사이드 렌더링 (CSR)에서의 데이터 패칭

useFetch composable을 사용하면 컴포넌트 내에서 비동기적으로 데이터를 가져올 수 있습니다.

 
<script setup>
const { data, pending, error } = useFetch('https://api.example.com/posts');
</script>

위 코드는 useFetch를 사용하여 데이터를 가져오고, data, pending, error 변수를 통해 데이터 상태를 관리할 수 있습니다.

4. 데이터 변형 및 처리

$fetch 함수는 다양한 옵션을 제공하여 요청을 커스터마이징할 수 있습니다. 예를 들어, method, headers, body 옵션을 사용하여 HTTP 메서드, 헤더, 요청 본문을 설정할 수 있습니다. 또한, 응답 데이터를 가공하기 위해 transform 옵션을 사용할 수 있습니다.

5. 에러 처리

$fetch 함수는 catch 블록을 사용하여 에러를 처리할 수 있습니다.

<script setup>
try {
  const { data } = await $fetch('https://api.example.com/posts');
} catch (error) {
  console.error(error);
}
</script>

결론

Nuxt.js의 fetch 기능은 다양한 방식으로 사용될 수 있으며, 웹 애플리케이션 개발 시 데이터를 효율적으로 관리하는 데 필수적인 역할을 합니다. 본 글에서는 $fetch, asyncData, useFetch 등의 기능을 예제와 함께 자세히 설명하였습니다. 개발자들은 이러한 기능들을 적절히 활용하여 더욱 빠르고 안정적인 Nuxt.js 애플리케이션을 개발할 수 있을 것입니다.

fetch API의 다양한 옵션: 상세 설명과 예제

JavaScript Fetch API는 웹 개발에서 서버와 비동기적으로 데이터를 주고받는 강력한 도구입니다. fetch() 함수를 사용하여 다양한 HTTP 요청을 보낼 수 있으며, 이때 옵션 객체를 통해 요청을 세밀하게 조절할 수 있습니다. 본 글에서는 fetch의 다양한 옵션에 대해 깊이 있게 살펴보고, 실제 예제를 통해 각 옵션의 활용법을 알아보겠습니다.

키워드: JavaScript, Fetch API, 옵션, HTTP 요청, GET, POST, PUT, DELETE, 헤더, 본문, async/await

옵션 객체란 무엇인가?

fetch() 함수의 두 번째 인자로 전달되는 객체를 옵션 객체라고 합니다. 이 객체를 통해 요청 메서드, 헤더, 본문 등 요청에 대한 다양한 설정을 지정할 수 있습니다.

fetch(url, {
  // 옵션 설정
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

주요 옵션 상세 설명

1. method: HTTP 메서드 지정

  • 기본값: GET
  • 사용법: method: 'GET', method: 'POST', method: 'PUT', method: 'DELETE' 등
  • 설명: 서버에 요청하는 방식을 지정합니다. GET은 데이터를 가져오는 데 사용하고, POST는 서버에 데이터를 전송하는 데 사용합니다. PUT은 리소스를 업데이트하고, DELETE는 리소스를 삭제하는 데 사용합니다.

2. headers: 헤더 설정

  • 사용법: headers: { 'Content-Type': 'application/json' }
  • 설명: 요청에 포함될 HTTP 헤더를 설정합니다. Content-Type 헤더는 서버에 전송하는 데이터의 형식을 알려줍니다.

3. body: 요청 본문 설정

  • 사용법: body: JSON.stringify(data)
  • 설명: 서버로 전송할 데이터를 설정합니다. 일반적으로 JSON 형식으로 변환하여 전송합니다.

4. mode: 요청 모드 설정

  • 사용법: mode: 'cors', mode: 'no-cors', mode: 'same-origin'
  • 설명: 다른 출처의 리소스에 대한 요청을 허용할지 여부를 설정합니다.

5. credentials: 인증 정보 포함 여부 설정

  • 사용법: credentials: 'include', credentials: 'omit'
  • 설명: 쿠키나 인증 토큰과 같은 인증 정보를 포함할지 여부를 설정합니다.

6. cache: 캐시 설정

  • 사용법: cache: 'no-cache', cache: 'reload'
  • 설명: 요청에 대한 캐시 사용 여부를 설정합니다.

7. redirect: 리디렉션 처리 설정

  • 사용법: redirect: 'follow', redirect: 'manual'
  • 설명: 요청 중 리디렉션을 따를지 여부를 설정합니다.

예제: POST 요청으로 데이터 전송

const data = {
  name: '홍길동',
  age: 30
};

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

위 예제에서는 POST 메서드를 사용하여 data 객체를 JSON 형식으로 서버에 전송합니다.

async/await를 이용한 간결한 코드 작성

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

async/await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 코드 가독성이 향상됩니다.

결론

fetch API는 다양한 옵션을 제공하여 유연하고 강력한 HTTP 요청을 구현할 수 있도록 합니다. 본 글에서는 주요 옵션에 대한 상세 설명과 예제를 통해 fetch API를 효과적으로 활용하는 방법을 알아보았습니다.

Nuxt3에서 useAsyncData와 useFetch의 차이점: 심층 분석 및 예제

Nuxt3는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 Vue.js 프레임워크로, 풍부한 기능과 높은 성능을 제공합니다. 이러한 기능을 구현하는 데 핵심적인 역할을 하는 것이 바로 비동기 데이터 페칭입니다. Nuxt3에서는 useAsyncData와 useFetch라는 두 가지 주요 함수를 제공하여 비동기 데이터를 가져올 수 있습니다.

useAsyncData와 useFetch는 비슷해 보이지만, 실행 컨텍스트, 사용 시나리오, 반응성 등에서 중요한 차이점을 가지고 있습니다.

useAsyncData

  • 페이지 레벨 데이터 페칭: useAsyncData는 주로 페이지 레벨에서 데이터를 페칭하는 데 사용됩니다. 페이지가 처음 로드될 때 데이터를 가져와 페이지에 표시하는 것이 일반적인 사용 방식입니다.
  • 자동 캐싱: useAsyncData는 자동으로 데이터를 캐싱합니다. 즉, 페이지가 처음 로드된 후에는 서버에서 데이터를 다시 가져오지 않고 캐시된 데이터를 사용합니다. 이는 불필요한 네트워크 요청을 줄이고 성능을 향상시키는 데 도움이 됩니다.
  • 페이지 전환 시 자동 업데이트: 페이지가 전환될 때 URL 파라미터가 변경되면 useAsyncData는 자동으로 데이터를 다시 페칭합니다. 이는 동적 라우팅을 사용하는 경우 매우 유용합니다.

예제:

<template>
  <div>
    <h1>사용자 정보</h1>
    <p>이름: {{ user.name }}</p>
    <p>이메일: {{ user.email }}</p>
  </div>
</template>

<script setup>
const { data: user } = await useAsyncData('user', () => $fetch('/api/user'))
</script>

useFetch

  • 컴포넌트 레벨 데이터 페칭: useFetch는 컴포넌트 레벨에서 데이터를 페칭하는 데 사용됩니다. 컴포넌트 내부에서 특정 데이터를 필요로 할 때 사용하면 좋습니다.
  • 수동 캐싱: useFetch는 자동 캐싱 기능이 없으므로, 개발자가 직접 캐싱 로직을 구현해야 합니다.
  • 페이지 전환 시 유지: 페이지가 전환되더라도 useFetch로 가져온 데이터는 유지됩니다.

예제:

<template>
  <div>
    <h1>댓글 목록</h1>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        {{ comment.content }}
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: comments } = await useFetch('/api/comments')
</script>

useAsyncData vs useFetch: 언제 어떤 것을 사용해야 할까요?

  • 페이지 데이터: 페이지 레벨에서 데이터를 페칭하고 자동 캐싱 및 페이지 전환 시 자동 업데이트 기능이 필요한 경우 useAsyncData를 사용합니다.
  • 컴포넌트 데이터: 컴포넌트 레벨에서 데이터를 페칭하고 수동 캐싱이 필요한 경우 useFetch를 사용합니다.
  • 복잡한 데이터 페칭: useFetch는 더 많은 옵션을 제공하여 복잡한 데이터 페칭 시나리오를 처리하는 데 유용합니다.

결론적으로, useAsyncData와 useFetch는 각각 장단점을 가지고 있으며, 사용 시나리오에 맞게 적절한 함수를 선택하는 것이 중요합니다.

728x90

Nuxt Fetch 캐싱 기능 활용: 빠르고 효율적인 웹 애플리케이션 구축하기

Nuxt.js는 Vue.js 기반의 유니버설 애플리케이션 프레임워크로, 서버 사이드 렌더링(SSR)을 지원하여 초기 페이지 로딩 속도를 향상시키는 데 탁월합니다. 특히, Nuxt Fetch는 데이터 페칭을 위한 강력한 도구를 제공하며, 캐싱 기능을 활용하면 애플리케이션의 성능을 더욱 향상시킬 수 있습니다.

Nuxt Fetch 캐싱의 이점

  • 빠른 응답 시간: 캐시된 데이터를 활용하여 불필요한 API 호출을 줄이고, 사용자에게 빠른 응답을 제공합니다.
  • 서버 부하 감소: 동일한 데이터를 반복적으로 요청하지 않아 서버 자원을 효율적으로 활용할 수 있습니다.
  • 사용자 경험 향상: 빠른 로딩 속도와 부드러운 사용자 인터페이스를 제공하여 사용자 만족도를 높입니다.

Nuxt Fetch 캐싱 방법

Nuxt는 useFetch와 useAsyncData라는 두 가지 컴포저블을 제공하여 데이터 페칭을 처리합니다. 이 컴포저블들은 캐싱 기능을 내장하고 있어, 간단한 설정만으로 캐싱을 활성화할 수 있습니다.

  • useFetch:
    • 주로 사용자 상호작용에 의한 데이터 요청에 사용됩니다.
    • keepAlive 옵션을 true로 설정하면 캐싱됩니다.
  • useAsyncData:
    • 서버 사이드 렌더링에 최적화된 컴포저블입니다.
    • server 옵션을 true로 설정하면 서버에서 데이터를 미리 페칭하여 클라이언트에 전달합니다.

캐싱 전략

  • 데이터 특성 고려: 자주 변경되지 않는 데이터는 오랫동안 캐싱하고, 자주 변경되는 데이터는 짧은 시간 동안 캐싱하거나 캐싱하지 않습니다.
  • HTTP 캐시 헤더 활용: Cache-Control 헤더를 사용하여 캐싱 정책을 세밀하게 조절할 수 있습니다.
  • 브라우저 캐시 활용: 브라우저의 캐싱 기능을 활용하여 정적 자원(이미지, CSS, JavaScript 등)을 캐싱합니다.

예제

<script setup>
const { data } = await useFetch('https://api.example.com/posts', {
  // 30초 동안 캐싱
  maxAge: 30,
});
</script>

<template>
  <ul>
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Nuxt 3에서의 캐싱

Nuxt 3에서는 useFetch와 useAsyncData 외에도 getCachedData라는 메소드를 제공하여 더욱 강력한 캐싱 기능을 활용할 수 있습니다.

728x90

Nuxt Fetch를 활용한 서버리스 함수 연동: 심층 분석 및 실제 예제

Nuxt는 Vue.js 기반의 유니버설 애플리케이션 개발을 위한 훌륭한 프레임워크입니다. 특히, 서버 사이드 렌더링(SSR) 기능을 제공하여 빠른 초기 로딩과 높은 SEO 점수를 얻을 수 있습니다. 이러한 Nuxt의 강점을 더욱 극대화하기 위해 서버리스 함수와의 연동은 필수적입니다. 서버리스 함수는 필요에 따라 자동으로 확장되고, 별도의 서버 관리 없이 코드 실행이 가능하여 효율적인 백엔드 개발을 가능하게 합니다.

이 글에서는 Nuxt Fetch를 활용하여 서버리스 함수와 연동하는 방법을 심층적으로 다루고, 실제 예제를 통해 구체적인 구현 과정을 보여드리겠습니다. 핵심 키워드는 Nuxt, Fetch, 서버리스 함수, 연동, 실제 예제, SSR, API 호출, 데이터 페칭입니다.

왜 Nuxt Fetch와 서버리스 함수를 연동해야 할까요?

  • 효율적인 데이터 관리: 서버리스 함수를 통해 데이터베이스 쿼리, 파일 처리, 외부 API 호출 등 복잡한 로직을 처리하고, Nuxt Fetch를 통해 결과를 간편하게 가져와 사용할 수 있습니다.
  • 유연한 확장성: 서버리스 함수는 사용량에 따라 자동으로 확장되므로 트래픽 변동에 유연하게 대응할 수 있습니다.
  • 낮은 개발 및 운영 비용: 서버 관리 부담을 줄이고, 필요한 만큼만 비용을 지불하면 되므로 비용 효율적입니다.
  • 뛰어난 성능: 서버리스 함수는 빠른 콜드 스타트와 뛰어난 확장성을 제공하여 빠른 응답 속도를 보장합니다.

Nuxt Fetch를 이용한 서버리스 함수 호출

Nuxt는 $fetch 함수를 제공하여 간편하게 HTTP 요청을 보낼 수 있습니다. 이를 이용하여 서버리스 함수를 호출하고, 그 결과를 컴포넌트에서 사용할 수 있습니다.

<script setup>
const { data } = await useFetch('/api/posts');
</script>

<template>
  <ul>
    <li v-for="post in data" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

위 예제에서는 /api/posts 엔드포인트로 요청을 보내고, 결과를 data 변수에 할당하여 컴포넌트에서 사용합니다. /api/posts 엔드포인트는 서버리스 함수로 연결되어 있으며, 데이터베이스에서 게시글 목록을 가져와 JSON 형식으로 반환한다고 가정합니다.

서버리스 함수 구현 (예: AWS Lambda)

서버리스 함수는 AWS Lambda, Google Cloud Functions, Azure Functions 등 다양한 클라우드 플랫폼에서 제공됩니다. 여기서는 AWS Lambda를 이용하여 간단한 Node.js 서버리스 함수를 구현하는 예를 보여드리겠습니다.

const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {
  const params = {
    TableName: 'Posts',
  };

  try {
    const data = await dynamodb.scan(params).promise();
    return {
      statusCode: 200,
      body: JSON.stringify(data.Items),
    };
  } catch (err) {
    console.error(err);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Error retrieving posts' }),
    };
  }
};

위 코드는 DynamoDB 테이블에서 게시글 목록을 가져와 JSON 형식으로 반환하는 서버리스 함수입니다.

Nuxt와 서버리스 함수 연동 설정

Nuxt와 서버리스 함수를 연동하기 위해서는 API Gateway와 같은 API 게이트웨이 서비스를 활용하여 서버리스 함수를 HTTP 엔드포인트로 노출해야 합니다. API Gateway에서 생성한 엔드포인트 URL을 Nuxt의 $fetch 함수에서 사용하면 됩니다.

추가 고려 사항

  • 오류 처리: 서버리스 함수 호출 시 발생할 수 있는 오류를 적절히 처리해야 합니다.
  • 보안: API 키, 액세스 토큰 등 민감한 정보를 안전하게 관리해야 합니다.
  • 캐싱: 자주 변경되지 않는 데이터는 서버리스 함수의 응답을 캐싱하여 성능을 향상시킬 수 있습니다.
  • 데이터 변환: 서버리스 함수에서 반환한 데이터를 Nuxt 컴포넌트에서 사용하기 편리한 형태로 변환할 수 있습니다.

 

Nuxt Fetch 데이터 변형 및 처리: 고급 기법으로 더욱 풍부한 웹 애플리케이션 구축하기

Nuxt.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 Vue.js 프레임워크로, 풍부한 기능과 생산성을 제공합니다. 특히, $fetch 함수는 데이터를 가져오는 강력한 도구이지만, 단순한 데이터 가져오기를 넘어 다양한 변형과 처리를 통해 더욱 유연하고 동적인 웹 애플리케이션을 구축할 수 있습니다.

Nuxt Fetch 데이터 처리의 핵심:

  • 데이터 변형: 원본 데이터를 필요에 맞게 가공하고 변환합니다. 예를 들어, 날짜 포맷 변경, 대문자 변환, 특정 필드 추출 등이 있습니다.
  • 데이터 필터링: 필요한 데이터만 추출하여 불필요한 데이터를 제거합니다.
  • 데이터 정렬: 특정 기준에 따라 데이터를 정렬합니다.
  • 데이터 조작: 여러 데이터를 결합하거나 새로운 데이터를 생성합니다.
  • 데이터 캐싱: 자주 사용되는 데이터를 캐싱하여 성능을 향상시킵니다.

고급 기법 활용 예시:

1. 데이터 변형: 날짜 포맷 변경

export default {
  async asyncData({ $fetch }) {
    const posts = await $fetch('/api/posts');

    return {
      posts: posts.map(post => ({
        ...post,
        createdAt: new Date(post.createdAt).toLocaleDateString(),
      }))
    };
  }
}

위 예시에서는 posts 데이터의 createdAt 필드를 사용자에게 보기 편한 날짜 형식으로 변환합니다.

2. 데이터 필터링: 특정 카테고리의 게시글만 가져오기

export default {
  async asyncData({ $fetch, params }) {
    const posts = await $fetch('/api/posts');

    return {
      posts: posts.filter(post => post.category === params.category)
    };
  }
}

params.category를 이용하여 특정 카테고리의 게시글만 필터링합니다.

3. 데이터 정렬: 게시글을 작성일 기준으로 내림차순 정렬

export default {
  async asyncData({ $fetch }) {
    const posts = await $fetch('/api/posts');

    return {
      posts: posts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
    };
  }
}

createdAt 필드를 기준으로 게시글을 내림차순 정렬합니다.

4. 데이터 조작: 여러 API 호출 결과 합치기

export default {
  async asyncData({ $fetch }) {
    const users = await $fetch('/api/users');
    const posts = await $fetch('/api/posts');

    const userPosts = users.map(user => ({
      user,
      posts: posts.filter(post => post.userId === user.id)
    }));

    return { userPosts };
  }
}

두 개의 API를 호출하여 사용자와 게시글 데이터를 가져온 후, 사용자별 게시글 목록을 생성합니다.

5. 데이터 캐싱: Axios 캐싱 활용

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  adapter: require('axios/lib/adapters/http'), // Node.js 환경에서 사용
});

export default {
  async asyncData({ $fetch }) {
    const { data } = await instance.get('/products', {
      adapter: require('axios/lib/adapters/http'), // Node.js 환경에서 사용
    });

    return { products: data };
  }
}

Axios 캐싱을 활용하여 동일한 API를 반복적으로 호출할 때 불필요한 요청을 줄입니다.

 

728x90
728x90

'Nuxt 를 배워보자' 카테고리의 다른 글

Vue 3 + Nuxt 3: Composition API를 활용한 서버 통신 예제  (0) 2025.02.15
Nuxt에서 <script setup>과 <script>의 차이점: 간결하고 효율적인 컴포넌트 개발을 위한 선택  (1) 2025.02.15
Nuxt 3 데이터 페칭: 심층 분석 및 실용적인 예제  (0) 2025.02.12
Nuxt.js에서 Wijmo를 활용한 강력한 웹 애플리케이션 개발 가이드  (0) 2025.02.11
Nuxt의 Vite: 빠르고 유연한 개발 환경 구축하기  (0) 2025.02.11

'Nuxt 를 배워보자'의 다른글

  • 현재글Nuxt.js의 fetch: 다양한 활용 예제와 상세 설명

관련글

티스토리툴바