계발하는 개발자

앞선 포스팅의 연장 선상에 있는 기록이다. [Vue + JS] 상품 정렬 기능 구현 - sort 메서드 쇼핑몰 사이트의 상품페이지를 보면 위와 같은 상품 정렬 기능을 볼 수 있다. 기능 구현 자체는 그렇게 어렵지 않았는데, 여러 이슈들이 있어서 나름의 의미있었던 기억으로 남는다.😅 (Ex. 상품 ziszini.tistory.com 이번엔 모바일 화면에서 나타날 정렬메뉴 버튼을 만들어야 했는데 select 태그를 쓰자니 안 예쁘기도 하고, 일일히 커스텀하는 수고를 들이고 싶지 않았다. 그래서 이 바쁜 세상에 이게 무슨 일인가 싶으면서도..ㅋ 직접 한 번 select 비슷하게 정렬 버튼을 만들기로 했다! 일단 전체적인 코드는 아래와 같다. .mo_sorting { display: none; position:..

쇼핑몰 사이트의 상품페이지를 보면 위와 같은 상품 정렬 기능을 볼 수 있다. 기능 구현 자체는 그렇게 어렵지 않았는데, 여러 이슈들이 있어서 나름의 의미있었던 기억으로 남는다.😅 (Ex. 상품 전체를 조회할 수 있는 '전체'라는 lnb 클릭후 상품 정렬 버튼(신상품순, 낮은가격순 등 )을 누르면 url 파라미터 3번째 인자값으로 받아오는 값이 데이터와 매치되지 않아서 에러가 발생한다. 그래서 이에 대한 에러 처리를 따로 해줘야 했고, 모바일 화면에서는 select option 요소를 통해 상품 정렬 기능을 수행하려고 했는데 option 요소에 별도로 이벤트를 걸 수가 없어서 그로인해 내가 직접 select 요소 비슷하게 html, js 코드를 다시 짜줘야 했다..) 일단 css를 제외한 구현 코드는 아래..