1. 사랑의
‘유효성 검사’ 재개발🚧
(feat. VeeValidate)
2020.02.21
Comento Day Seoul 2020
유성실

2. 사랑의
‘유효성 검사’ 재개발🚧
(feat. VeeValidate)
2020.02.21
Comento Day Seoul 2020
유성실
애증의😭

3. 현직자의 경험과 지식을
거래하는 서비스

4. • 코멘토의 첫 프론트엔드 개발자
• 코멘토의 첫 여성 개발자
• 코멘토를 혼자 Vue로 리팩토링한 개발자
• 입사한 지 1년 11개월 된 주니어 개발자
#

5. #1 개발자가 알려주는 ‘유효성 검사’
#2 VeeValidate를 이용한 ‘유효성 검사’
#3 배운 점
👤
🥾
(목차)

6. #1
개발자가 알려주는&💦
‘유효성 검사’

7. ⚠
비개발자도 이해할 수 있도록
세부적인 기술 내용은 최소화 했습니다.
편하게 들어주세요!

8. 평화롭던 어느 날

9. 😱😱😱
기획자 백엔드

10. • 개발자가 정해놓은 규칙대로 사용자가 행동할 수 있도록 유도하기 위함
• 잘못된 규칙일 경우, 오류가 발생한다.😰
버튼을 왜 비활성화 시킬까?
제가 만든 길로 가주시면 안 될까요..?😭
사용자님들

11. • 이메일 주소를 제대로 입력하지 않은 경우
• 휴대폰번호 입력창에 한글을 입력한 경우
버튼을 비활성화 하지 않았다면?
seongsil.yoo
코멘토
직무부트캠프 결제하기

12. • 이메일 주소를 제대로 입력하지 않은 경우
• 휴대폰번호 입력창에 한글을 입력한 경우
사용자에게 나쁜 경험을 주게 된다 😥💦
버튼을 비활성화 하지 않았다면?
seongsil.yoo
코멘토
보안서약서 메일 누락 OT 안내 메일 누락

13. • 유효성 검사에서 사용자의 행동을 예측하지 못했기 때문이다.
• 사용자의 행동에는 다양한 경우의 수가 있다.
이러한 오류는 왜 생길까?

14. & 개발자의 생각
• placeholder에 숫자만 입력하라고 써 놓음
• 연락처를 숫자만 적으면 11글자 (01012345678)
💡 버튼 활성화 조건: 연락처가 11글자일 때
이러한 오류는 왜 생길까?

15. 👥 사용자의 생각
🌏 오류가_생기는_이유(다양한_지구촌_사람들).jpg
이러한 오류는 왜 생길까?
사용자 A
01012345678 사용자 B
010-1234-5678
사용자 C
010 1234 5678

16. 유효성 검사 조건을 더 세밀하게 만든다
어떻게 해결할 수 있을까?
참~ 쉽죠?🥶

17. 어떻게 해결할 수 있을까? - 문제점

18. 각자의 유효성 검사 코드가 파편화되어 있었다.😰
어떻게 해결할 수 있을까? - 문제점
0
개발자2
(인턴)
1
개발자3
(인턴)
2
개발자1
(나)
👩
개발자4

19. 어떻게 잘 해결할 수 있을까?
VS 잘 만들어진
오픈소스를 이용한다.
직접 공통화
모듈을 만든다.

20. VS
어떻게 잘 해결할 수 있을까?
잘 만들어진
오픈소스를 이용한다.
직접 공통화
모듈을 만든다.
👉 직접 만들기엔 사이즈가 크다
👉 많은 시간이 필요하다
🤮 프로젝트 중이라 시간이 별로 없다

21. #2
VeeValidate를 이용한
‘유효성 검사’ (간략한 맛보기😋)

22. ⚠
개발내용이 아~주 약간 포함되어 있습니다.
주무시는 분은 꿀밤을 선물로 드립니다!👊

23. • Vue에서 유효성 검사를 편리하게 할 수 있도록 도와주는 라이브러리
• Laravel Validation syntax에서 영감을 얻어 제작된 라이브러리
VeeValidate가 뭔가요?

24. •
• ValidationProvider: 유효성 검사를 공급하는 역할
• ValidationObserver: 유효성 검사를 관찰하는 역할 (👉 추후 블로그에서 다룰게요!)
VeeValidate - 불러오기, 등록하기

25. • 지원하는 규칙
VeeValidate - 규칙 불러오기

26. VeeValidate - 규칙 사용하기(email)
😡 유효성검사 실패
빈값이거나, 이메일 유형이 아닐때
😁 유효성검사 성공

27. VeeValidate - 규칙 한글화 - 1
한글이지만, 어색한 번역 말투다🤔

28. VeeValidate - 규칙 한글화 - 2
제너럴한 말투로 변경 성공!🥰

29. VeeValidate - 규칙 커스텀
URL 유효성 검사 성공!🥰

30. 더 자세한 내용은
추후 코멘토 개발팀 블로그에서 공개됩니다👏

31. #3
배운 점 ✍

32. 짜릿해! 늘 새로워. 배운 점은 이거야!
#디테일 #나무말고_숲

33. #디테일
• 99개가 좋아도 1개가 별로면 별로인 거다. 디테일한 개발을 하자.
#나무말고_숲
• VeeValidate를 처음으로 알게 된 건 1년 전이었다.
도입하지 못한 이유는 ‘바빠서’, ‘더 우선순위가 높은 업무를 해야 해서’
일을 빠르게 되도록 하기보다는 장기적으로 생각하자. (가능할..까…?😭)
짜릿해! 늘 새로워. 배운 점은 이거야!

34. 참고 자료
• VeeValidate 공식 문서
• [Vue.js] VeeValidate를 사용하여 간단하게 폼 검증하기 (구버전)
• vee-validate 간단한 사용법 | GongZza’s blog (구버전)