글에 포함된 내용들
🛠️ 3단계: 개발환경 셋업 (CLI, GitHub, Render 등)
– 내 앱을 코딩하고 배포할 준비 완료!
Shopify 앱 개발을 시작하려면 내 컴퓨터에 개발환경을 먼저 준비해야 합니다.
이 단계는 “내 앱을 어디서, 어떻게 만들고 실행할 것인지”를 정리하고 준비하는 과정입니다.
🧰 필요한 도구 리스트
| 도구 | 설명 |
|---|---|
| Node.js | 앱 실행을 위한 자바스크립트 환경 |
| Git & GitHub | 소스코드 관리 |
| Shopify CLI | 앱 생성, 실행, 배포를 도와주는 도구 |
| Render.com | 완성된 앱을 인터넷에 배포할 서버 |
✅ STEP 1: Node.js 설치
👉 다운로드 링크:
- LTS(Long Term Support) 버전 선택
- 설치 후 터미널(cmd)에 아래 명령어 입력해 확인:
node -v
npm -v
버전이 잘 출력되면 설치 완료입니다.
✅ STEP 2: Git & GitHub 계정 만들기
▶ Git 설치
- https://git-scm.com 에서 운영체제에 맞게 설치
▶ GitHub 계정 생성
- https://github.com
- 가입 후
New Repository에서 앱 저장소 생성 준비
✅ STEP 3: Shopify CLI 설치
Shopify에서 공식 지원하는 앱 개발 툴입니다.
▶ 설치 방법 (Node 기반)
npm install -g @shopify/cli
설치 후 버전 확인:
shopify version
✅ STEP 4: Shopify CLI 로그인
아래 명령어를 입력하세요:
shopify login --store your-store-name.myshopify.com
여기서
your-store-name.myshopify.com은 Development Store 주소입니다.
아직 안 만들었다면 [2단계: 파트너 계정 생성]에서 따라해주세요.
✅ STEP 5: Shopify 앱 프로젝트 생성
Shopify에서 기본 구조를 자동으로 만들어주는 명령어입니다.
shopify app create node
입력 예시:
- 앱 이름:
my-first-app - 프레임워크 선택: Node.js / React
자동으로 폴더가 생성되고, 기본 파일들이 구성됩니다.
✅ STEP 6: 앱 실행 (로컬 개발 서버 구동)
아래 명령어로 앱을 실행합니다:
cd my-first-app
npm install
shopify app dev
- 이 명령어는 로컬 서버를 실행하고,
- Development Store에 자동 설치하는 과정을 진행합니다.
성공 화면 예시:
- 앱이 브라우저에서 실행되며
- “앱이 성공적으로 Development Store에 설치되었습니다” 메시지가 나옵니다.
✅ STEP 7: GitHub 연결
git init
git remote add origin https://github.com/yourusername/my-first-app.git
git add .
git commit -m "Initial commit"
git push -u origin main
코드 백업 및 버전 관리용으로 GitHub 연결은 필수입니다.
✅ STEP 8: Render.com에 배포 준비 (선택)
Render는 클라우드에 내 앱을 올려서
실제 사용자에게 공개할 수 있도록 도와줍니다.
- https://render.com 에 가입
- GitHub 연동 후 → 새 웹 서비스 생성
- 내 앱 레포 선택 → 자동 배포 설정
- 환경변수 등록 (.env) 필요 (Shopify API Key 등)
초보자는 일단 로컬에서 테스트 후,
나중에 5~6단계 이후 배포만 하셔도 좋습니다.
💡 마무리 요약
| 단계 | 설명 |
|---|---|
| Node.js 설치 | 앱 실행 환경 구축 |
| GitHub 계정 생성 | 코드 관리 |
| Shopify CLI 설치 및 로그인 | 앱 생성 및 테스트 준비 |
| 앱 생성 후 실행 | 실제 Development Store에서 확인 |
| GitHub에 업로드 | 백업 및 협업 |
| Render 배포 | 전 세계 누구나 내 앱 사용 가능 (선택) |
🧪 실전 미션 체크리스트
| 할 일 | 완료 |
|---|---|
| Node.js 설치 | ✅ |
| GitHub 계정 생성 및 연동 | ✅ |
| Shopify CLI 설치 | ✅ |
| 앱 프로젝트 생성 및 실행 | ✅ |
| 내 Development Store에 앱이 연결되는지 확인 | ✅ |
🎯 다음 글 예고
👉 4단계: 앱 구조 설계 – 어떤 기능을 어떻게 구성할지 설계해보기
(화면 구성, 사용자 흐름, 기능 목록 정리 등!)
필요하시면 이 글에 포함될 실행 예시 화면 스크린샷이나
명령어 전체 리스트 PDF,
개발 환경 체크리스트 시트도 함께 제작해드릴 수 있습니다.
바로 다음 단계로 넘어가볼까요? 😊
