하이~ 또 왔습니다~이번 게시물을 끝으로 부동산 매물 사이트는 얼추 정리가 되는 것 같습니다. 다음 세션에선 vue-router를 배울 겸 간단한 블로그 구현을 한다고 하네요~
v-model / watcher
input 태그 없는 사이트가 어디있을까요 웹에서는 빠질 수 없는 태그 중에 하나인데 input 태그로 들어온 데이터를 깔끔하게 저장하는 vue 문법을 가져왔습니다. v-model인데, 일단 그 전에 다른 걸 보고 가도록 하죠~
자 만약 input 태그에 들어온 내용을 month 라는 변수에 저장을 하고 싶다! 그러면 vue 문법 중 하나로
이런 식으로 $event.target.value를 뭐 쓰고 하면서 난리 난리를 쳐야하는데 v-model이란 문법을 사용하면
아주 깔끔하고 담백하게 데이터를 input 받아버릴 수 있다는 사실~~ 굉장히 편하죠? 여기에 vue는 input 태그에 들어온 데이터를 감시할 수 있는 기능까지 제공하는데요 그게 watcher입니다(input태그에 들어온 데이터를 감시한다는 것보다 data()에 입력되어 있는 데이터들을 검증한다는 게 더 나은 설명인 것 같습니다. input태그에 들어온 데이터도 결국엔 data()에 있는 변수에 저장될테니까요).
watcher는 .vue의 <script></script> 내에 data와 같은 레벨에서 작성이 되는데요, watch : {} 안에 감시하고자 하는 변수를 함수식으로 작성한 뒤 조건을 걸면 됩니다. 이런 식으로 말이죠~
여기선 input으로 들어오는 수가 12를 넘지 않고 문자열을 받지 않는 것으로 제한을 두었습니다. 저 부분 만들면서 자바스크립트의 isNaN() 함수를 알아가는데 참 좋은 경험이지요. 물론 설명 제대로 안 읽고 냅다 a.isNaN() 썼다가 안되길래 쌍욕 갈긴 건 제 불찰이 맞다고 생각합니다.
<Transition>
자 지금까진 모달창을 열면 그냥 띡 열리고 닫으면 띡 닫혔죠~?? 근데 이걸 스르륵 열고 스르륵 닫는 문법이 있다는 거~ 그게 바로 <Transition>이라는 거~
기존에 CSS로 애니메이션 효과를 주려면 애니메이션 동작 전 class, 동작 후 class를 정의하고 뭐 뭐 또 하고 뭘 또 막 그냥 하는데 그건 여간 귀찮은 일이 아니지요 사실 해본 적이 없어서 귀찮은 지도 모르지만 대충 말이 길어지면 귀찮아 보이기 때문에 그렇다고 하기로 합니다.
<Transition>은 애니메이션을 부여할 태그를 <Transition name = "우리 마음대로"></Transition>으로 감싸주고 .vue의 CSS부로 넘어가서 .우리마음대로지은이름-enter-뭐 뭐 이렇게 저렇게 하는 건데 이건 아무래도 보는 게 그냥 편하겠습니다.
살짝 보기만 해도 어떤 느낌인지 알겠지요? 느낌은 알겠는데 자세한 동작원리는 모르니까 넘어가겠습니다 enter와 leave로 구분되는 차이도 대충 알거고 뭐 뭐 진짜 정 궁금하면 알아서 찾아보던가 하는 게 좋겠지요~?
상품 정렬 기능이랑 라이프 사이클 관련된 내용도 이 게시물에 쓰려고 했는데 지금 진짜 너무 귀찮고 걍 암것도 하기 싫으니까 잠깐 멈추고 금방 뒷 내용 채워서 올리겠슴둥 ㅃ2.
