Using Constants for Mutation Types

Sanghyeop Lee·2022년 12월 19일
0

Vue.js

목록 보기
1/1
post-thumbnail

API에 평균가격 조회기능 추가


Zzangbaguni 프로젝트의 MongoDB price collection은 {상점id,상품id,가격} 형태의 document를 가지고 있다.

기존의 find_good_by_entp는

1. 주변의 상점 목록(entp_id_list)을 받아서 
2. MongoDB의 price collection에서 주변 상점들이 보유하고 있는 상품들의 가격 정보만 가져온 후 
3. python의 set을 통해서 중복을 제거하고 
4. good collection에서 goodName, goodSmlclsCode(카테고리) 정보를 찾아서 return 한다.

그런데 해당 기능만 사용해서 API를 구현하니 상품 카드에 보여줄 수 있는 정보가 상품 사진, 상품 이름, 상품 카테고리 밖에 없어서 상품 카드가 허전해보여서 주변 매장에서 해당 상품의 평균 가격을 보여주도록 find_good_by_entp 함수를 수정하였다.

  • 기존의 코드
# 업체가 보유하고 있는 상품 리스트
def find_good_by_entp(entp_id_list):
    collection_good = db.goodlist
    collect_price = db.price

    good_id_json = list(collect_price.find({"entpId": {"$in": entp_id_list}}, {"goodId": 1, "_id": 0}))

    good_id_list = set([])
    # goodId 중복 제거
    for gid in good_id_json:
        good_id_list.add(gid['goodId'])
    good_id_list = list(good_id_list)
    result = list(collection_good.find({"goodId": {"$in": good_id_list}},
                                       {"goodId": 1, "goodName": 1, "goodSmlclsCode": 1, "_id": 0}))
                                       
    return result
  • 수정된 코드
def find_good_by_entp(entp_id_list):
    collect_price = db.price

    result = list(collect_price.aggregate([
        {"$match":
            {"entpId": {"$in": entp_id_list}}
        },
        {"$group":
            {"_id":"$goodId","avg":{"$avg":"$goodPrice"}}
        },
        {"$lookup":
            {"from":"goodlist",
            "localField":"_id",
            "foreignField":"goodId",
            "as": "info"
            }
        },
        {"$unwind":"$info"},
        {"$project":
            {"goodId": "$_id", "goodName": "$info.goodName", "goodSmlclsCode":"$info.goodSmlclsCode","goodAvgPrice": {"$round":["$avg",0]}, "_id": 0}
        }
    ]))

    return result

기존에는 랜딩페이지에서 상품리스트 페이지로 넘어갈 때 거의 실시간으로 페이지가 렌더링 되었는데 수정한 코드에서는 Aggregate Operation을 몇 단계 수행하다보니 기다리는 시간이 생기게 되었다.

mutation_types.js


사용자가 기다리는 시간이 덜 지루하도록 로딩화면을 추가하기로 했고 이 포스팅을 참고하기로 했다.

Zzangbaguni에서도 전역상태관리를 위해서 Vuex를 사용하고 있는데 mutation_types.js는 해당 포스팅에서 처음 접해서 Vue 공식 문서를 좀 읽어봤는데 다음과 같이 설명되어 있었다.

allows your collaborators to get an at-a-glance view of what mutations are possible

Whether to use constants is largely a preference - it can be helpful in large projects with many developers, but it's totally optional if you don't like them.

  1. mutation_type.js 파일에서 mutation_type들을 상수로 선언해서 사용할 수 있다.
  2. 기능적인 차이가 있는건 아니지만 공동작업 시 다른 개발자들이 어떤 mutation type들이 사용 가능한지 한 눈에 알 수 있고 Linter를 사용할 때도 이점이 있다고 한다. (Linting에 대해서 아직 잘 알지 못해서 어떤 이점인지는 모르겠다..)
profile
개발자꿈나무

0개의 댓글