티스토리

블로그블로그
검색하기

블로그 홈

블로그블로그

shu-shu-bear.tistory.com/m

.

구독자
2
방명록 방문하기
반응형

주요 글 목록

  • 동일한 쿠폰명 보여주기 대작전! 커머스에서 쿠폰을 표시하는 페이지가 많다. 그러나, 동일한 쿠폰인데 쿠폰의 이름이 표시되는 페이지마다 다르다면 사용자는 혼란을 느낄 것이다. 그런 점을 캐치해서 PM 님과 함께 동일한 쿠폰 명을 보여주게끔 수정한 내용을 적겠다. 쿠폰을 보여주는 페이지들.. 이렇게나 많다! - 장바구니 페이지, 주문 페이지, 쿠폰함 페이지, 상품 상세 페이지 등,, - 페이지별로 UI variation 이 나타나기 시작했고 기존의 쿠폰명을 보여주는 공용 로직으로는 이 니즈를 충족시켜줄 수 없었기에 페이지별로 함수를 각각 만들기 시작했고 워딩이 일부 달라지게 되었다. 메인 포인트 - 데이터에 따른 워딩은 동일하되 페이지별로 UI 는 다를 수 있다. - 위 사진 말고도 variation 이 좀 더 있다. 그래서 어떻게 했나?.. 공감수 0 댓글수 4 2023. 12. 22.
  • 유연하게 대응가능한 공용 hook & 컴포넌트 만들기 (배송지, 쿠폰 선택) 배송지, 쿠폰 선택 쪽 공용 로직을 만들면서 디벨롭된 공용 hook & 컴포넌트 구조를 적어보겠습니다! 1. 공용 hook 에 parameter 로 추가 옵션을 주자 배송지 목록, 배송지 폼을 여러 페이지에서 사용해야했는데 이 UI와 관련 로직들은 전부 다 같을 것 같지만 페이지마다 조금씩 다른 차이점이 있었다. 공용 hook 에 option 을 주어 각 페이지별 다른 점까지 적용하여 구현 장점 - 바로 위의 사진처럼 구성해서 사용할 수 있게 되어 다른 페이지에 붙이기 편했다. 단점 - 페이지별로 다른 점이 많아질 경우 option의 갯수가 증가되어 코드를 처음 본 개발자라면 해당 option이 무얼 의미하는지 모를 것 같다. - 2개의 option 을 예상하고 공용 훅 내부에서 분기를 했기 때문에 일부.. 공감수 0 댓글수 4 2023. 12. 22.
  • 장바구니 페이지 상품패널 구조 변경기 이번에는 장바구니 페이지 중 상품 패널 쪽의 구조를 변경한 이야기를 작성하겠습니다! 변경해야했던 이유 - 기존에는 위수탁샵과 쇼핑몰 샵과의 패널에 기능이나 디자인의 차이가 거의 나지 않았기 때문에 샵 > 하나의 상품 패널 컴포넌트 안에서 간단한 분기 정도로 되어있었다. - 점점 샵별 패널 섹션에 서로 다른 디자인과 기능을 적용하고자하는 니즈가 증가했기때문에 구조를 변경할 수 밖에 없었다. 그래서 어떻게 했나? 1. figjam 을 사용해 목표로 삼은 구조를 그렸다. - UI 및 데이터에 따른 섹션의 종류가 4개였고 비슷한 것 같으면서 약간씩 달랐다. 2. 컴포넌트 전략 - 하나의 컴포넌트에서 if문으로 분기해서 데이터만 넘길까 하다가 변경에 용이한 구조를 가져가는 것이 나중을 위해 좋다고 판단을 했다. .. 공감수 0 댓글수 2 2023. 12. 19.
  • 상세페이지 개선기 이번에는 상세페이지 개선한 이야기를 작성하겠습니다! 모든게 다 기억나지는 않지만.. 최대한 기억을 짜내서.... 문제라고 생각한 것 해제되지 않고 있던 이벤트 리스너 - 이벤트 리스너를 해제하는 로직이 있었지만 lodash 의 throttle 함수를 감싸게 되면서 서로 다른 함수 취급이 되어 이벤트 리스너가 제대로 해제되고 있지 않았다. const fn1 = () => {...} const a = throttle(fn1, ms); const b = throttle(fn1, ms); // 여기서 a 와 b 는 같아보이지만 서로 참조하는 값이 달라져서 a !== b 가 되게 된다 심한 props drilling - 옛날 Presentational and Container Components 구조의 잔재인걸로.. 공감수 0 댓글수 0 2023. 12. 19.
  • 장바구니 담기 로직 개선기 오늘은 장바구니 ~ 주문에서 중요한 기능 중 하나인!! '장바구니 담기' 로직을 개선한 이야기를 작성하겠다. ++ 글에 오류가 있어 추가합니다. - n개의 스토어라는 표현이 나오는데, 이는 틀린 말이며 하나의 스토어에 n개의 리듀서가 관리하는 n개의 상태값들이라고 생각해주시면 감사하겠습니다! 문제라고 생각한 것 - 장바구니 담는 케이스가 나눠지면서 기존 코드에 개선이 필요하게 됨 case1, case2 (담기 성공 알럿1,2) - 이후에 토스트로 교체해서 이미지가 없다.. case3 (상품 추천 모달) 아무튼 문제라고 생각한 것은!! - '관심사의 분리'가 제대로 되어있지 않아 담은 상품에 대한 데이터가 이곳저곳에 흩어져 있어 디버깅, 리셋 시점 잡기에 어려움이 있었음 - 기존에는 상품 옵션 모달과 담은.. 공감수 0 댓글수 0 2023. 12. 18.
  • 주문 페이지 구조 개선기 조직 구조 변경 이후 '장바구니', '주문' 페이지를 담당하게 되면서 주문 페이지 구조를 차근차근 개선한 내용을 작성해보겠다. 문제라고 생각한 것 컴포넌트 · 관심사의 불분명한 분리로 인한 코드 가독성 하락 컴포넌트 분리 문제 결제 버튼 컴포넌트에 '아이스팩 체크 여부'와 '개인정보 동의' 가 함께 묶여있었다. - UI 상 한 묶음 이지만 이름이 '결제버튼' 이였기 때문에 이름만 봐서는 두개의 UI 가 포함되어있는지 잘 알 수 없었다. - 다른 기능을 하는 세개의 섹션들이지만 로직 코드가 한 페이지 내에 함께 존재하여 코드를 한 번에 파악하기 힘들었다. 관심사의 분리 문제 회원 · 로딩 · 에러 여부를 매 기능마다 if 문으로 확인하고 있었다. - 로직마다 회원 · 로딩 · 에러 여부 를 확인하면서 조건.. 공감수 0 댓글수 2 2023. 12. 18.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.