WIKEA

세계적인 가구 판매 사이트 IKEA 클론 프로젝트

개발 기간

2021.5.10 ~ 2021.5.20

개발 인원

프론트엔드 4명 , 백엔드 2명

기술 스택

언어: Python
Web Framework: Django
DB: My SQL
라이브러리: Bcrypt, pyjwt

Tools

Trello, Github, Notion

맡은 역할

1. 회원가입: Bcrypt를 활용해 패스워드 암호화 후 DB에 유저 정보 저장
2. 로그인: 로그인 성공시 pyjwt를 활용해 토큰을 로컬 스토리지에 저장
3. 추천 상품: 상품의 재고를 기준으로 상품 리스트 출력(재고가 적은 순으로)
4. 카테고리: 카테고리와 세부 카테고리를 json형식에 맞춰 출력
5. 장바구니: 장바구니 리스트를 출력하고 장바구니에 담긴 상품과 수량을 계산에 총 금액 출력

이케아 선정 이유

첫 프로젝트이고 아직 웹을 개발자에서 보는 시선이나 분석이 어렵다고 생각했기 때문에 E-commerce 웹을 하고 싶었습니다. E-commerce는 유저, 상품, 주문 같이 웹의 필수구현 이라고 생각되는 내용들을 집중적으로 구현할 수 있다고 생각했습니다. 그리고 이케아는 사용자가 찾는 가구를 분류와 수많은 필터로 추천할 수 있게 되어있어 클론을 하면 사용자의 니즈를 파악하는 것도 도움이 된다고 생각했습니다.

❓️Blocker

1. Git 협업을 하면서 branch를 나누는 기준은 무엇인가요?
2. List Comprehension을 사용하는 이유는?
3. Aggregate, Annotate란?

🔎️Branch를 나누는 기준

처음 프로젝트를 하면서 branch를 페이지별로 나누었다.

• feature/main
• feature/category
• feature/product

문제점

1. 페이지의 구성이 바뀔 때마다 view를 새로 작성하고 수정해야 한다.
2. 다른 페이지이지만 같은 데이터를 줄 때 중복된 view가 생길 수 있다.

Feedback

멘토님께서 백엔드는 페이지를 기준으로 보지말고 어떤 data를 주어야 하는지를 생각해야 한다고 말해주었습니다.

• feature/product
• feature/category
• feature/recommend
• feature/newlist

피드벡을 받고 수정하면서 전에 생각했던 페이지별로 view를 작성한다는 것이 비효율적인 방법인지 깨달았습니다. 위처럼 data를 기준으로 view를 작성해보니

1. data와 근접한 백엔드 입장에서 보기가 편했습니다.
2. 페이지가 다르지만 같은 데이터를 필요로 할 때 하나의 view로 구현할 수 있습니다.
   ex) 추천 상품 : 메인 페이지, 하나의 상품과 관련된 추천 상품
3. Restful API로 작성하기 편리합니다.

🔎️List Comprehension

상품을 리스트형태로 만들고 싶을 때 for 문을 사용했습니다.

for sub_category in sub_categorys:
            recommend_product = list(Product.objects.filter(sub_category=sub_category).values(
                'is_new',
                'english_name',
                'korean_name',
                'price'
            ))
	

Feedback

list comprehension으로 바꿔주세요!

for sub_category in sub_categorys:
            recommend_product.append(
                {
                    'is_new'          : product.is_new,
                    'english_name'    : product.english_name,
                    'korean_name'     : product.korean_name,
                    'price'           : product.price,
                    'image'           : product.image[0].url,
                    'background_image': product.image[1].url
                }
                for product in sub_category.product
            )

처음에는 굳이 comprehension으로 바꿔야 되나라는 의문이 들었습니다. 같이 프로젝트를 했던 백엔드분이 왜 사용해야되는지 설명해주는 웹을 추천해 주었습니다.
for-loop VS list-comprehension
요약하자면
1. list-comprehension이 속도면에서 빠르다.
2. json 형식으로 보기 편하다.(가독성)
제가 다룬 데이터는 작기 때문에 속도에서는 채감을 하지 못했지만 확실히 가독성은 향상된 것을 느낄 수 있었습니다. 피드백을 받은 후가 {}와 key,value 값이 눈으로 확인할 수 있어 보기 편했습니다.

🔎️aggregate / annotate

장바구니 구현 중 상품과 상품의 수량에 맞게 총 금액을 출력하는 로직을 구현했습니다.
처음 view에 작성한 코드입니다.

for order in orders: 
            order_list = OrderList.objects.filter(order=order)
            for order_product in order_list: 
                product = order_product.product
                order_products.append(
                    order_product.id,
                    product.english_name,
                    product.korean_name,
                    product.sub_category,
                    product.price
                )
                total_order_price += product.price * order_product.quantity

DB에서 값을 가지고 와서 계산하는 방식입니다.

Feedback

aggregate를 사용해주세요!

cart_list_query_set = cart_list.annotate(price=F('product__price')*F('quantity'))
total_order_price   = cart_list_query_set.aggregate(total_price=Sum('price'))['total_price']

위 코드를 간단히 설명하면 annotate를 사용해 각 상품의 가격과 수량을 곱한 주석필드를 annotate로 만듭니다. 그리고 이 주석필드의 총합을 aggregate를 사용해 cart에 담긴 상품의 총 주문금액을 계산하는 방법입니다.
이 방법은 DB의 값을 python 파일로 가지고와 직접 연산하는 방법보다 속도가 빠르고 효율적이라고 들었습니다. 제가 생각하기에 이 방법에 가장 큰 장점은 python에서 계산하는 것이 아닌 DB 쿼리셋을 통해 계산하는 것이라고 생각합니다.

🤔️회고

첫 프로젝트를 하면서 가장 크게 느낀점은 communication의 중요성입니다.
프로젝트를 시작하면서 내가 맡은 일만 잘해서 1인분만 하자 라는 생각으로 임했습니다. 제가 맡은 일을 확실히 구현하고 프론트분과 맞춰보려고 했는데 처음 스프린트에서 계획을 정확히 공유하지 못해서로 수정해야 될 부분이 많았습니다. Trello라는 Tool을 처음 사용해보니 협업의 기능으로 사용되지 못하고 거의 todo 리스트처럼 내가 구현한 내용들을 나열만 하는 도구로 사용되었습니다.
다행히 2주차 스프린트를 시작하기 전에 중간 점검을 하여 팀원들과 이에 대한 문제점을 공유했고 Trello에 Json data를 공유하는 list를 만들어 프론트와 백엔드가 보다 쉽게 소통할 수 있도록 했습니다. 그리고 명확한 목표 설정을 팀원들이 공유했습니다. 단순히 장바구니 기능 구현 이 아닌 장바구니 페이지에서 상품 리스트와 총 가격 금액을 구현으로 바꾸었습니다.

요약
1. 팀원들과 Communication의 중요성(Trello Tool 적극 활용)
2. 명확한 목표 설정(page의 기능, 어떤 API를 필요로 하는지 논의)