🍊 오늘의 할 일
🍪 필수 Task
-
이메일 변경 node mailer -
node mailer 서버 구현 -
이메일 변경 클라이언트 구현 -
accessToken이 만료되면
//=> dispatch(exit()) => 로그인 페이지로 이동 -
이메일 변경 다시 구현 필요(로직을 변경함)
(=> 이메일 버튼 클릭에서 이메일 인증 번호로 변경)
🍊 오늘의 정리
🍉 node mailer
🌈 이메일 인증 초기 로직
-
수정할 이메일 기입
-
'인증' 버튼 클릭
=> post /my/emailCheck => 본인인증(accessToken) =>
=> verify_key 재할당
=> 인증 이메일 발송
1) => 인증 클릭했다면 => user_verify의 email_verified = "2" 할당 => 유효한 변경 이메일로 인증됨
email_verified를 2로 한 이유 => 변경 중간에 유저가 이메일 변경을 마치지 않거나 해도 로그인은 가능한 상태로 두기 위함
2) => 인증 클릭하지 않았다면 => verify_key만 새로 생성된 상태이므로 문제되지 않음. -
유저가 완료 버튼을 통해 post 요청하여 최종 email변경 수행
최종적으로 유저가 완료를 눌러 post를 해야 email 변경이 완료됨
즉, eamil_verified가 2인 상태에서 post 요청 성공 시 email 변경 완료
🌈 이메일 인증 로직 변경
처음 위와 같이 이메일 인증 로직을 계획했지만 구현하는 과정에서 몇몇 문제들이 발생했다.
- 유저의 이메일 인증을 user_verify 테이블의 email_verified의 값인 2로 판별을 하다보니, 이메일 인증을 하고 중간에 이메일 입력을 변경해도 해당 이메일이 인증받은 이메일인지를 확인할 방법이 없다.
- 이에 대한 대책으로 email_verified 값에 2 대신 이메일 인증받은 이메일을 넣을까 생각했지만, 팀원들의 의견은 컬럼의 성격과 맞지 않고, 조잡한 느낌이 든다는 것이었다.
- 그렇다면 user_verify 안에 email이라는 컬럼을 추가하고 해당 컬럼에 인증받은 이메일을 넣는 것은 어떨까라고 생각했지만, 또다른 문제는 과연 유저가 우리가 짠 로직을 한번에 이해할 수 있을까였다.
- 이메일 인증을 누른 후, 다시 마이페이지로 돌아와 완료버튼을 눌러야 이메일 변경이 완료되는데, 과연 유저가 이를 한번에 인지할 수 있겠는가 였다.
- 여기서 문제는 우리의 UI와 성격이 맞지 않는 로직이었던 것이다. 아래와 같이 input 창에서 바로 변경하고자하는 값을 입력하고 인증 후 완료버튼을 눌러야 하지만, 유저가 한번에 인지하기가 어려워, 사용에 불편할 것 같다는 생각을 하게 되었다.
- 결국 이메일 변경 UI와 로직을 변경하기로 했다.
변경 내용은 다음과 같다.
- 이메일 수정 버튼을 누르면 모달이 나온다.
- 모달에 새로운 이메일을 입력하면 인증메일을 보낸다.
- 인증메일은 이전과는 다르게 인증번호가 발급되며 해당 인증번호를 모달창 안에 기입해 주어야 한다.
- 인증버튼을 누른 후 확인 버튼을 눌러야 이베일 변경이 가능하도록 하여, 이메일 변경 중간에 이탈하거나 인증번호를 받고 이탈하는 경우, 이미 받은 인증번호가 유효하지 않도록 하였다.
이번에 느낀 점은 UI와 내가 구현하고자 하는 로직이 유저가 사용하기 편리한가를 생각해야한다는 것이다.
개발자이지만, 기획을 한다고 생각했을 때, 끼워맞추기 식의 로직이 아닌 UI에 맞는 기능 로직을 계획해야 하고, 기능에 맞는 UI를 적용해야 한다는 것이다.
🍊 DevLog
오늘은 어떻게 프로젝트에 기여했나요?
- 유저 정보 변경 서버 요청 구현
- node mailer 서버 구현
- 이메일 변경 modal 생성
오늘 프로젝트에서 힘들었던 점은 무엇인가요?
- 이메일 변경 로직을 변경하였다. 초기 계획은 node mailer의 인증버튼을 통한 이메일 인증이었지만, 현재 웹의 UI와 해당 기능 로직이 맞지 않다는 것을 깨닫게 되었다. 결국 이메일 변경 모달창을 생성하고 버튼클릭 인증이 아닌 인증 번호 발급으로 구현 로직을 변경하였다.
오늘 프로젝트에서 아쉬웠던 점은 무엇인가요?
- 코드를 작성하기 전 구현해야할 기능 로직과 UI에 대한 고민을 해보았으면 좋았을 것 같다. 코드로 구현해 보아야 깨닫는 부분도 있지만, 사전에 좀 더 구체적으로 계획하고 고민해 보았더라면 발견할 수 있었던 부분이어서 아쉽다.
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- 이메일 변경 클라이언트 구현
- 이메일 인증 node mailer 수정
- 카카오 맵 오류 수정
