계발하는 개발자

앞선 포스팅의 연장 선상에 있는 기록이다. [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를 제외한 구현 코드는 아래..

일전에 학원에서 진행했던 초창기 프로젝트에서 marquee(움직이는 텍스트) 구현하듯이 좌측으로 롤링되는 무한 롤링배너를 또 구현해야 했다. 위에서 이미지 배너 뒤에 움직이는 텍스트가 marquee다. 기억 상으로 html+css 만으로 움직이게 했던 것 같다. (이미지 배너는 다른 방법으로 구현했으며, 원래는 멈춰있다가 커서가 해당 슬라이드 영역을 한 번 건드리고 가면 그때부터 움직이고, 움직이는 슬라이드 위에 커서를 놓으면 움직임을 멈추도록 했다.) 이번엔 다른 색다른 방법으로 구현하고 싶어서 찾아봤더니 Javascript cloneNode 함수를 이용해서 구현하는 방법이 있었다. 그 원리는 즉슨, li를 감싸는 wrap이라는 요소가 있으면 wrap 요소를 clone해서 또 다른 wrap2 요소를 만..

우리가 흔히 장바구니 기능을 구현할 때 자바스크립트 코드를 막 열심히 짜서 장바구니에 상품들을 담기게 해놨는데 새로고침하거나 재접속하면 담겨있던 값들이 전부 사라지고, 다시 초기화되는 경우를 볼 수 있다. 왜냐하면 새로고침시 자바스크립트는 파일을 다시 위에서 처음부터 읽기 때문이란다.. 애써 보관한 데이터들을 날아가지 않게 하려면? - 서버로 보내서 DB에 저장 - 브라우저 저장공간에 저장 크게 위 두 가지 방법이 있는데, 여기선 보다 간편하게 데이터값을 보관할 수 있는 방법인 "로컬스토리지" 활용 방법에 대해 정리해보려한다. 로컬스토리지가 구체적으로 뭔지는 이후 다른 포스팅에서 다뤄보기로 하고, 오늘은 로컬스토리지에 특정 값을 저장하려고 할 때, 흔히 사용되는 JSON.stringify()와 JSON...