Shopify 제품데이터를 가져와서 화면에 보여주는 코드 분석

May 7, 2025 | Shopify App Tech. Stack, Shopify App 개발, 프로젝트들

Shopify API를 사용하면 외부 앱이 Shopify 스토어와 데이터를 주고받을 수 있습니다. 본 예제에서는 제품 목록을 가져와 React와 Polaris를 이용하여 Admin 스타일 테이블로 출력하는 전체 구현을 안내드립니다. 출력할 데이터는 제품 이미지, 타이틀, 상태, SKU, 바코드, 가격, 재고 수량, 상세 설명, 짧은 설명입니다.

1. 백엔드 API 코드: /api/products (Node.js + Express)

// /api/products.js

import express from "express";
import fetch from "node-fetch";

const router = express.Router();

// GET /products → Shopify에서 상품 목록 가져오기
router.get("/products", async (req, res) => {
  const shop = "your-shop-name.myshopify.com"; // 본인의 Shopify store 도메인으로 변경
  const accessToken = "shpat_xxxxxxxxxxxxxxxxx"; // 실제 Shopify Admin API 토큰으로 교체

  const url = `https://${shop}/admin/api/2024-01/products.json`;

  try {
    const response = await fetch(url, {
      method: "GET",
      headers: {
        "X-Shopify-Access-Token": accessToken,
        "Content-Type": "application/json",
      },
    });

    const data = await response.json();
    res.json(data);
  } catch (error) {
    console.error("Error fetching products:", error);
    res.status(500).json({ error: "Failed to fetch products" });
  }
});

export default router;

위 코드는 Express 기반 API 라우터로 구성되어 있으며, Shopify에서 제품 데이터를 가져와 JSON 형식으로 클라이언트에 전달합니다. Shopify API URL은 2024년 1월 버전 기준입니다. Access Token은 앱 인증을 통해 받은 값으로 설정합니다.

2. 프론트엔드 코드: React + Polaris 테이블 컴포넌트

// ProductList.jsx
import { useEffect, useState } from "react";
import { Card, DataTable, Spinner, Thumbnail } from "@shopify/polaris";

export default function ProductList() {
  const [products, setProducts] = useState(null);

  useEffect(() => {
    fetch("/api/products")
      .then((res) => res.json())
      .then((data) => setProducts(data.products));
  }, []);

  if (!products) return <Spinner accessibilityLabel="Loading" size="large" />;

  const rows = products.map((product) => {
    const variant = product.variants[0] || {};
    return [
      <Thumbnail source={product.image?.src} alt={product.title} />,
      product.title,
      product.status,
      variant.sku || "N/A",
      variant.barcode || "N/A",
      variant.price || "0",
      variant.inventory_quantity ?? "N/A",
      product.body_html?.slice(0, 80) || "No description",
      product.metafields?.short_description?.value || "N/A",
    ];
  });

  return (
    <Card title="Product List">
      <DataTable
        columnContentTypes={[
          "text", "text", "text", "text", "text", "numeric", "numeric", "text", "text"
        ]}
        headings={[
          "Image", "Title", "Status", "SKU", "Barcode", "Price", "Inventory Qty", "Description", "Short Description"
        ]}
        rows={rows}
      />
    </Card>
  );
}

위 코드는 React 컴포넌트로, Polaris의 Card 및 DataTable 컴포넌트를 이용해 제품 목록을 표 형태로 출력합니다. 데이터는 처음 로딩 시 /api/products에서 가져오며, 제품의 대표 이미지, 제목, 상태, SKU, 바코드, 가격, 재고 수량, 설명 및 짧은 설명을 행 단위로 출력합니다. 이미지가 없는 경우를 대비하여 ?. 연산자를 사용하였고, 짧은 설명은 Metafield로 관리되므로 별도의 세팅이 필요할 수 있습니다.

표를 구성하는 각 열은 Polaris의 columnContentTypes와 headings 속성을 통해 명시합니다. 제품 설명은 HTML 형식으로 제공되므로 화면에는 일부 문자열만 자른 형태로 보여줍니다.

요약하자면, 위의 백엔드와 프론트엔드 코드를 연결하면 Shopify Admin 제품 목록과 유사한 테이블 UI를 구현할 수 있습니다. 필요한 경우 짧은 설명 필드인 short_description을 Metafield로 추가하여 해당 데이터를 함께 표시할 수 있습니다. 이 구조는 커스텀 Shopify 앱 또는 외부 대시보드에서 유용하게 활용될 수 있습니다.

위 코드의 상세 분석

1. 백엔드 코드 (/api/products)

Shopify로부터 제품 정보를 받아오는 Express 라우터 코드입니다.

import express from "express";

express는 Node.js에서 서버 기능을 쉽게 구현할 수 있게 해주는 프레임워크입니다.

import fetch from "node-fetch";

fetch는 외부 API 요청을 보낼 수 있도록 도와주는 함수입니다.

const router = express.Router();

여러 개의 API 경로를 그룹으로 관리할 수 있도록 라우터 인스턴스를 생성하는 코드입니다.

router.get("/products", async (req, res) => {

GET /api/products 요청이 들어왔을 때 실행할 비동기 함수를 정의하는 부분입니다.

  const shop = "your-shop-name.myshopify.com";

Shopify 스토어의 도메인 주소를 변수에 저장합니다.

  const accessToken = "shpat_xxxxxxxxxxxxxxxxx";

Shopify에서 발급한 앱 인증 토큰을 저장하는 부분입니다. 반드시 보안을 유지해야 합니다.

  const url = `https://${shop}/admin/api/2024-01/products.json`;

Shopify의 제품 목록을 요청할 API 주소입니다. API 버전 2024-01을 사용하고 있습니다.

  try {
    const response = await fetch(url, {

Shopify API에 요청을 보내고 응답을 기다리는 코드입니다.

      method: "GET",

요청 방식은 데이터를 조회하는 용도의 "GET"입니다.

      headers: {
        "X-Shopify-Access-Token": accessToken,
        "Content-Type": "application/json",
      },

요청 헤더에 인증 토큰과 JSON 형식임을 명시합니다.

    });

    const data = await response.json();

응답 데이터를 JSON 형태로 변환하여 data에 저장합니다.

    res.json(data);

가져온 제품 데이터를 클라이언트에 다시 JSON으로 전달합니다.

  } catch (error) {
    console.error("Error fetching products:", error);

에러 발생 시 콘솔에 에러 내용을 출력합니다.

    res.status(500).json({ error: "Failed to fetch products" });
  }
});

에러 응답을 500번 코드와 함께 전송합니다.

export default router;

라우터를 외부에서 사용할 수 있도록 내보냅니다.

2. 프론트엔드 코드 (React + Polaris)

Shopify Admin 스타일로 제품 데이터를 화면에 출력하는 컴포넌트입니다.

import { useEffect, useState } from "react";

React의 상태관리 함수 useState와 생명주기 함수 useEffect를 가져옵니다.

import { Card, DataTable, Spinner, Thumbnail } from "@shopify/polaris";

Shopify Polaris UI 컴포넌트들을 불러옵니다. Card는 박스, DataTable은 표, Spinner는 로딩 표시, Thumbnail은 이미지 출력을 담당합니다.

export default function ProductList() {

ProductList라는 이름의 컴포넌트를 정의합니다.

  const [products, setProducts] = useState(null);

제품 데이터를 저장할 상태 변수를 선언합니다. 처음에는 데이터가 없기 때문에 null로 설정합니다.

  useEffect(() => {

컴포넌트가 처음 마운트될 때 한 번 실행되는 함수입니다.

    fetch("/api/products")

백엔드에서 만든 API (/api/products)로 데이터를 요청합니다.

      .then((res) => res.json())

응답받은 데이터를 JSON으로 변환합니다.

      .then((data) => setProducts(data.products));

products 배열을 상태로 저장합니다.

  }, []);

의존성 배열을 빈 배열로 설정하여 최초 1회만 실행되도록 합니다.

  if (!products) return <Spinner accessibilityLabel="Loading" size="large" />;

데이터가 아직 없는 경우에는 로딩 중 스피너를 표시합니다.

  const rows = products.map((product) => {

products 배열을 반복하여 테이블의 각 행(row)을 만듭니다.

    const variant = product.variants[0] || {};

첫 번째 변형(Variant) 데이터를 꺼냅니다. 가격, SKU 등은 Variant에 포함되어 있습니다.

    return [
      <Thumbnail source={product.image?.src} alt={product.title} />,

제품 이미지를 출력합니다. Polaris의 Thumbnail을 사용하며, 이미지가 없을 경우를 대비해 ?. 연산자를 사용합니다.

      product.title,

제품의 제목을 표시합니다.

      product.status,

제품의 상태(active, draft 등)를 표시합니다.

      variant.sku || "N/A",

SKU 번호를 출력하며, 없을 경우 “N/A”로 대체합니다.

      variant.barcode || "N/A",

바코드를 출력하며, 없을 경우 “N/A”로 표시합니다.

      variant.price || "0",

가격을 출력하며, 없을 경우 “0”으로 표시합니다.

      variant.inventory_quantity ?? "N/A",

재고 수량을 출력합니다. 값이 없을 경우 “N/A”를 표시합니다.

      product.body_html?.slice(0, 80) || "No description",

제품의 상세 설명(body_html)을 80자까지만 잘라서 출력합니다. HTML 코드가 포함될 수 있어 일부만 보여주는 것이 안전합니다.

      product.metafields?.short_description?.value || "N/A",

짧은 설명(short description)은 Metafield에서 가져오며, 없을 경우 “N/A”로 대체합니다.

    ];
  });

위의 데이터 배열을 반환합니다.

  return (
    <Card title="Product List">

표 전체를 카드 형태로 감쌉니다. 타이틀은 “Product List”입니다.

      <DataTable
        columnContentTypes={[
          "text", "text", "text", "text", "text", "numeric", "numeric", "text", "text"
        ]}

각 열(column)의 데이터 타입을 지정합니다. 예: 숫자는 numeric, 일반 문자열은 text입니다.

        headings={[
          "Image", "Title", "Status", "SKU", "Barcode", "Price", "Inventory Qty", "Description", "Short Description"
        ]}

각 열의 헤더를 설정합니다.

        rows={rows}

앞서 만든 rows 배열을 테이블 본문에 출력합니다.

      />
    </Card>
  );
}

전체 UI를 마무리합니다.

이와 같이 구성하면 Shopify의 Admin 제품 목록과 유사한 구조로 데이터를 불러오고 출력할 수 있습니다

Shopify App 설정 파일들 분석

May 7, 2025 | 프로젝트들, Shopify App Tech. Stack, Shopify App 개발

Shopify 앱 개발 프로젝트를 시작하면, 루트 폴더 안에 여러 개의 익숙하지 않은 설정 파일들이 자동으로 생성되어 있는 것을 볼 수 있습니다. 이 파일들은 대부분 Shopify CLI가 앱을 생성할 때 자동으로 만들어주는 기본 구조의 일부이며, 각각의 파일은 특정한 목적과 역할을 가지고 있습니다. 이 파일들의 기능과 내용, 그리고 수정 시 주의할 점을 알고 있어야 프로젝트를 안정적으로 유지하고 에러를 방지할 수 있습니다.

가장 핵심적인 파일은 package.json입니다. 이 파일은 Node.js 기반 프로젝트의 중심 역할을 하며, 어떤 외부 라이브러리를 사용하는지, 어떤 명령어로 앱을 실행하는지 등의 정보를 담고 있습니다. 앱이 실행되지 않거나 빌드에 실패할 경우 가장 먼저 이 파일의 설정을 점검해야 합니다.

remix.config.js는 Remix 프레임워크의 구조를 설정하는 파일입니다. 페이지 라우팅, 빌드 대상 디렉토리, 무시할 파일들을 정의하며, 잘못 설정할 경우 앱 전체가 정상적으로 동작하지 않을 수 있습니다. React와 함께 작동하는 Remix는 이 파일을 기반으로 내부 구조를 판단하기 때문에 중요도가 높습니다.

만약 TypeScript를 사용하는 앱이라면 tsconfig.json 파일도 생성됩니다. 이 파일은 어떤 폴더를 검사하고 어떤 문법을 허용할지 등 TypeScript의 컴파일 방식을 정의합니다. 실수로 잘못된 설정을 추가하거나 경로를 잘못 지정하면 컴파일 오류가 발생할 수 있습니다.

보안을 위한 중요한 파일 중 하나는 .env입니다. 이 파일에는 Shopify API 키, 비밀 키, 인증 범위(SCOPES), 데이터베이스 주소 등의 민감한 정보가 저장됩니다. 따라서 절대로 GitHub와 같은 공개 저장소에 업로드되어서는 안 되며 .gitignore 파일을 통해 관리 대상에서 제외되어야 합니다.

.gitignore 파일은 Git으로 소스코드를 관리할 때 추적하지 않을 파일 목록을 정의합니다. 예를 들어 node_modules, .env, .DS_Store 같은 불필요하거나 민감한 정보가 담긴 파일들을 Git 기록에서 제외할 수 있습니다. 실수로 중요한 파일을 무시하지 않도록 조심해야 합니다.

또한 shopify.app.toml은 Shopify CLI가 앱을 실행하고 배포할 때 사용하는 설정 파일입니다. 앱 이름, 인증 범위, 웹훅 설정, 확장 프로그램 정의 등 다양한 항목이 포함되어 있습니다. 이 파일이 잘못 구성되면 앱이 인증되지 않거나 실행 자체가 되지 않을 수 있기 때문에 조심스럽게 다뤄야 합니다.

마지막으로 README.md 파일은 프로젝트의 설명서 역할을 합니다. 앱을 설치하고 실행하는 방법, 구조 설명, 협업을 위한 메모 등이 이곳에 정리됩니다. 실제 코드 실행에는 영향을 주지 않지만 협업 시 매우 중요한 문서이므로 최신 상태를 유지하는 것이 좋습니다.

이처럼 루트 폴더에 있는 설정 파일들은 단순한 보조 도구가 아니라, 앱이 제대로 작동하도록 해주는 핵심적인 구성 요소입니다. 각 파일의 역할을 이해하고, 실수로 삭제하거나 잘못 편집하는 일이 없도록 주의하면서 개발을 진행해야 합니다.

이제 아래의 표를 통해 각 파일의 이름, 기능, 주요 설정 내용, 그리고 주의할 점까지 구체적으로 확인해보시기 바랍니다.

Shopify Cli 란 무었인가요? 그리고 왜 필요한가요?

May 7, 2025 | 프로젝트들, Shopify App Tech. Stack, Shopify App 개발

Shopify CLI란 무엇이며, 어떻게 작동하나요?

Shopify 앱을 만들고 싶을 때 가장 먼저 설치하게 되는 도구 중 하나가 바로 Shopify CLI입니다.
CLI는 “Command Line Interface”의 약자로, 명령어로 앱을 만들고 설정하고 실행할 수 있는 도구입니다.

처음 시작하는 분이라면 “이건 꼭 써야 하나요?”, “GUI도 없는데 이걸 왜 써야 하죠?” 같은 의문이 들 수 있습니다.
하지만 실제로 Shopify 앱을 개발할 때 CLI는 없어서는 안 될 중요한 도구입니다.

이 글에서는 Shopify CLI가 무엇을 하고, 안에는 어떤 기능들이 포함되어 있으며, 그것이 Node.js, React, Remix와 어떻게 연결되는지를 아주 쉽게 설명해 드리겠습니다.

Shopify CLI는 무엇인가요?

Shopify CLI는 Shopify 앱이나 테마를 쉽게 만들 수 있게 도와주는 명령어 도구입니다.
우리가 Shopify 앱을 직접 개발할 때, CLI는 아래와 같은 작업을 대신 처리해 줍니다.

• 앱의 기본 구조(폴더, 파일)를 자동으로 만들어줍니다
• Shopify와 앱을 연결하는 인증 작업을 자동화해줍니다
• 앱을 로컬에서 테스트할 수 있도록 서버를 실행시켜줍니다
• 필요한 라이브러리를 자동으로 설치해줍니다
• Shopify Admin 화면에서 앱을 열어볼 수 있게 연결해줍니다

쉽게 말해, Shopify CLI는 앱 개발에 필요한 준비와 실행 과정을 자동으로 도와주는 도우미라고 할 수 있습니다.

CLI를 설치하면 무엇이 생기나요?

Shopify CLI를 설치하면 shopify라는 명령어를 사용할 수 있게 됩니다.
터미널에서 아래처럼 명령어를 입력하면 다양한 작업을 할 수 있습니다.

shopify app create

이 명령어 하나로 앱 이름, 템플릿 종류, 사용할 언어 등을 선택한 후, 앱 기본 구조 전체를 자동으로 생성해줍니다.

예를 들어 Remix 템플릿을 선택하면 내부적으로는 Node.js + Remix + React + Polaris + Shopify API 인증 구조까지 다 만들어줍니다.
우리는 그 위에 필요한 기능만 추가하면 됩니다.

CLI 내부에는 어떤 것들이 들어 있나요?

Shopify CLI는 내부적으로 여러 가지 구성 요소와 자동화 도구를 포함하고 있습니다. 주요 기능은 다음과 같습니다.

1. 템플릿 생성 기능

shopify app create 명령어로 앱 템플릿을 만들 수 있습니다. 템플릿 종류는 다음과 같습니다.

• Node.js + Remix 기반 앱 (Shopify 공식 권장 방식)
• PHP 앱, Ruby 앱 (비추천 – 대부분 Node.js를 사용함)

이 템플릿은 앱을 빠르게 만들 수 있도록 미리 파일 구조와 필요한 코드가 작성되어 있습니다.

2. OAuth 인증 자동 구성

Shopify 앱은 인증 절차(OAuth)가 필수인데, CLI로 만든 앱은 이 복잡한 인증 절차가 자동으로 세팅되어 있습니다.
우리는 API Key만 넣어주면 바로 사용할 수 있습니다.

3. 로컬 서버 실행 + Shopify Admin 연결

CLI는 앱을 실행하면서 자동으로 Shopify 상점과 연결하고, 실제 Shopify Admin 화면 안에서 우리가 만든 앱을 미리 볼 수 있게 해줍니다.

예시:

shopify app dev

이 명령어 하나면 앱이 실행되고, Shopify Admin에 자동으로 탭이 뜹니다.
Cloudflare Tunnel 또는 ngrok을 자동으로 연결해 줍니다.

그럼 Node.js, Remix, React와는 어떻게 연결되나요?

Shopify CLI는 앱의 틀을 만들어줄 뿐이고, 실제 앱의 내부는 아래 세 가지 기술이 각각의 역할을 담당합니다.

Node.js: 서버 역할

Node.js는 앱의 ‘백엔드’입니다.
Shopify API를 호출하고, 인증 정보를 처리하고, 데이터를 저장하거나 불러오는 역할을 합니다.
CLI는 이 Node.js 서버가 작동되도록 자동으로 구성하고 실행해 줍니다.

Remix: 데이터 흐름과 페이지 구성

Remix는 웹 프레임워크로, 화면에서 데이터를 어떻게 불러오고 저장할지 정해주는 구조입니다.
예를 들어 상품 목록을 보여주는 페이지를 만들 때, Remix가 Shopify API에서 상품을 불러오고 화면에 전달해 줍니다.
CLI는 Remix가 작동하도록 환경을 설정하고, 기본 페이지 예제까지 함께 제공합니다.

React: 화면 디자인

React는 실제로 사용자에게 보이는 화면을 구성하는 기술입니다.
버튼, 입력창, 표, 카드 같은 구성요소들을 만들고, 사용자의 클릭이나 입력에 반응합니다.
Shopify에서 제공하는 Polaris UI 컴포넌트도 전부 React 기반입니다.
CLI는 React 코드가 포함된 화면 컴포넌트를 자동으로 세팅해 줍니다.

쉽게 예를 들어 보면…

• shopify app create
  → 앱을 자동으로 만들고 Node.js + Remix + React 코드까지 세팅해 줍니다
• shopify app dev
  → 앱을 실행하고 Cloudflare Tunnel을 연결해서 Shopify Admin에서 바로 확인할 수 있게 합니다
• 내부적으로는:
  • Node.js가 서버(API, 인증)를 처리하고
  • Remix가 페이지를 구성하고
  • React가 화면을 보여주고
  • Polaris가 React 화면을 예쁘게 꾸며줍니다

이 모든 과정을 Shopify CLI가 미리 자동으로 연결해주기 때문에, 개발자는 기능을 추가하고 디자인만 바꾸면 되는 구조입니다.

결론: Shopify CLI는 앱 개발의 필수 도우미입니다

Shopify CLI는 단순한 명령어 도구가 아니라, Shopify 앱 개발을 처음부터 끝까지 도와주는 자동화 시스템입니다.
React, Remix, Node.js 같은 복잡한 도구들을 CLI 하나로 쉽게 연결해주며, 앱을 빠르게 만들고 테스트할 수 있도록 해줍니다.

개발을 처음 시작한 분이라도 CLI를 통해 빠르게 앱을 실행해보고, 하나씩 기능을 추가해 나가면서 Shopify 앱 개발을 체계적으로 배워갈 수 있습니다.
이제 CLI의 흐름이 이해되셨다면, 다음은 실제 앱을 만들어보고 실행하는 경험을 해보는 것이 좋습니다.

필요하시면 CLI를 기반으로 Shopify 앱을 처음부터 끝까지 만드는 실습 가이드도 제공해드릴 수 있습니다.
어떤 주제부터 실습해보고 싶으신가요?

Node.js는 Shopify 앱의 핵심 엔진

May 7, 2025 | 프로젝트들, Shopify App Tech. Stack, Shopify App 개발

Node.js란 무엇이며, Shopify 앱 개발에서 어떤 역할을 할까요?

Shopify 앱을 개발하고 싶다고 했을 때 가장 먼저 듣게 되는 말이 있습니다.
“Node.js부터 설치하세요”라는 말입니다.
하지만 개발을 처음 시작하는 분이라면, 이 말이 정확히 무슨 뜻인지 이해하기 어려울 수 있습니다.
이 글에서는 Node.js가 무엇인지, Shopify 앱에서 어떤 일을 하는지, 그리고 어떻게 사용하는지를 아주 쉽게 풀어 설명드리겠습니다.

Node.js 란 무엇인가요?

Node.js는 원래 웹 브라우저 안에서만 작동하던 **자바스크립트(JavaScript)**를 브라우저 밖에서도, 즉 컴퓨터나 서버에서 실행할 수 있게 해주는 기술입니다.
이전에는 자바스크립트로 사용자 인터페이스만 만들 수 있었지만, Node.js 덕분에 서버를 만들고, 데이터를 처리하고, 앱을 통째로 구동하는 것도 가능해졌습니다.
즉, Node.js는 자바스크립트를 프론트엔드뿐 아니라 백엔드에서도 사용할 수 있도록 해주는 프로그램입니다.

Shopify 앱 개발에서 Node.js의 역할

Shopify 앱은 단순한 웹사이트가 아닙니다.
상품 정보를 불러오고, 주문 내역을 확인하고, 사용자 설정을 저장하고, 다른 외부 API와 연결되기도 합니다.
이러한 작업들은 화면(UI)을 구성하는 React가 아닌, 백엔드에서 조용히 처리되며, 이때 중심 역할을 맡는 것이 바로 Node.js입니다.

Node.js는 Shopify 앱에서 다음과 같은 중요한 일들을 처리합니다.

Shopify에서 앱이 설치되었을 때 사용자 정보를 저장합니다
Shopify의 인증(OAuth) 절차를 처리합니다
상품, 주문, 고객 정보를 불러오기 위해 Shopify API를 호출합니다
React(Polaris) 화면에서 요청한 데이터를 받아 처리하고 결과를 반환합니다
사용자의 설정 정보를 데이터베이스에 저장하고 불러옵니다

쉽게 말하면 Node.js는 Shopify 앱의 머리와 심장 같은 존재입니다.

Node.js는 어떻게 사용하나요?

Node.js는 **터미널(명령어 입력창)**을 통해 사용합니다. 앱을 만들고 실행하며, 외부 도구를 설치하고 관리할 때도 터미널을 사용하게 됩니다.

Node.js 설치

Node.js는 공식 웹사이트(https://nodejs.org) 에서 운영체제에 맞게 설치할 수 있습니다.
설치하면 node와 npm이라는 명령어를 사용할 수 있게 됩니다.

node는 자바스크립트 파일을 실행하는 명령어입니다
npm은 Node.js에서 사용하는 다양한 도구(패키지)를 설치하고 관리하는 도구입니다

예를 들어 Shopify 관련 기능을 사용하려면 아래 명령어로 설치합니다.

npm install @shopify/shopify-api

이렇게 하면 Shopify API와 통신할 수 있는 도구가 앱에 추가됩니다.

앱 실행하기

Shopify 앱은 Node.js로 만든 웹 서버를 실행해야 작동합니다.
일반적으로 다음 명령어로 서버를 실행합니다.

npm run dev

그러면 컴퓨터에서 http://localhost:3000 같은 주소로 서버가 켜지며, 앱이 작동하게 됩니다.
외부에서 접속하려면 Render, Cloudflare Tunnel 같은 서비스와 연결할 수 있습니다.

코드 구조 이해하기

Shopify 앱의 코드 구조는 대체로 다음과 같이 구성됩니다.

/app
  /routes         ← Shopify와 통신하는 API 경로
  /middleware     ← 인증, 보안 필터 등
  server.js       ← 앱의 시작 파일
  .env            ← 비밀 키(Shopify API KEY 등)

server.js는 앱의 메인 엔진 역할을 하며, 여기에 Shopify API 연결, 인증 처리, 데이터 처리 기능이 들어갑니다.
React와 Polaris는 보통 /frontend 폴더 안에서 화면(UI)을 담당합니다.

Node.js 기본 문법 쉽게 이해하기

Node.js는 자바스크립트로 만들어졌기 때문에, 자바스크립트 문법과 비슷하지만 서버 작업을 위해 필요한 몇 가지 중요한 문법이 추가로 존재합니다.

모듈 가져오기

외부 도구나 파일을 사용할 때는 require 또는 import를 사용합니다.

const express = require('express'); // 일반 방식

또는 최신 방식:

import express from 'express'; // ESModule 방식

express는 Node.js에서 가장 널리 쓰이는 서버 프레임워크입니다.

서버 시작하기

아래는 Node.js를 이용해 기본 웹 서버를 시작하는 예제입니다.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello Shopify!');
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다');
});

이 코드는 localhost:3000 주소로 접속했을 때 “Hello Shopify!”라는 문장을 화면에 보여주는 간단한 서버입니다.
app.get()은 사용자가 / 주소로 접근했을 때 무엇을 보여줄지 정의하고, res.send()는 사용자에게 보낼 응답을 정합니다.
app.listen()은 몇 번 포트에서 서버를 실행할지 지정합니다.

환경 변수 사용하기

Shopify API Key처럼 민감한 정보를 코드에 직접 쓰면 안 됩니다.
대신 .env라는 파일을 만들어 변수로 관리합니다.

예시:

SHOPIFY_API_KEY=abcd1234
SHOPIFY_API_SECRET=efgh5678

Node.js에서 이 값을 사용하려면 다음처럼 코딩합니다.

require('dotenv').config();

const apiKey = process.env.SHOPIFY_API_KEY;

이렇게 하면 외부에 노출되지 않도록 중요한 값을 보호하면서 사용할 수 있습니다.

비동기 처리 (async/await)

Node.js는 외부 서버에서 데이터를 불러오거나 파일을 읽을 때 시간이 걸리는 작업을 많이 처리합니다.
이때는 async/await 문법을 사용해 비동기 처리를 합니다.

app.get('/products', async (req, res) => {
  const data = await fetchShopifyProducts();
  res.json(data);
});

이 예제는 fetchShopifyProducts() 함수가 상품 목록을 불러오면, 그 결과를 사용자에게 JSON 형식으로 반환합니다.
이러한 방식은 데이터를 기다렸다가 처리할 수 있어 매우 유용합니다.

결론: Node.js는 Shopify 앱의 핵심 엔진입니다

React는 화면에 보여지는 부분을 담당하고, Node.js는 그 화면 뒤에서 모든 정보를 처리하고 전달합니다.
Shopify 앱을 만들기 위해서는 Node.js가 꼭 필요하며, 그 역할은 단순한 실행 환경을 넘어서 앱 전체의 논리를 책임지는 중심이 됩니다.

처음에는 Node.js의 구조나 터미널 명령어들이 익숙하지 않을 수 있지만, 하나씩 따라하면서 익히다 보면 어느 순간 자연스럽게 익숙해지게 됩니다.
React와 Node.js를 동시에 사용할 수 있다는 점은 개발 생산성을 크게 높여주며, Shopify 앱을 직접 만들고 싶은 분들에게는 더없이 좋은 기회가 될 수 있습니다.

React 알아보기

May 7, 2025 | 프로젝트들, Shopify App Tech. Stack, Shopify App 개발

Shopify 앱 개발을 위한 React 기초 완전 정리

Shopify 앱을 개발하려면 여러 가지 기술이 필요하지만, 그중에서도 화면을 구성하고 데이터를 표시하는 데 가장 중요한 기술이 바로 React입니다.
React는 전 세계 수많은 웹사이트들이 사용하는 프론트엔드 라이브러리이며, Shopify도 자체 UI 툴킷인 Polaris를 React 기반으로 만들었기 때문에, 앱 개발에 있어 React는 사실상 필수입니다.

하지만 React는 처음 접하는 사람에게는 어렵게 느껴질 수 있습니다. HTML과 비슷해 보이지만 다르고, 자바스크립트 같으면서도 새로운 문법이 많기 때문입니다.
이 글에서는 Shopify 앱을 개발하는 데 꼭 필요한 React의 핵심 개념과 문법만 정리하여, 하나의 글에서 완전히 이해할 수 있도록 안내드리겠습니다.

React란 무엇인가요?

React는 페이스북(메타)이 만든 오픈소스 JavaScript 라이브러리로, 복잡한 웹사이트의 화면을 효율적으로 만들기 위해 사용됩니다.
기존에는 HTML, CSS, JavaScript를 따로 작성했지만, React는 이 모든 것을 컴포넌트라는 단위로 묶어서 재사용 가능한 UI 조각으로 만들 수 있습니다.

예를 들어, 상품 하나를 보여주는 카드 화면을 만든다면 React에서는 다음처럼 작성할 수 있습니다.

function ProductCard() {
  return (
    <div>
      <h2>iPhone 15</h2>
      <p>₩1,500,000</p>
    </div>
  );
}

이렇게 만든 ProductCard는 쇼핑몰 안에서 여러 번 재사용할 수 있는 UI 컴포넌트가 됩니다.

Shopify 앱에서 왜 React가 필요한가요?

Shopify 앱은 Shopify Admin 화면 안에서 실행되며, 이를 Embedded App이라고 부릅니다.
이 Embedded App 안에서 우리가 만든 화면이 Shopify의 디자인과 자연스럽게 어울리게 하려면 Polaris 컴포넌트를 사용해야 합니다.

Polaris는 전부 React로 구성되어 있어서, Polaris를 쓰기 위해서는 React 문법을 이해하고 있어야 합니다.
따라서 Shopify 앱 개발자는 React 문법을 기본적으로 숙지해야 합니다.

React에서 꼭 알아야 할 기본 문법과 개념

JSX – HTML과 JavaScript의 만남

React에서 사용하는 문법은 JSX라고 불리며, HTML처럼 보이지만 그 안에 JavaScript 코드를 섞어 쓸 수 있는 형식입니다.

const name = "jay";
return <h1>Hello, {name}</h1>;

중괄호 {} 안에는 변수, 계산식, 함수 호출 등을 자유롭게 넣을 수 있습니다.

컴포넌트 – 화면의 최소 단위

React에서는 모든 화면 요소를 컴포넌트라는 단위로 나누어 만듭니다.
컴포넌트는 함수 형태로 작성하며, 이름은 반드시 대문자로 시작합니다.

function Welcome() {
  return <h2>Welcome!</h2>;
}

이렇게 만든 컴포넌트는 <Welcome />처럼 태그처럼 사용해서 화면에 표시할 수 있습니다.

Props – 컴포넌트에 값 전달하기

컴포넌트에 값을 전달할 때는 props라는 메커니즘을 사용합니다.

function Greeting(props) {
  return <h3>안녕하세요, {props.name}님!</h3>;
}

// 사용 예시:
<Greeting name="Jay" />

props는 컴포넌트를 재사용하면서 각각 다른 값을 넣을 수 있도록 해주는 역할을 합니다.

useState – 화면 상태 저장하기

useState는 버튼 클릭, 입력 등으로 값이 바뀌는 경우에 상태를 저장해주는 기능입니다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 예제처럼 버튼을 누르면 숫자가 증가하도록 만들 수 있습니다.

useEffect – API 호출이나 타이밍 제어

useEffect는 컴포넌트가 처음 화면에 나타날 때, 혹은 특정 값이 바뀔 때 실행되는 함수입니다.
보통 Shopify API로 데이터를 불러올 때 사용됩니다.

import { useEffect, useState } from 'react';

function Products() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("/api/products")
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

[]를 넣으면, 이 코드는 컴포넌트가 처음 실행될 때 한 번만 동작합니다.

이벤트 처리 – 사용자 동작을 반영하기

버튼 클릭, 입력 값 변경 등의 사용자 동작에 반응하려면 이벤트 처리를 해야 합니다.

function Form() {
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
}

onChange, onClick 같은 속성을 통해 동작을 지정할 수 있습니다.

조건부 렌더링 – 상황에 따라 다르게 보이기

조건에 따라 다른 컴포넌트를 보여주고 싶을 때는 삼항 연산자 또는 논리 연산자를 사용합니다.

{isLoggedIn ? <Dashboard /> : <LoginForm />}

반복 렌더링 – 목록 보여주기

배열 데이터를 화면에 반복해서 표시할 때는 .map()을 사용합니다.

const items = ['사과', '바나나', '포도'];

return (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

각 항목마다 고유한 key 값을 넣어주는 것이 중요합니다.

Polaris와 함께 쓰는 React

Shopify에서 제공하는 Polaris 컴포넌트들은 모두 React 기반이므로, 위에서 배운 문법들을 그대로 적용할 수 있습니다.

예를 들어 Polaris의 버튼을 사용하는 방식은 다음과 같습니다.

import { Button } from "@shopify/polaris";

function MyButton() {
  return <Button onClick={() => alert("클릭됨!")}>클릭하세요</Button>;
}

React 문법 정리

결론: React는 Shopify 앱 개발의 핵심입니다

처음 React를 접할 때는 문법도 낯설고, 구조도 복잡하게 느껴질 수 있습니다.
하지만 하나하나 개념을 이해하고, 작은 예제를 따라 만들다 보면 점점 익숙해집니다.

Shopify 앱은 단순히 화면만 만드는 것이 아니라, 데이터를 가져오고, 사용자 입력을 처리하며, Shopify 플랫폼과 연동되는 복합적인 웹 앱입니다.
React는 그 모든 흐름을 깔끔하게 구성해주는 중심 도구입니다.

Shopify 앱을 개발하고자 하는 분이라면, React는 반드시 익혀야 할 기술이며, 이 글을 통해 시작하신다면 그 첫 단추를 잘 끼우신 것입니다.