다음과 같이 프로젝트 일정을 정리했습니다. 각 하루를 DAY 1, DAY 2... 형식으로 구성하고, 목표, 학습할 내용, 작업할 내용, 결과물을 상세하게 정리했습니다.
글에 포함된 내용들
Shopify 앱 개발 프로젝트 일정
목표: Shopify Admin의 Product와 Inventory의 Bulk Edit 기능 및 Filter 기능을 확장하는 앱 개발
기간: 10일 (주말 제외, 2주간 진행)
마감일: 2/28
DAY 1: 프로젝트 개요 및 기술 스택 선정
- 목표:
- 프로젝트 전반적인 개요 정리
- Shopify 앱 개발에 필요한 기술 스택 조사 및 결정
- 개발 환경 설정
- 학습할 내용:
- Shopify 앱 개발을 위한 기본 개념 (Shopify API, Admin Extensions 등)
- Shopify의 Embedded App 개발 방식
- Shopify의 Bulk Edit 및 Filter 기능의 동작 방식
- 작업할 내용:
- Shopify 개발자 계정 생성 및 Shopify Partner Dashboard 세팅
- Shopify 앱 템플릿 선택 (Node.js + React 등)
- 로컬 개발 환경 구성 (Shopify CLI, ngrok 세팅 등)
- 프로젝트 리포지토리 생성 및 초기 설정
- 결과물:
- Shopify Partner 계정 설정 완료
- 프로젝트 리포지토리 초기화 완료
- 로컬 개발 환경에서 Shopify 앱 실행 테스트
DAY 2: Shopify API와 GraphQL 학습 및 데이터 모델링
- 목표:
- Shopify Admin API 및 GraphQL을 학습하여 데이터 흐름 이해
- 제품 및 인벤토리 데이터 구조 분석
- 앱에서 필요한 데이터 모델 정의
- 학습할 내용:
- Shopify Admin API 개념 및 사용법
- GraphQL을 활용한 Shopify 데이터 쿼리 방법
- Bulk Operation API 사용법
- 작업할 내용:
- Shopify GraphQL API를 사용하여 Product 및 Inventory 데이터 가져오기
- Bulk Operation API를 활용한 대량 데이터 처리 실험
- 데이터 모델링 문서화
- 결과물:
- Shopify API 호출 테스트 완료
- 앱에서 사용할 데이터 모델 정의
DAY 3: 기본 UI 설계 및 Shopify Embedded App 설정
- 목표:
- 앱의 기본 UI 설계
- Shopify Admin과 통합하는 Embedded App 환경 설정
- 학습할 내용:
- Shopify App Bridge와 Polaris UI 라이브러리 사용법
- React를 활용한 Shopify Admin UI 구성 방식
- 작업할 내용:
- 기본 UI Wireframe 설계 (Bulk Edit 화면, Filter 화면)
- Polaris UI 라이브러리를 이용해 기본 레이아웃 구현
- Shopify App Bridge 설정 및 Admin 내에서 앱 로딩 테스트
- 결과물:
- 기본 UI 프로토타입 생성
- Shopify Admin에서 앱이 정상적으로 로딩되는지 확인
DAY 4: Bulk Edit 기능 구현 – 데이터 가져오기 및 UI 구성
- 목표:
- 제품 목록을 불러오고 UI에 표시하는 기능 개발
- 사용자 인터페이스에서 여러 제품을 선택할 수 있도록 구현
- 학습할 내용:
- Shopify의 Product API 활용법
- React에서 API 데이터를 효율적으로 관리하는 방법
- 작업할 내용:
- GraphQL을 이용해 Shopify에서 Product 데이터 가져오기
- Polaris UI를 사용하여 제품 목록을 UI에 표시
- 체크박스를 활용한 다중 선택 기능 구현
- 결과물:
- Shopify에서 제품 데이터를 불러와 화면에 표시
- 사용자 인터페이스에서 다중 선택 가능
DAY 5: Bulk Edit 기능 구현 – 일괄 수정 기능 추가
- 목표:
- 선택된 제품의 가격, 재고 수량 등을 한 번에 수정할 수 있는 기능 개발
- 학습할 내용:
- Shopify API를 활용한 데이터 업데이트 방법
- GraphQL Mutation을 활용한 Bulk Update 구현
- 작업할 내용:
- 사용자가 입력한 값으로 제품 데이터 업데이트
- 일괄 수정 후 결과를 화면에 즉시 반영하도록 구현
- 에러 처리 및 성공 메시지 표시
- 결과물:
- 다중 선택한 제품의 정보를 한 번에 변경 가능
- UI에서 변경 사항이 즉시 반영됨
DAY 6: 필터 기능 개발 – 필터 조건 설정 UI
- 목표:
- 사용자가 원하는 조건을 입력하여 제품 목록을 필터링할 수 있도록 구현
- 학습할 내용:
- Shopify API에서 제품 필터링하는 방법
- Polaris UI의 필터 컴포넌트 활용법
- 작업할 내용:
- 카테고리, 가격, 재고 수량 등 다양한 필터 옵션 추가
- 필터 조건에 따라 제품 목록이 실시간으로 업데이트되도록 구현
- 결과물:
- 필터링 옵션을 적용하여 원하는 제품만 검색 가능
DAY 7: 필터 기능 개발 – 필터 설정 저장 및 로드 기능
- 목표:
- 사용자가 자주 사용하는 필터를 저장하고 다시 불러올 수 있는 기능 개발
- 학습할 내용:
- 사용자별 데이터 저장 방식 (localStorage vs Shopify API)
- React 상태 관리를 활용한 필터 설정 저장
- 작업할 내용:
- 필터 설정 저장 및 로드 기능 구현
- UI에서 필터를 선택하면 자동으로 저장된 값 로드
- 결과물:
- 사용자가 설정한 필터를 저장하고 다시 사용할 수 있음
DAY 8: 최적화 및 성능 개선
- 목표:
- API 호출 최적화
- 불필요한 렌더링을 줄여 성능 개선
- 학습할 내용:
- React의 useMemo, useCallback 활용법
- Shopify API 요청 최적화 방법
- 작업할 내용:
- 불필요한 API 호출 줄이기
- React 상태 관리 개선
- 결과물:
- 빠르고 최적화된 UI 제공
DAY 9: 앱 테스트 및 디버깅
- 목표:
- 전체 기능을 점검하고 버그 수정
- 학습할 내용:
- Shopify 앱 배포 전 테스트 방법
- 디버깅 도구 활용법
- 작업할 내용:
- 앱의 모든 기능 테스트 및 오류 수정
- 다양한 시나리오에서 테스트 수행
- 결과물:
- 완성된 앱이 정상 작동하는지 확인
DAY 10: 앱 배포 및 문서화
- 목표:
- Shopify App Store에 배포 준비
- 사용 설명서 및 문서화
- 작업할 내용:
- 앱 제출을 위한 Shopify 요구사항 체크
- README 및 사용법 가이드 작성
- 결과물:
- Shopify App Store에 제출 가능한 상태
이제 일정에 따라 진행하면 2/28일까지 앱을 완성할 수 있을 거예요! 🚀 추가할 내용이 있으면 알려주세요. 😊
