실전 프로젝트 4주차가 되었다.
여전히 자동로그인 부분에 막혀있는데, 다른 자잘한(?) 버그들이 계속 나오면서 수정을 거듭하고 있다. 수정했던 부분을 기록해 보려고 한다.
1. 인풋창 한 글자 누락 버그
일단 인풋창에 입력할 때 한글자씩 늦게 입력 되던 부분을 개선했다. 색다른 방법을 취한 것이 아니라 기존에 있는 코드에서 수정했더니 매끄럽게 입력이 되었다.
기존에는 emailData = loginData.email 이라고 입력을 하고 있었는데, 이것을 e.target.value로 바꾸니 한글자가 누락되지 않고 제대로 입력되었다.
2. 회원가입 후 바로 로그인
회원가입 페이지를 작성하면 그 데이터를 가지고 바로 로그인을 할 수 있도록 했다.
하지만, 회원가입 데이터가 서버에 도착하고 그 뒤에 로그인을 진행해야 하기 때문에 약간의
시간적인 텀이 생겼다.
최대한 동시에 로그인이 되는 것처럼 보여지고 싶었는데, 중간에 회원가입 최초의 페이지가 한번 더 그려지면서 오류처럼 느껴졌다.
setTime으로 시간차를 둔 다음에 그 사이에 토스트 메시지를 띄워서 유저에게 오류의 상황이 아님을 설명하는 방식으로 수정했다.
경우에 따라서는 바로 로그인이 되는것처럼 보였고, 어떨때는 시간 텀이 조금 길긴 했다.
어쨌든 유저는 한번만 정보를 입력하면 바로 로그인이 되는 상황이기 때문에 시간 조절이 매끄럽게 되지 않는다고 하면 현재의 방법을 유지할 거고, 개선이 된다면 더 부드럽게 로그인을 하게 될 것 같다.
3. 토스트 메시지
2번 문제점에서 파생되어 수정한 내용이다. 처음에는 alert창을 띄워서 오류나 아니면 기다려달라는 메시지를 유저에게 전달하려 하였으나, 유저가 alert 창을 보게 되면 최소 1번 이상의 버튼클릭 행위를 해야 하기 때문에 사이트에 접속하는 장벽을 높이게 된다고 생각했다. 그래서 alert창 대신 toast를 띄워서 유저의 편의성을 극대화 하는 방식으로 접근 하기로 했다.
toast메시지는 로그인 회원가입 페이지에서만 쓰이는 것이 아니기 때문에 컴포넌트화 시켜야 했는데, 다른 팀원분이 만든 것과 내가 만든것중에 나는 모달처럼 login 페이지에만 유효한 컴포넌트라 다른 팀원분이 만든 것을 조금 더 개선해서 사용하기로 했다. login 페이지에 필요한 메시지와 다른 페이지에 필요한 메시지들을 담는 state를 전역으로 관리하면 언제고 필요한 메시지만 담아서 꺼내어 쓸수 있을거라고 생각해서 recoilState를 썼다.
toast라이브러리를 쓰지 않고, 투명한 상태로 페이지 하단에 숨겨놓는 것이라 다른 페이지에 본의아니게 영향을 주는 부분이 있었는데, 그 부분도 전부 display쪽을 조건을 걸어 어떨땐 보이게하고 어떨땐 안보이게 하며 다른 페이지에 자연스럽게 숨겨 놓기로 했다.
이것도 다른 방식이 있다면 개선해야 할 부분이라고 생각한다.
4. 비밀번호 정규식
비밀번호 정규식 정보를 담은 블로그들이 많았는데, 제대로 작동하지 않는 것들이 있었다.
내게 필요한 정규식은 대문자1개, 숫자 1개, 특수문자 1개를 쓰고 나머지는 소문자만 써도 되는 조건식이었다.
블로그를 보고 작성한 것이라 출처를 가지고 왔다.
https://patiencelee.tistory.com/1068
남은 부분
페이지 전환시 생기는 핑크페이지 버그
현재 거의 다 수정이 되었지만, 공인중개사의 경우 회원가입 후 승인을 받아야 하기 때문에 가입만 작성한다고 해서 사이트를 이용할수 있는 것은 아니다. 뒤로가기 버튼을 눌렀을때 핑크페이지가 뜨는 것을 잡아야 한다.
보안문제 없는 자동로그인
리프레시 토큰을 이용해서 서버에 다시 토큰 요청을 해야하는데, 그냥 기한만 늘린 리프레시 토큰을 localstorage에 담는게 보안상 안전하지 않다는 글을 보고 난 뒤 잠시 소강상태에 있다.
일반회원 소셜로그인
자동로그인 끝난 뒤 구현할 기능인데, 소셜로그인의 경우 일반회원에게만 해당되는 기능이다.
