> For the complete documentation index, see [llms.txt](https://commerce-1.gitbook.io/commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://commerce-1.gitbook.io/commerce/readme.md).

# README

<figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FOOYa6w35Xei9rqz0mACu%2F20240904173307.png?alt=media&amp;token=a7210663-b0e4-4541-9c2d-45ee85750b67" alt=""><figcaption></figcaption></figure>

## :information\_source: **프로젝트 소개**

상품을 판매하고 구매할 수 있는 서비스입니다.

**주요기능**

1. 카테고리별 상품 조회
2. 상품 구매 / 구매내역 조회
3. 상품 등록 / 수정 / 삭제&#x20;
4. 판매자 주문 관리
5. 회원가입 / 로그인

## ⚙️**개발환경**

* **개발 인원** : 1인
* **개발 기간** : 2024.08.07 - 2024.09.03 (4주)
* **사용 기술**
  * **코어 스택** : React, Javascript
  * **상태 관리** : React Query, ContextAPI
  * **스타일링** : TailwindCSS
  * **디자인/설계** : Figma
  * **백엔드 서비스** : Firebase

## 🖥️ **화면 기획** <a href="#undefined-2" id="undefined-2"></a>

* **와이어프레임**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FBkR4rxXM6rAjPLcBhzoU%2F20240906113434.png?alt=media&amp;token=19060990-4daf-4237-bea4-b7d38936d724" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FLSub5fG0snNqMrtWQOWV%2F20240906113443.png?alt=media&amp;token=a33e700d-89ce-4574-84dc-cd699997de16" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FItjREjfkkq5NG3d34Ez0%2F20240906113452.png?alt=media&amp;token=f850182e-d929-4b4d-90d1-ca236d582266" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FMFlk2OfUELJ00bTHWEja%2F20240906113500.png?alt=media&amp;token=bcf31ca7-bbbb-44d9-bb8f-233579cd8f7b" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2Fj3dQrUCy6qHG7S55Q6Ww%2F20240906113518.png?alt=media&amp;token=565cb813-feba-4f32-a2d2-d86ae02ffa57" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FRiCmxFMrPp6YIub0VALk%2F20240906113509.png?alt=media&amp;token=6b6a5204-041e-44a1-9bad-7e280fb0b9b3" alt=""><figcaption></figcaption></figure></div>

* **유저플로우**

<figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FPgpcm9zmAesxTwu494If%2F20240906113257.png?alt=media&amp;token=971f6a4c-4eb7-4409-a2b3-8d6703534e01" alt=""><figcaption></figcaption></figure>

## 🔧 **기술적 의사결정**

**프론트엔드 라이브러리: React**

* **재사용 가능한 컴포넌트** : 컴포넌트를 쉽게 만들고 재사용할 수 있음.
* **선언적 코드** : 선언적 접근 방식으로 UI 상태에 따라 뷰를 자동으로 업데이트하여, 코드를 직관적으로 작성할 수 있음.
* **풍부한 생태계와 커뮤니티** : 다양한 서드파티 라이브러리와 도구들을 쉽게 통합할 수 있음, 대규모 커뮤니티가 있으며, 꾸준히 발전하는 최신기술을 적용할 수 있음.

**상태 관리 : ContextAPI**

* **단순함과 경량성 :** 추가 라이브러리를 설치하고 관리할 필요가 없어 프로젝트를 경량화할 수 있음.
* **필요 충분한 기능** : 프로젝트의 범위에서는 Context API가 제공하는 기능이 충분하기 때문에 복잡한 상태 관리 라이브러리가 필요하지 않음.

**상태 관리 : React query**

* **데이터 페칭 및 캐싱의 간편화** : 서버 상태를 관리하고, 데이터를 페칭 및 캐싱하는 과정을 단순화하여 효율적으로 관리할 수 있음.
* **자동 리프레시 및 동기화** : 데이터가 변경되었을 때 자동으로 리프레시하여 최신 상태를 유지할 수 있음.
* **비동기 상태 관리** : 로딩, 에러, 성공 상태를 관리할 수 있음.

**스타일링 : Tailwind CSS**

* **빠른 스타일링** : 미리 정의된 CSS 유틸리티 클래스들을 제공하여, 스타일을 클래스명을 사용해 바로 적용할 수 있어 빠른 스타일링이 가능.
* **프레임워크에 구애받지 않음** : React, Vue, Angular와 같은 프레임워크에 구애받지 않고 모든 HTML 프로젝트에서 쉽게 사용가능.

## **🌟** **기능 소개 및 화면 프리뷰**

1. **카테고리별 상품 조회**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FpN2pvqHlSpXtBUCfFjpP%2F20240905182835.png?alt=media&amp;token=87c3cd99-c843-49e8-956c-c107c1c06ed5" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FeTt2tymxTL6lYqj15yQM%2F20240905182850.png?alt=media&amp;token=e3304ed2-9e72-4559-925d-0439728b9249" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2F8PX3ADKeW9HTiXtb9UkV%2F20240905182859.png?alt=media&amp;token=97b3a1e7-69f6-4982-8c4a-a35611b66773" alt=""><figcaption></figcaption></figure></div>

* **상품 목록** : 무한스크롤을 사용하여 상품 목록을 불러옵니다.
* **상품 필터링** : 카테고리별로 조회할 수 있고 최신순, 높은 가격순, 낮은 가격순으로 리스트를 정렬할 수 있습니다.

2. **상품 구매 / 구매내역 조회**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FGscKTJ6zpt5lV7rpTgGb%2F20240907100205.png?alt=media&amp;token=8aa28cdc-9e75-4e96-b108-fd18dd0abf6f" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FZGlZoFvsrvUvDUkScCVe%2F20240907100217.png?alt=media&amp;token=04e6587b-e73d-4619-ac86-1c16a6a6e2d7" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FxokcUZXHZZP81qvjlMB8%2F20240907100228.png?alt=media&amp;token=716579a8-8ed6-4c08-a524-f7d0e365e74a" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FeErfZeQ5YatGW8BcFJJV%2FKakaoTalk_20240907_100351956.jpg?alt=media&amp;token=cd38b275-034e-4c64-9d9a-808e31688038" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FyFkMoGZXufNKuewQfdom%2F20240907100307.png?alt=media&amp;token=a24cf24a-e8b7-40bf-8b6f-83997a0e8a6d" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FjYpYVBQDadFRJ4w64Ciu%2F20240907100320.png?alt=media&amp;token=758cffff-09b7-4b09-b3f3-634d78313359" alt=""><figcaption></figcaption></figure></div>

* **장바구니** : DB를 사용하여 상품을 장바구니에 저장할 수 있습니다.
* **구매** : 장바구니에 담긴 상품을 구매할 수 있습니다.
* **결제** : 아임포트 결제 SDK를 사용하여 결제를 진행할 수 있습니다.
* **재고** : 결제하기 전 상품의 재고를 미리 차감하고, 결제가 중단될 경우 다시 재고를 복구합니다.
* **구매 내역** : 자신이 구매한 내역을 확인하거나 주문을 취소할 수 있습니다.

3. **상품 등록 / 수정 / 삭제**&#x20;

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FHLNg8XeK4masGz8rhi84%2F20240906110351.png?alt=media&amp;token=67fbb7f7-7316-4896-8f2d-00751b75069e" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FA8vQNq5eDr4QPorgJEBM%2F20240906110435.png?alt=media&amp;token=e0d0cef0-7ccf-41c6-b31d-2eeaa88b02a3" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FCuJdEpyR3FLNl1MMugx1%2F20240906110453.png?alt=media&amp;token=39e9e0ae-0993-4499-9441-ea8a77fe72b6" alt=""><figcaption></figcaption></figure></div>

* **상품 등록** : 판매자는 판매하고자 하는 상품을 등록할 수 있습니다.
* **상품 수정** : 자신이 등록한 물품을 수정할 수 있습니다.
* **상품 삭제** : 자신이 등록한 물품을 삭제할 수 있습니다.

4. **판매자 주문 관리**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FFtMjhrWFLb3ikdKt6SiZ%2F20240831001504.png?alt=media&amp;token=12b7434c-0e1c-42ca-a621-9ac51dfe020b" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2F3sm0arE6ydgjcgxeBc3H%2F20240831001512.png?alt=media&amp;token=fe4f195f-927a-4d31-ae11-e1d35da7a248" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FWLPzZfo730HwnKCdOCjo%2F20240831001528.png?alt=media&amp;token=d9bd9033-8442-4174-9e6f-c7005f4b96c5" alt=""><figcaption></figcaption></figure></div>

* **주문 관리** : 판매자는 결제가 이루어진 주문 건에 대한 목록을 확인하고 상태를 변경할 수 있습니다.

5. **회원가입 / 로그인**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FtZBtvUX7Csi2RG5YlUCh%2F20240906111255.png?alt=media&amp;token=e5c4e623-ff58-4546-9edd-fe3239146320" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FtS07WYhoJm8sz0ADHROw%2F20240906111304.png?alt=media&amp;token=a3dd7c18-56d2-4c54-b2a1-972fcab81131" alt=""><figcaption></figcaption></figure></div>

* **회원가입 :** 구매자나 판매자로 회원가입을 할 수 있습니다.
* **로그인 :** 회원가입한 정보로 로그인을 할 수 있습니다.

## **📈 성능 최적화**

1. **렌더링 최적화**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FUljmNT6t7CjSxCEFEkBj%2F20240823134813.png?alt=media&amp;token=498de3f6-eef5-4379-a3a1-70491f38b1d1" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FxbJ1hnW6hBPqdC9wht8h%2F%EA%B8%B0%EC%A1%B4.png?alt=media&amp;token=9192c4c7-3c38-412b-b82b-177360a2cbeb" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FCtYj0Zoz2DKeOypmWbkZ%2F%EC%83%88%EB%A1%9C.png?alt=media&amp;token=2ee4191f-61f7-4ab6-af2a-8e98cac40396" alt=""><figcaption></figcaption></figure></div>

React Developer Tools를 사용하여 컴포넌트 렌더링 성능 분석 후

`useCallback`(함수를 메모이제이션해 리렌더링을 방지), `useMemo`(비용이 큰 계산을 할 때, 결과를 메모이제이션하면 성능을 최적화), `React.memo`(불필요한 리렌더링을 방지)을 사용하여

Render duration 1.4ms → 0.6ms, Committed at 1.4s → 1s로 감소시켰습니다.

2. **이미지 파일 최적화**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FyJnaPKC0l3MtWBILrQLI%2F1.png?alt=media&amp;token=a775569e-1a83-4a96-8e7f-9d4c96803a53" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FuN14hu08RjQlvYvQNCro%2F2.png?alt=media&amp;token=c959f91a-1090-433a-b433-8b3c41630f59" alt=""><figcaption></figcaption></figure></div>

이미지 업로드 시 `WebP` 형식으로의 변환을 통해 이미지 크기를 139.04KB → 86.67KB로 감소시켰습니다.

WebP는 구글에서 개발한 이미지 파일 포맷으로, 동일한 이미지 품질이라도 WebP 파일의 크기가 다른 포맷(GIF, JPG, PNG)의 파일에 비해 훨씬 작기 때문에 이미지 로딩 속도를 크게 단축시킬 수 있습니다.

3. **번들 사이즈 줄이기**

<div><figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FsKpasZ80RKLkd9jHrMtQ%2F20240822143814.png?alt=media&amp;token=2bea65e7-55db-471e-b1bf-1d948c40c74b" alt=""><figcaption></figcaption></figure> <figure><img src="https://1760796911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPabGBbi2jFuwVm6sxwx8%2Fuploads%2FDxcQ56Wf608UoCpyBvBT%2F20240822144341.png?alt=media&amp;token=8b753a35-7a4c-4edf-9d33-83ff1943c416" alt=""><figcaption></figcaption></figure></div>

rollup-plugin-visualizer을 사용하여 번들 사이즈 시각화 및 크리티컬 리소스 식별  후

`React.lazy`(컴포넌트를 동적으로 임포트하여 해당 컴포넌트가 필요한 시점에 로드되도록 합니다. 이렇게하면 초기 로드 시 번들 크기를 줄일 수 있습니다)와 `Suspense`(동적 임포트된 컴포넌트가 로드될 때까지 대기 상태를 처리합니다. fallback 속성으로 로딩 중 표시할 UI를 지정합니다)을 활용하여 번들사이즈를 줄였습니다.