TIL 12 인스타그램 로그인창 리팩토링

바로 이전 글에서 인스타그램 로그인창을 구현했던 작업을 올렸는데 그 당시 작성했던 코드를 보면 하나의 함수에 모든 과정을

우겨넣은(?) 코드라고 볼 수 있다.

 

checkInput라는 함수에 모든 기능을 넣은 코드

이렇게 코드를 작성하게되면 지금이야 간단한 기능을 구현하니깐 별 상관없을지 몰라도 조금만 복잡해지면 어느부분이

어느 기능을 구현하는지도 알 수 없는 상황이되어 유지보수가 사실상 불가능해진다는것을 배웠다.

그래서 가독성이 좋고 유지보수가 수월한 코드를 작성하기 위해서는 각각의 기능별로 함수로 쪼개어서 로직을 짜줘야 한다는것을

배워 이번 리팩토링에 적용해보기로 했다.

 

일단은 어떻게 순차적으로 위에서 아래로 내려갈지 생각을 해봐야한다. 로그인창을 사용자가 이용할때 우선 아이디 혹은 비밀번호창에

입력값이 들어가게 되고 그 입력값을 받아서 로그인 조건에 맞는지 확인한후에 로그인 버튼을 활성화 할지 안할지 결정하는 로직이다.

다시 정리하면 사용자의 입력감지 -> 입력값을 받음 -> 입력값이 유효한지 검사 -> 유효하면 활성화 or 그렇지 않으면 비활성화

 

 

기능별로 함수로 쪼개어서 구현한 코드

 

가장 먼저 init함수를 두고 그안에다가 input태그들에게 keyup이벤트가 발생하게되면 값을 가져오는 getValue함수를 실행하는 코드다.

getValue함수는 아이디 비밀번호값을 가져와 값이 유효한지 확인하는 checkValues함수에 값들을 넘겨주면서 실행한다.

checkValues함수는 값들이 로그인 조건에 유효한지 검사해서 유효하면 버튼이 활성화되는 함수를 실행하고 아니면 비활성화시키는

함수를 실행하게된다.

이처럼 만약 유효조건을 바꾸고 싶다면 checkValue함수를 찾아 조건만 바꾸면 되는 유지보수가 수월해지는 코드를 볼 수 있다. 순차적으로 어떻게 작동을 할지 먼저 생각을 많이하고 해야 좋은코드를 작성할 수 있다는걸 배울 수 있는 좋은 기회 였다.