리액트 Next.js로 Shopify 스토어 세부정보를 가져오는 방법

Shopify API 이해하기

최근 몇 년간 인터넷 쇼핑이 급증하면서, 다양한 전자상거래 플랫폼들이 부각되고 있습니다. 그 중에서도 Shopify는 사용자 친화적인 플랫폼으로, 전 세계의 상점 운영자들에게 많은 사랑을 받고 있습니다. Shopify는 다양한 API를 제공하여 개발자가 쉽게 자신의 웹사이트와 연동 할 수 있도록 합니다. 본 포스팅에서는 리액트와 Next.js를 사용하여 Shopify의 스토어 세부정보를 가져오는 방법에 대해 알아보겠습니다.

개발 환경 설정하기

Shopify API에 접근하기 위해서는 먼저 로컬 환경 변수를 설정해야 합니다. Next.js 프로젝트의 루트 디렉터리에 .env.local 파일을 생성하고 다음 정보를 입력합니다:

SHOPIFY_STORE_DOMAIN=your-shopify-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token

여기서 your-shopify-store.myshopify.com을 자신의 Shopify 스토어 URL로, your-storefront-access-token을 가져온 Storefront API 토큰으로 변경해 주세요. 이 정보를 통해 API에 인증된 요청을 보낼 수 있습니다.

데이터 fetching을 위한 lib 폴더 생성하기

이제 데이터를 가져오기 위한 lib 폴더를 생성하고, 그 안에 store.js 파일을 만들어주세요. 이 파일은 Shopify API와 통신하여 스토어의 세부 정보를 가져오는 역할을 합니다.

// lib/store.js
export async function getStoreDetails() {
  const query = `
    {
      shop {
        name
        primaryDomain {
          url
        }
        paymentSettings {
          currencyCode
        }
      }
    }
  `;

  try {
    const response = await fetch(`https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2024-04/graphql`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
      },
      body: JSON.stringify({ query }),
    });

    const json = await response.json();

    if (json.errors) {
      console.error("GraphQL errors:", json.errors);
      return null; // 오류 발생 시 null 반환
    }

    return json.data.shop; // 스토어 데이터 반환
  } catch (error) {
    console.error("Error fetching store details:", error);
    return null; // fetch 오류 처리
  }
}

위의 코드에서 we GraphQL 쿼리를 사용하여 스토어의 이름, URL, 통화 정보를 가져옵니다. 이렇게 구성된 fetch 함수는 API에서 필요로 하는 정보를 효과적으로 요청할 수 있습니다.

스토어 세부정보 표시하기

이제 스토어의 세부정보를 실제로 표시할 페이지를 생성합니다. app/page.js 파일을 열고 다음 코드를 추가하세요:

// app/page.js
import { getStoreDetails } from '../lib/store';

export default async function StoreDetailsPage() {
  // 스토어 세부정보 가져오기
  const storeDetails = await getStoreDetails();

  // 데이터 fetching 실패 시 오류 처리
  if (!storeDetails) {
    return <div>Error fetching store details.</div>;
  }

  return (
    <>
      <main className="container mx-auto p-4">
        <p className='text-xl mb-4'>This is the home page.</p>
        <div>
          <h1 className='text-3xl font-bold'>Store Details</h1>
          <p><strong>Name:</strong> {storeDetails.name}</p>
          <p><strong>URL:</strong> <a href={storeDetails.primaryDomain.url}>{storeDetails.primaryDomain.url}</a></p>
          <p><strong>Currency:</strong> {storeDetails.paymentSettings.currencyCode}</p>
        </div>
      </main>
    </>
  );
}

위의 코드에서는 가져온 스토어의 세부 정보를 사용하여 웹 페이지에 표시합니다. 스토어의 이름, URL, 통화 코드가 포함되어 있으며, 데이터를 가져오는 과정에서 오류가 발생할 경우에 대한 처리도 포함되어 있습니다.

결과 확인하기

이제 모든 설정이 완료되었습니다. 로컬 서버를 실행하고 브라우저에서 페이지를 열면 Shopify 스토어의 세부 정보가 표시되는 것을 확인할 수 있습니다. 정확한 데이터 출력을 통해 사용자에게 보다 전문적인 서비스와 정보를 전달할 수 있게 됩니다.

예시 출력

This is the home page.

Store Details
Name: my-store
URL: https://my-store.myshopify.com/
Currency: INR

위와 같이 구성된 웹 페이지는 스토어 운영에 필요한 기본 정보를 고객에게 제공할 수 있습니다. API와의 통신 덕분에 실시간으로 정보를 조회하고 표시할 수 있는 장점이 있습니다.

마무리

리액트와 Next.js를 활용하여 Shopify 스토어의 세부정보를 가져오는 방법에 대해 알아보았습니다. 이 과정을 통해 필요한 정보를 실시간으로 처리하고, 사용자에게 더욱 나은 경험을 제공할 수 있게 됩니다. 다음 단계로 더 다양한 API 요청을 통해 고객 맞춤형 서비스를 제공해 보세요!

참고 자료

• Shopify API Documentation
• Next.js Documentation
• React Documentation

이 블로그 포스트가 Shopify와 Next.js에 대한 이해를 높이는 데 도움이 되었기를 바랍니다. 추가적인 정보나 도움이 필요한 경우 언제든지 문의 주세요!