03과 2/2. v-model로 input 데이터를 받으면서 watcher로 데이터 감시도 하면서 애니메이션 효과도 주면서 상품 정렬 기능을 구현하면서 vue의 라이프사이클에 hook을 걸면서 컷. -후속편-
상품 정렬
상품 정렬은 Vue.js의 문법이나 기능이 특별히 쓰인 부분은 없습니다. 자바스크립트의 .sort()와 spread operatior에 대한 내용이 대부분이었습니다. 자바스크립트의 .sort()는 뭐 악명이 높으니 알아서들 보시고,,,
사이트에서 상품 정렬을 하기 위해 객체들의 순서를 뒤섞게 되는데 이 때는 데이터 원본을 따로 보관하고 사본을 조작하여 정렬을 하는 것이 이후 일반 정렬로 돌아올 수 있는 길이기에 유의해야 한다는 걸 알게 되었습니다.
요런 식으로 [...]을 활용해서 다른 조작에 반응하지 않는 클론 배열을 만들어 내지요 이후 정렬하는 함수는 methods : {} 부에 적어줍미다.
컴포넌트(?)의 라이프사이클(Lifecycle)
.vue 파일의 컴포넌트들은 일련의 과정을 거쳐 생성되고 사라지고 업데이트 되는데 이 과정을 라이프사이클이라고 한답니다. create - mount - update - unmount로 이뤄지는 과정인데 이 과정에서 벌어지는 일의 디테일은 Vue.js 공식문서에서 보길 권장드립니다. 대충 create는 데이터가 생성만 되고 mount는 그 데이터가 html로 딱딱 박히는 단계, update는 실시간 렌더링 되면서 바뀌는 상태를 말하며 unmount는 잘 모르겠습니다~
우리는 각 스텝에서 lifecycle hook이란 걸 걸어서 중간 중간 코드를 실행시킬 수 있는데요, 가령 홈페이지의 할인 배너가 mount되어 사용자에게 노출되는 순간 부터 1초마다 할인율을 1%씩 떨어뜨린다거나
사용자가 input 태그에 입력한 데이터가 바인디 되어 실시간으로 렌더링 되면서 update가 반복되면 update가 일어나기 전마다 input 태그에 들어온 데이터를 검증한다던가의 그런 뭐 그런 겁니다. 코드로 보시죠 걍,,
이게 1초마다 할인율 떨어뜨리는 코드입니다. .vue 파일의 script부에서 상위 레벨로 작성이 되구요, 저거 쓰면서 setInterval() 함수도 알게되었습니다. 근데 저거 멈추려고 clearInterval도 써보려고 했는데 그건 아직 자바스크립트 족밥이라 못함;; 나중에 꼭 해내보겠습니다?
이건 모달컴포넌트 파일에 들어가 있는 훅입니다.
대충 이런 종류의 훅이 있으니 많관부~~~
이렇게 해서 부동산 매물사이트가 끝났습니다. 놀랍게도 그동안 실제로 동작하는 웹 페이지의 이미지는 단 하나도 없었다는 점,, 이후 vue-router 배우고 나면 깃허브로 뭐 서버 갖다 쓰는 거 배우니까 그 때 빌드해서 올리도록 하겠습니다. 굳이 웹 페이지를 캡첳는 수고스러움은 덜고 싶지 않아요,,, 그럼 20000