[RxSwift] RxSwift - MVVM을 이용한 간단한 Login 기능

안녕하세요

pino-day의 Pino 입니다.  :]

 

RxSwift를 공부하면서 간단한 기능 하나씩 만들어보면서 문법 공부를 하면 좋을것같아 가장 많이 사용하는 기능을 구현해보려하는데요

❝로그인 프로세스 및 Validation 체크❝

에 대해서 하나씩 만들어나가보도록 하겠습니다

 

먼저 로그인 기능을 구현하기 전에

간단하게 UI를 만들어보겠습니다

 

참고로 Storyboard 없이 만들었으며,

SnapKit - http://snapkit.io/

SnapKit

Then - https://github.com/devxoul/Then

devxoul/Then

을 사용하여 만들었습니다.

 

Storyboard 없이 초기 설정하는 법과 UI짜는 방법 및 SnapKit, Then에 관해서는

추후에 간단하게 포스팅 후 추가해놓겠습니다.

 

간단하게

이메일과 비밀번호를 입력받을 TextField와 로그인 진행을 위한 Login Button을 구현하였습니다

여기서부터 따라하실 분은 github 주소에서 받으신 후 같이 진행하시면 됩니다~

92pino Github : RxSwift-Login UI

92pino/RxSwift-Login

---

 

ViewModel

ViewModel에는 로그인 기능에 필요한 비즈니스 로직이 들어가는데요

여기서는 간단하게

email과 password가 들어가 입력이 되어있는지, 

email 형식에 맞춰져있는지 간단하게 체크를 하는 로직을 넣어볼건데요

(간단하게 체크하는거다보니 이메일이 @와 .이 있는지만 체크를 하겠습니다)

 

i) View는 Model을 알수 없기 때문에 View에서 ViewModel로 입력받은 값을 전달해야 하는데

emailObserver에는 emailTextField에서 전달한 값을

passwordObserver에는 passwordTextField에서 전달한 값을 뷰에서 전달해줍니다.

 

iI) 사용자가 값을 입력할때마다 emailObserver, passwordObserver의 가장 마지막 값들을 내보내고

그 값을 이용해

1. emailTextField가 비어있는지

2. email 텍스트에 @가 포함되어있는지

3. email 텍스트에 .이 포함되어 있는지

4. 비밀번호는 최소 1자리 이상인지

를 체크해줍니다.

---

ViewModel에서 기본적인 로직을 완성했으니

이젠 view에서 전달하고 완성된 값을 다시 전달받아야겠죠?

 

i) 가장 먼저 emailTextField, passwordTextField에 입력된 값들을 ViewModel로 바인딩 시켜야겠죠?

코드를 보다보니 orEmpty라는 함수가 보이는데

RxCocoa - ControlPropertyType에 있는 함수로

주석처리되어있는 내용을 보면 String? 옵셔널을 String으로 변환해준다고 하네요

만약 그럴일이 없겠지만? 있을수도 있으니...

orEmpty 대신 map을 사용할수도 있는데요

orEmpty를 제거하고

map 안에서 String으로 타입캐스팅을 해주면 됩니다!

 

ii) ViewModel에서 각각 입력한 값을 통해 Validation 체크를 한 결과값(Observable<Bool>)을

로그인 버튼의 isEnabled에 바인딩 시켜줍니다!!

만약 isValid 결과값이 true이면 loginButton이 활성화 false면 비활성화가 됩니다

 

iii) ii에서 활성화 비활성화를 했다지만 시각적으로 이 버튼이 활성화가 됐는지 비활성화가 됐는지 알수가 없어요

그래서 추가적으로 로그인 버튼의 alpha에 바인딩 시켜줘서

isValid 결과값이 true면 활성화가 되었으니 alpha값을 1로 해서 진하게 보이게 해주고

반대로 false면 비활성화가 되었으니 alpha값을 낮게 해서 연하게 보이도록 해줬습니다

 

iV) 이제 마지막으로 실제 서버(여기서는 가상으로 사용자 계정을 가정해놓았습니다)에서

저장되어있는 유저의 계정과 유저가 입력한 필드값과 같은지 비교를해야겠죠??

값을 비교해서 만약 값이 성공이다 하면 성공 alert을 실패한다면 실패 alert을 띄워주는것으로

로그인 로직이 완료가 되었습니다

 

 

최종 결과 코드는 여기서 확인하시면 되요~

github.com/92pino/RxSwift-Login

92pino/RxSwift-Login

 

여기까지 RxSwift - MVVM을 이용한 간단한 Login 기능 구현이였습니다

아직 부족한점이 많다보니 구현상 오류나 피드백 주실 사항은

언제든지 댓글 남겨주시면 바로 반영해서 수정해놓겠습니다!

지금까지 pino-day의 Pino 였습니다

봐주셔서 감사합니다 :]