AI 수익화 하기

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

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

Shopify App 설정 파일들 분석

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

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

Shopify CLI란 무엇이며, 어떻게 작동하나요? Shopify 앱을 만들고 싶을 때 가장 먼저 설치하게 되는 도구 중 하나가 바로 Shopify CLI입니다. CLI는 “Command Line Interface”의 약자로, 명령어로 앱을 만들고 설정하고 실행할 수 있는 도구입니다. 처음 시작하는 분이라면 “이건 꼭 써야 하나요?”, “GUI도 없는데 이걸 왜 써야 하죠?” 같은 의문이 들 수 있습니다. 하지만 실제로 Shopify 앱을 개발할 때 CLI는 없어서는 안 될...
React 알아보기

React 알아보기

Shopify 앱 개발을 위한 React 기초 완전 정리 Shopify 앱을 개발하려면 여러 가지 기술이 필요하지만, 그중에서도 화면을 구성하고 데이터를 표시하는 데 가장 중요한 기술이 바로 React입니다. React는 전 세계 수많은 웹사이트들이 사용하는...

read more
Remix 알아보기

Remix 알아보기

Remix의 전체 개념과 Shopify 앱 개발에서의 역할 웹사이트나 웹 앱을 만드는 도구는 정말 많습니다. 그중에서도 Remix는 최근 많은 개발자들에게 주목받고 있는 신세대 웹 프레임워크입니다. React 기반이지만, 단순히 UI만 만드는 것이 아니라 웹사이트...

read more