Sign-In validation [카카오프렌즈]

jaedie·2020년 9월 29일
0

Code_Review

목록 보기
1/2

1. Sign-In validation는 어떻게 생겼나?

오늘의 포스팅은 우리 드림카카오팀의 따봉도치 에이스 연성님👍의 Sign-in validation code를 분석하는 시간을 가지겠다.

위에 보이는 이미지가 카카오프렌즈 로그인 화면이다. 실제 카카오프렌즈 웹사이트 같지만 연성님이 클로닝한 cloned page다. 대박사건

카카오프렌즈 로그인의 validation에는 아래와 같이 몇가지 요소가 있다.

  1. 아이디와 비밀번호를 공란으로 로그인 버튼을 누르면 "이메일 또는 전화번호를 입력해주세요" 라는 안내문이 뜬다. (비밀번호만 입력하고 로그인버튼을 눌러도 똑같은 화면이 뜬다)

  2. 아이디를 형식에서 벋어난 값을 입력할 시 "이메일 또는 전화번호 형식이 올바르지 않습니다" 라고 안내문이 뜬다.

  3. 존재하지 않은 아이디와 비밀번호를 입력시 "카카오계정 혹은 비밀번호가 일치하지 않습니다. 입력한 내용을 다시 확인해 주세요." 라는 안내문이 뜬다.

QR코드 로그인도 있지만 해당 기능은 클로닝의 타겟에서 제외되었다.

2. Code의 짜임새는 어떤가?


일단 state를 살펴보자.

  1. isChecked: 로그인 페이지에 "로그인상태 유지"를 선택할 수 있는 체크박스가 하나 있는데, 해당 체크박스가 클릭되면 색이 노란색으로 변한다. 따라서 해당 체크박스 태그의 클래스명을 onClick event 발생시 변경시켜줘야 하는 것이다. 연성님은 isChecked라는 state를 관리함으로써 해당 state의 default value를 false로 두고, onClick event 가 발생했을시 true로 전환되고, 전환된 코드는 checkbox의 클래스 명을 toggle하여 변경한다. (아래 이미지 참고)

  2. isToolTip: isToolTip state는 "로그인상태 유지" 텍스트를 클릭했을때 hovering modal 형태로 rendering되는 문구인데, 이 또한 boolean 값으로 관리하며 해당 문구를 class명으로 보였다 안보이게 하는 방식이다. (위 이미지 참고)

  3. idValue: idValue state에는 빈 string을 할당하고, input tag에서 onChange event 발생시 해당 input값을 setState를 통해 새로운 값을 idValue state에 재할당해서 궁극적으로는 사용자가 입력한 idValue를 저장하고 백엔드와 통신해 validation하는데 사용된다. (함수 코드를 살펴볼때 좀 더 자세하게 알아보자)

  4. pwdValue: idValue와 같은 기능을 한다. 다만 input에 기입된 password를 핸들링한다는 점에서 다를 뿐.

  5. errorText: errorText state는 default값으로 빈 string으로 할당하고, user가 id 와 password를 기입했을때, 정보가 올바르지 않으면 에러메세지를 띄운다.

state는 알아봤으니 이제 전체적인 매커니즘을 훑어보며 연성님의 천재적인 코드를 학습해보자!

코드 전부를 보기보다는 기능에 핵심이 되는 함수와 실행부분을 집중해서 분석해보겠다.

아래의 이미지를 보자.

tryLogin이라는 이름을 가진 함수인데, 이름 그대로 조건이 충족되는지를 확인하고 user를 로그인해주는 기능을 한다.

일단 LOGIN_STATUS라는 변수를 선언하고 그 값으로 객체안에 든 3가지의 키와 그 값을 할당해준다. 마치 백엔드 통신에러 코드같이 100, 200, 300 으로 설정된 키는 user가 로그인을 시도할 시 그 상황에 맞게 화면에 도출할 안내메세지라고 보면 된다.

errorText라는 변수는 LOGIN_STATUS의 this.validateIdPW()라는 키값을 할당했는데, 그렇다면 validateIdPW 함수를 먼저 살펴봐야 이해가 되겠다.

validateIdPW는 함수 이름대로 input에 들어온 id와 password가 양식에 맞게 들어왔는지를 확인하고 그에 상응하는 안내문을 return하는 함수이다. 따라서 errorText라는 변수는 validateIdPw에서 return한 숫자를 키로 받을 것이다.

계속해서 코드를 보면 if문으로 열리게 되는데, 만약 errorText라는 메세지가 false 라면 email과 password 라는 key로 API를 통해 idValue 와 pwdValue state를 백엔드와 통신한다. 여기서 errorText를 false를 놓는 이유는 당연히 errorText가 true라면 user가 입력한 input이 에러메세지 100, 200, 혹은 300에 해당한다는 의미가 되는 것이기 때문이다.

다음 backend에서 보내온 response가 result.Authorization 토큰값과 일치하면 "token"이라고 명한 토큰을 해당 토큰값으로 저장하고, this.props.history.push("/main") 메서드를 사용해 메인화면으로 연결되게 된다.

만약 backend에서 UNAUTHRHIZED 라는 메세지가 reponse로 온다면, 해당 로그인 정보가 회원정보와 불일치하다는 의미이고 errorText state를 지정된 메세지로 변경한다.

3. 개선 가능한 부분

1. onChange event를 가지는 input 2개를 1개의 onChange로 통합시키기


위 이미지를 보면 id input과 password input에 onChange event를 따로 준것을 볼 수 있다. 하지만 연성님 코드의 경우 이미 해당 handleIdPwValue 함수에 계산된 속성명을 사용하셨기 때문에 아래와 같이 두 input의 부모태그에 onChange event를 줌으로써 중복되는 event를 줄일 수 있다. (아래 이미지 참고)

2. 조금 더 직관적인 코딩?

위 코드는 깔끔담백한 코드인 것 같다. 경우의 수들을 변수로 선언하고 if문을 3번 써서 각 각의 경우에 해당하는 경고문을 띄운다. 그런데 난 여기서 의문이 든다. '코드는 가능하면 짧고 간결함을 추구해야 하는 것은 맞지만, 가독성 또한 매우 중요한 부분이 아닐까?'라고.

위 코드 중 idValueCheck 이라는 변수만을 말로 서술해보자면, "idValueCheck은 idValue라는 state의 길이가 false라는 기본값을 가지고, 만약 그 값이 false 인것이 true 라면 에러메세지 100에 해당하는 텍스트를 띄운다."

난 머리가 안좋아서 그런지 몰라도 항상 저 "false인것이 true라면"이라고 하는 코드는 즉각 이해가 되지 않는다. 아래와 같이 바꿔보면 어떨까?


"idValueCheck은 idValue라는 state의 길이가 true라는 기본값을 가지고, 만약 그 값이 false라면 에러메세지 100에 해당하는 텍스트를 띄운다." 나만 그런지 몰라도 난 두번째 캐이스의 문장이 더 잘 읽히는 것 같다.

아무리 개발자라도 사람은 컴퓨터처럼 사고가 되지 않는다는 점을 감안하면 두번째 캐이스와 같이 한글로 번역했을 때에도 잘 읽히는 코드가 더 나은 코드가 아닐까 생각해본다.

4. 느낀점

다른 사람의 코드를 보는건 참 재미있는 일인것 같다. 특히나 나보다 더 잘하는 분들의 코드를 보면 그 어떤 공부보다도 많은 것을 배우고, 내 생각의 spectrum을 확장시켜주는 것 같다.

각자가 맡은 part가 있어 sign-in 과 sign-up validation에 대해서는 전혀 학습할 일이 없었는데, 이렇게라도 코드리뷰를 하니 참 많은 도움과 참고과 되는 것 같다.

앞으로도 자주 천재개발자들의 코드를 리뷰해야겠다.

다음 코드리뷰는 연성님의 sign-up코드가 될것이다.

profile
<header>frontend developer</header>

0개의 댓글