DAY 1: 프로젝트 개요 및 기술 스택 선정
📌 목표:
- 프로젝트 전반적인 개요를 정리하고 목표를 명확히 한다.
- Shopify 앱 개발에 필요한 기술 스택을 조사하고 결정한다.
- 개발 환경을 설정하고 앱이 Shopify에 정상적으로 로드되는지 확인한다.
📍 STEP 1: 프로젝트 개요 정리
✅ 해야 할 일:
- 프로젝트의 최종 목표를 다시 한번 명확히 정리한다.
- 앱의 핵심 기능을 정의하고 필요한 Shopify API를 조사한다.
- 작업 일정을 세부적으로 계획한다.
🛠 실제 작업:
- Shopify 앱 개발 목표 정리
- 앱이 해결할 문제를 문서로 정리 (예: “Shopify Admin에서 제품 및 인벤토리를 더 쉽게 관리할 수 있도록 필터 및 일괄 수정 기능을 확장”)
- 앱의 주요 기능을 간략히 정리 (예: “제품 검색 필터 기능, 다중 선택 후 일괄 수정 기능, 필터 저장 기능”)
- 앱이 필요로 하는 Shopify API 조사 (예: Product API, Inventory API, Bulk Operation API)
- 기능 목록 및 작업 일정 세분화
- 앱이 제공할 주요 기능을 리스트업
- 각 기능을 개발하기 위해 필요한 세부 작업을 정리
- 프로젝트 일정과 개발 순서를 정리
📌 결과물:
- 프로젝트 개요 문서 (앱이 해결할 문제 + 기능 목록 + Shopify API 리스트)
- 일정 및 작업 리스트 정리
📍 STEP 2: 기술 스택 조사 및 선정
✅ 해야 할 일:
- Shopify 앱을 개발하는 데 필요한 언어, 프레임워크, 도구를 선정한다.
- Shopify의 Embedded App 개발 방식을 이해하고, API 사용법을 학습한다.
- 개발 시 사용할 주요 라이브러리 및 SDK를 결정한다.
🛠 실제 작업:
- Shopify 앱 개발 방식 조사
- Shopify 앱 개발에는 Custom App과 Public App이 있음
- 이번 프로젝트는 Shopify Admin 내부에서 실행되므로 Embedded App 방식으로 개발
- Shopify Embedded App 개발 시 필요한 주요 기술 조사:
- Shopify App Bridge (Admin과 통신)
- Shopify Polaris (UI 라이브러리)
- Shopify GraphQL API (데이터 가져오기)
- 프레임워크 및 언어 선택
- Shopify 공식 문서에서 추천하는 Node.js + React 사용
- 백엔드: Node.js (Express.js)
- 프론트엔드: React.js + Shopify Polaris
- 데이터 요청: Shopify GraphQL API 사용
- 인증: OAuth 2.0
- 필요한 도구 및 라이브러리 설치 목록 정리
- Shopify CLI (앱 개발을 위한 도구)
- Ngrok (Shopify 앱을 로컬에서 테스트할 때 필요)
- Git (버전 관리)
📌 결과물:
- 기술 스택 정리 문서
- 사용할 주요 도구 및 라이브러리 목록
📍 STEP 3: 개발 환경 설정
✅ 해야 할 일:
- Shopify Partner 계정을 생성하고 개발 환경을 구축한다.
- Shopify CLI를 이용해 새로운 앱 프로젝트를 생성한다.
- 앱을 로컬 환경에서 실행하고 Shopify Admin에 임베드되는지 확인한다.
🛠 실제 작업:
- Shopify Partner 계정 생성 및 설정
- Shopify Partner 사이트 (https://partners.shopify.com)에 접속
- 계정 생성 후 New App → Custom App 선택
- Shopify 개발 스토어 생성 (테스트용 스토어)
- Shopify CLI 설치 및 앱 프로젝트 생성
npm install -g @shopify/cli shopify app create node --name bulk-editor-appbulk-editor-app이라는 폴더가 생성됨- 기본 폴더 구조:
/bulk-editor-app ├── frontend (React UI) ├── backend (Node.js API) ├── shopify.app.toml (설정 파일) ├── package.json ├── README.md
- Ngrok을 이용한 로컬 서버 실행
- Shopify 앱은 HTTPS에서만 실행 가능하므로 Ngrok 사용
shopify app dev- Shopify Admin에서 앱이 정상적으로 로드되는지 확인
📌 결과물:
- Shopify Partner 계정 생성 및 개발 스토어 연결 완료
- Shopify CLI를 이용해 앱 프로젝트 생성 완료
- 로컬 서버 실행 후 Shopify Admin에서 앱 로딩 확인
📍 STEP 4: Git 리포지토리 생성 및 초기 설정
✅ 해야 할 일:
- 프로젝트를 GitHub에 업로드하여 버전 관리를 시작한다.
.gitignore파일을 설정하고 불필요한 파일을 제외한다.
🛠 실제 작업:
- GitHub 리포지토리 생성
- GitHub에서 새로운 리포지토리 생성 (
bulk-editor-app) - 로컬 프로젝트와 연결
git init git remote add origin https://github.com/사용자이름/bulk-editor-app.git git add . git commit -m "Initial commit" git push -u origin main - GitHub에서 새로운 리포지토리 생성 (
.gitignore파일 설정- 다음과 같은 내용 추가:
node_modules/ .env .DS_Store /frontend/node_modules
- 다음과 같은 내용 추가:
📌 결과물:
- GitHub 리포지토리 연결 완료
- 프로젝트의 첫 번째 커밋 완료
📍 STEP 5: 앱의 기본 UI 확인 및 테스트
✅ 해야 할 일:
- Shopify Admin에서 앱이 정상적으로 로드되는지 확인한다.
- 기본 UI 화면을 살펴보고 Shopify Polaris 적용을 준비한다.
🛠 실제 작업:
- 로컬 서버 실행
shopify app dev- 브라우저에서 Shopify Admin 열고 Apps → 내 앱 선택
- 기본 UI 화면 확인
- 앱이 정상적으로 로드되었는지 확인
- React 기반의 기본 화면이 표시되는지 테스트
- 이슈 발생 시 디버깅
- 콘솔 에러 체크
.env파일 설정 확인- Ngrok이 제대로 실행되고 있는지 확인
📌 결과물:
- Shopify Admin에서 앱이 정상적으로 로드됨
- 초기 화면이 표시되며 앱 실행 확인 완료
✅ DAY 1 마무리: 최종 점검
- 프로젝트 개요 문서 정리
- 기술 스택 선정 및 문서화
- Shopify Partner 계정 및 개발 스토어 설정
- Shopify CLI 및 Ngrok을 이용해 앱 실행 테스트
- GitHub 리포지토리 생성 및 초기 코드 커밋
- Shopify Admin에서 앱이 정상적으로 로드되는지 확인
💡 다음 단계:
DAY 2에서는 Shopify GraphQL API와 Bulk Operation API를 학습하고, 앱에서 사용할 데이터 모델을 설계할 예정! 🚀
