오늘 한 일:

• todolist 리팩토링
• todolist 테스트 코드 작성

todolist

리팩토링

custom Input의 validation

내가 만든 BaseFormInput의 템플릿은 다음과 같은 형태

<div>
    <lable></lable>
    <input>
    <div class="message">형식이 올바르지 않습니다</div>
</div>

BaseForm은 다음과 같음

<div>
    <BaseFormInput v-model="..."/>
    <BaseFormInput v-model="..."/>
    <button class="submit"/>
</div>

BaseFormInput에 있는 message를 띄우려면 BaseFormInput에서 validation을 해야한다고 생각했지만 완전 잘못된 생각이었다. 생각해보면 중복이 발생함을 알 수 있다.

• input에 v-model을 사용했기 때문에 value가 BaseForm에 저장되고..
• BaseForm은 submit할 때 validation을 해야될텐데 그러면 BaseForm에도 똑같은 validation 과정을 거치게 된다
  • 물론 ref를 이용해 BaseFormInput 컴포넌트의 data나 method로 validation 결과를 알 수는 있겠지만 최대한 부모와 자식 컴포넌트 간의 인터페이스는 props와 event로만 하려고 했기 때문에 내키지가 않음.

결국 부모(BaseForm)에서 validation을 맡고 해당 결과를 BaseFormInput의 props를 이용해 전달해 주기로 결정하니..

1. validation의 중복 제거

2. submit할 시에 ref를 이용할 필요 없이 BaseForm에서 validation을 그냥 사용하면 됨

아주 깔끔하게 해결!

<BaseFormInput
  v-model="..."
  :validity="..."
/>

testcode

attribute와 property의 차이

attribute는 HTML에서 property는 DOM에서 정의 된다

vue에서 v-bind를 이용한 v-bind:value="sth" 세팅은 property 세팅으로 동작하므로 vue test util에서 wrapper.attributes()로 검출할 수 없다. 따라서 wrapper.element.value방식으로 접근!

• 다만 v-bind=$attrs는 attribute로 검출 가능