Firebase 기반 커스텀 이커머스 구축

저는 처음부터 커스텀 이커머스 사이트를 구축했습니다. 기성 플랫폼을 사용하지 않고, Firebase Realtime Database와 Netlify를 활용했습니다.

목표는 POS 단말기 리셀러를 지원하는 것이었습니다. 이들에게는 카탈로그, 가격 변동 옵션, 그리고 관리자 패널이 필요했습니다. 또한 영업팀이 사이트에서 직접 주문을 넣을 수 있어야 했습니다.

제가 어떻게 구축했는지, 그리고 그 과정에서 배운 점들을 소개합니다.

기술 스택

• Vanilla HTML, CSS, JS. • 데이터 관리를 위한 Firebase Realtime Database. • 파일 저장을 위한 Firebase Storage. • 호스팅 및 함수 실행을 위한 Netlify.

주요 결정 사항

1. 데이터베이스 분리

이커머스 데이터베이스를 내부 관리용 데이터베이스와 분리했습니다. 이를 통해 상업용 데이터가 급여나 예산 같은 민감한 관리자 데이터와 섞이는 것을 방지했습니다.

2. 글로벌 가격 아카이브

모든 제품 내부에 가격 플랜을 넣는 대신, 글로벌 요금(tariffs) 폴더를 만들었습니다. 제품에는 ID 배열만 포함됩니다. 이렇게 하면 데이터 중복을 피할 수 있습니다. 플랜이 변경되면 한 번만 업데이트하면 됩니다.

3. 원자적 주문 (Atomic Orders)

여러 사람이 동시에 주문을 할 때 레이스 컨디션(race condition)이 발생할 수 있습니다. 두 사람이 동일한 주문 번호를 읽게 되면 주문 하나가 사라질 수도 있습니다. 저는 Firebase의 runTransaction()을 사용하여 모든 주문이 고유하고 순차적인 번호를 부여받도록 했습니다.

4. 안전한 관리자 액세스

소스 코드에 비밀번호를 저장하지 않았습니다. Web Crypto API를 통해 PBKDF2를 사용했습니다. 이는 무차별 대입 공격(brute-force attack)을 매우 어렵게 만듭니다. 코드에는 솔트(salt)와 해시(hash)만 포함됩니다.

배운 점

• falsy 값을 주의하세요. JavaScript에서 0은 falsy입니다. 제품 가격이 0일 경우, "price || null"과 같은 단순한 체크는 가격을 삭제해 버립니다. 0을 포함하려면 항상 "price != null"을 사용하세요.

• HTTP 헤더에서 CSP를 설정하세요. Content Security Policy를 위한 메타 태그는 서브도메인에 대한 와일드카드를 지원하지 않습니다. Firebase는 동적 서브도메인을 사용합니다. 저는 이를 작동시키기 위해 CSP 설정을 netlify.toml로 옮겼습니다.

• 실질적인 보호를 위해 보안 규칙(Security Rules)을 사용하세요. UI에서 버튼을 숨기는 것에만 의존하지 마세요. Firebase 규칙을 사용하여 데이터의 읽기 및 쓰기 권한을 제한하세요.

커스텀 솔루션을 구축하려면 신중한 아키텍처 선택이 필요합니다. 트랜잭션 처리나 헤더 설정과 같은 작은 디테일이 운영 환경에서의 큰 장애를 방지합니다.

Source: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec