위젯 렌더링 고치기

2024년 3월 25일 월요일

Today I Learned

날짜

2024년 3월 25일 월요일

내용

상당히 바쁜 하루…

위젯 렌더링

위젯 프리뷰 기능에서 계속 오류가 발생했다. 고쳐도 고쳐도 문제가 계속 나온다!

currency 문제

위젯 내에 가격을 표시할 때, 해당 스토어의 국가에 맞는 화폐단위도 출력해야한다. 미국이라면 USD, 한국이라면 KRW 이런식… 이 데이터를 결정하는 것은 서버쪽이 처리해야 했다. 따라서 프론트가 데이터를 보낼 때는 화폐 단위 정보는 없는 형태로 보낸다.

1
고정되어 저장된 설정의 위젯을 보여주는 것과 달리 프리뷰는 그때그떄 고객이 설정한 데이터의 형식을 보여줘야 한다. 따라서 고객의 디자인 설정값이 요청 본문에 담겨있고, 이를 렌더링한 위젯을 반환한다. 이때, 서버에서 관리하는 데이터베이스 내 위젯 객체와 클라이언트에서 보내는 요청을 검증하는 스키마는 currency를 제외하곤 동일하다. 이걸 몰라서 한참 해메고 있었다.. 자꾸 500 에러가 뜨는데 왜 안될까 못찾았는데..
  1. 클라이언트에게 데이터를 받아 스키마 객체로 처리한다.
  2. 이 데이터를 그대로 위젯 데이터객체에 넣는다.
  3. 렌더링한다.
  4. 이 때, 스키마에는 currency가 없어 렌더링 과정에서 참조할 필드가 없으니 오류가 발생한다.

의 문제였다.

할인 가격

이 후 또 렌더링이 안되기 시작했다. 같은 곳에서 오류가 발생했는데 분명 해결했는데도… 겨우 원인을 찾았다. 위젯에는 상품의 가격을 할인 전 후 모두 표시하는 기능이 있는데 상품에 따라 할인을 하기도 하고 안하기도 한다. 따라서 할인을 할 경우 before_price와 after_price를 모두 저장하고, 할인을 안할 경우에는 after_price만 저장한 채 before_price에는 none 값을 넣었다. 그런데 jinja2 템플릿에서는 before_price가 없다고 오류를 내고 있었다. 분명 조건을 넣어 분기처리했는데, jinja2가 무시하고 처리 안하고 있었다. 결국 할인을 안할때는 before_price, after_price 같은 값을 집어넣도록 하고 다른 곳에서 분기를 처리하도록 만들었다. 오류가 같은 곳에서 발생한 이유는, 위젯을 렌더링할 때 화폐 단위와 가격을 같은 파이프에서 처리하기 때문이었다.

Product_variants

Shopify에서 상품은 product_variant를 가진다. 각 상품의 옵션 분류에 따라 갯수를 다양하게 가지게 된다. 예를 들어, 3가지의 색깔과 6개의 사이즈를 선택할 수 있는 티셔츠는 최대 18개의 product_variant를 가진다. 위젯에 표시될 데이터 중 가격은 product_variant에서 참조하는데 여러 개 일수 있다는 것을 생각안하고 product.product_variant[’price’]라고 참조했더니 오류가 발생했다. 혹시 여러 개가 있는 리스트 일 수 있어 0번 인덱스를 지정해주었다.

위젯 수정

위젯 수정 과정에서 발생한 오류들도 고쳤다.

썸네일

렌더링과는 별개로, 처음 위젯을 생성할 때는 상품의 썸네일 이미지도 가져와서 설정하는 로직이 있다. 그런데, 이미 존재하는 위젯을 수정하는 과정에서 상품을 추가할 때는 썸네일을 가져오지 않았다. 추가해주었다.

레이아웃 수정

1
2
3
행,열의 값이나 레이아웃 형태를 변경하면 위젯이 고장나버리는 문제가 있었다. 디자인 옵션은 받은 값을 통채로 덮어씌워져서 개별 값이 문제가 될 리가 없었다. 로그를 확인해보니 currency가 문제가 있었다. 뜬금없이 애는 또 왜….

알고보니 위에서 발생한 문제와 동일했다. 상술하였듯, 위젯을 수정할 때 받은 데이터를 그대로 덮어씌워 데이터 레코드에 반영한다. 이때, currency는 None 값이 되버린다. 클라이언트에게 받은 데이터는 currency 필드가 없기 떄문이다! 결국 별도로 지정해주는 로직을 추가해서 해결했다.. 지긋지긋한 currency

회고

열심히 만들었는데 뭐이리 오류가 많은지.. 업보다 업보