📃 1/8
-
회원정보 수정 구현 ✔️
-
ui 수정 ✔️
🔎 회원 정보 수정 테스트
username을 수정하지 않고 패스워드만 수정하게 하고 싶은데
수정을 하려고 하면
이미 있는 값이 저장되려고 해서 중복을 허용하지 않는 컬럼이므로
위의 에러나 아래의 무결성 제약 조건 위배 에러가 난다.
기존 사용자 정보가 존재하면 업데이트를 수행하게 변경쓰 !
현재 사용자의 이름으로 고정되며, 비밀번호만 업데이트 하게 된다.
비밀번호 업데이트 완료 !
이 프로젝트는 유저가 접근하기 쉽게 회원가입 부분을 간편화 하여
user 테이블에 사용자가 직접 입력하는 컬럼은 닉네임(username)과 비밀번호(password)만 있어서 회원 정보 수정을 비밀번호만 업데이트 하는 방향으로 정했다.
🗯️ UI 수정
- 메모 리스트가 많아질 때 컨테이너 위에 제목이나 요소들이 짤리는 거 해결하기
(수정한 부분)
body {
height:auto;
}
container {
max-width: 400px; / 유동적인 폭을 제한하기 위해 max-width 추가 /
width: 100%; / 100%로 설정하여 부모의 폭에 맞추기 /
}
- 메모 내용 길이에 따라 유동적으로 컨테이너 길이 변경되게 설정
오잉?!
- 엔터를 입력한 것은 줄바꿈처리되게 했는데 사용자가 엔터를 누르지 않고
쭉 길게 입력할 경우를 작성해보면 화면에 이렇게 나타난다.
오마이갓 ! 해결하자요
- 시도 01
white-space: pre-wrap; / 공백은 유지하고 줄바꿈 처리 /
이렇게 하면 줄바꿈 처리했던 내용들은 더 여백이 생기게 되고
위의 길게 이어 쓴 글은 처리가 되지 않는다.
- 시도 02
결과
💭 해결
- 시도 03
결과
내용이 최대 너비를 넘어갈 때 단어 단위로 줄바꿈이 이루어지면서
넘어가는 내용도 잘 나타나고 있다 굿 !
++ /white-space: pre-wrap;/ 은 주석 처리해주기 !
🛫 ui 완성
-
로그인 화면
-
회원가입 화면
-
메모 리스트 화면
-
메모 작성 화면
-
메모 수정 화면
-
메모 내용 화면
-
회원 정보 수정 화면
📃 1/9
- 로그인/회원가입 로직 재검토 ✔️
- 프로젝트 백업 / css / js 분리 ✔️
🔧 로그인/회원가입 로직 수정
1. 로그인 로직 점검
로그인 시 닉네임만 맞고 비밀번호가 틀릴 때도 로그인이 되고 있음.
닉네임 틀리게 입력했을 땐 ?error로 막힘
💥 시도 01
-
시큐리티 필터 설정에서 로그인에 실패했을 시 url 설정
.failureUrl("/login?error=true")
-
jsp 파일에 실패 메세지가 있을 경우 알림 메세지 표시 처리
-
테스트 - > 닉네임, 비밀번호 틀리게 입력할 시 에러 메세지 출력됨
하지만 이렇게까지만 하면 여전히 닉네임을 db에 있는 닉네임이면 비밀번호가 틀려도
로그인이 되어버리고 있다 !
이 이슈에 대해 찾아보니
로그인이 비밀번호가 틀리더라도 username만 맞아도 성공하는 이슈는 Spring Security에서 기본적으로 제공하는 인증 프로세스에 문제가 있는 것이라고 한다.
뭔가 이리저리 부딪히면서 하다보니 뭘 건들여서 로그인이 잘못된건지 알기가 어려웠다.
@authenticationprincipal에 null로 들어가고 사용자 정보를 찾지 못하는 것부터
시작이었을까 ? CustomAuthenticationProvider 클래스에서 인증 로직을 직접 구현하는 방법으로 교체하면서 뭔가 꼬였던 것 같다.
원래 스프링 시큐리티에서 기본적으로 제공하는 로그인 기능에는 비밀번호 일치도 확인한다고 하는데 나는 사용자 정보를 가져오지 못하는 것에 에러를 오래 만지다가 커스텀해서 인증하는 방식을 넣다 보니 비밀번호를 인증하는 코드를 따로 작성해주지 않아서 발생한 문제같다.
헷갈려 빙빙 💫
일단 시도하다가 해결된 방법을 우선 적어두자요 !!!
💫 로그인 인증(비밀번호일치여부) 확인
- CustomAuthenticationProvider 클래스에 비밀번호 암호화 의존성 추가
@Autowired
private BCryptPasswordEncoder passwordEncoder;
- CustomAuthenticationProvider 클래스에서 암호화된 비밀번호를 확인
- 테스트
입력한 비밀번호가 암호화된 비밀번호와 일치하지 않는 경우에는 로그인이 실패하고
막히게 된다 ! 드디어 내가 원하는대로 닉네임과 비번이 같이 인증되어야 로그인 되게 됐다.
회원 정보 수정에서 비밀번호를 수정한 후에도 테스트해보면 비번이 일치해야만
로그인 되게 작동하고 있다 얏호 !
2. 회원가입 로직 점검
- 회원 가입 시 스크립트 출력 순서가 안 맞고,
닉네임 중복 체크하려고 하면 필드를 냅다 초기화시키는 것도 고쳐야 할 것 같고
유효성 검증에 맞지 않는 닉네임으로도 회원가입이 되는 것이 확인 됐다.
나는 분명 4글자 이상이고 등등 닉네임 조건을 적용했는데
스크립트 메세지로 경고메세지를 주긴 하지만 이를 무시하고 틀린 닉네임으로 테스트해보면 조건에 어긋난 닉네임으로도 회원가입이 되어 버린다.
이건 메세지는 알려주지만 막히진 않고 처리가 진행되어버린다는 것인가 ?
📃 1/10
- 회원 가입 로직 수정 마무리 ✔️
- 리드미 작성 ✔️
-
join.jsp 회원가입 폼
-
테스트
공백 검증 알림창과 그 외 기타 유효성 검증 문구는 잘 나타나고 있다.
문제가 되는 부분은 중복 닉네임일 때의 체크가 안 되고
유효성 검증에 맞지 않는 데이터도 회원 가입이 되는 건데
우선 중복 닉네임일 때의 문구를 보여주자 !
idCheck 메서드 수정
-
IndexController idCheck 메서드 수정
-
userService 수정
idCheck 메서드는 userService.idCheck(username)를 통해
MemoUser를 반환하고, 이를 기반으로 중복 여부를 판단하여
결과를 뷰에 전달한다.
만약 existingMember가 null이 아니면
중복된 아이디가 존재하는 것으로 간주하고 result를 1로 설정하고,
그렇지 않으면 -1로 설정하여
뷰에서는 이 값을 받아 처리하는 로직이다.
- join.js 수정
- 전달 받은 int형의 1 또는 -1 값을 ajax에서 처리한다.
- 테스트
중복 닉네임 여부를 알려주는 것까진 다시 잘 작동하고 있는 걸 확인할 수 있다.
이제 관건은 중복 닉네임일 때는 회원가입을 시도하지 않게 막아야 하고
유효성 검사에 어긋난 닉네임으로는 회원가입이 되지 않게 해야 한다.
현재는 아래와 같이 중복 닉네임을 일부러 입력하고 가입을 눌러 보면
닉네임 체크를 진행하라는 알림창이 뜨고 확인을 누르면
닉네임을 체크할 수 있게 제자리에 있어야 하는데 회원가입을 진행해버려서
당연히 중복 위배 에러가 난다 !!!
초반에도 이 문제가 일어났었는데 중복 닉네임일 때 가입 폼을 막아서 해결하면 또 다른데서 어긋나고 무한 반복이 된다..
이번에는 확실히 해결해보자요 !
중복 닉네임일 때 회원가입 전달 막기
- join.js join_check() 수정
- 테스트01 - 중복 닉네임으로 가입 시도
존재하는 닉네임으로 일부러 가입 시도하면 알림창이 뜨고
이번엔 회원가입을 실행하지 않고 아이디 창으로 포커스가 가게 됐다 !
- 테스트02 - 닉네임체크 사용하지 않고 중복 닉네임으로 가입 시도
닉네임 체크를 하지 않고 중복 닉네임을 입력하고 가입을 시도할 때도
잘 막히게 됐다... 드디어 !! 얏호
근데 해결하게 된 게 수정한 부분이
$("#username").focus(); < -- 이 코드를
$("#username").val("").focus(); < -- 이렇게 수정한건데
그전까지는 아무리 return false 해둬도 계속 가입을 시도하다가
포커스 돌려주는 부분 코드를 바꾸니까 가입을 시도하지 않는다 !
왜일까 ??
궁금해서 gpt 에게 질문하니 돌아온 답변
많이 헤맸지만 로직을 검토하면서 기능들에 대한 이해를 좀 더 할 수 있는 시간이 된 것 같다요 빠팅 !
++ 추가로 테스트중 이상한 부분 발견
이렇게 하면 1. 중복 닉네임일 경우, 2. 중복 닉네임이고 닉네임 체크를 하지 않은 경우, 3. 중복 닉네임이 아닐 경우+닉네임 체크를 한 경우
3가지는 알맞게 잘 작동한다.
그런데 남은 보완점은
중복 닉네임이 아니지만 닉네임 체크를 하지 않고 가입을 시도할 경우의
처리가 안 돼 있어서 테스트 해보면 중복 닉네임 알림창이 뜨게 된다 !
그리고 설정한 패턴에 맞지 않는 닉네임일 때의 경우도 같이
알림을 띄워 주기 위해
우선 로직을 더 수정하진 않고 알림창 메세지를 바꿔서
닉네임 체크로 유도하거나 사용할 수 없는 닉네임이라 알려주기로 했다.
이제 시큐리티 적용,crud 구현,회원기능 구현,ui 테스트가 1차적으로 끝났다.
한 바퀴 돌았으니 !! 이제 배포를 어떻게 하는지 알아보자
정적 컨텐츠는 netlify를 이용하거나 깃허브로 배포가 가능한데
동적인 결과물은 어떤 식으로 배포해야하는지 알아 봐야 할 것 같다.
이것 또한 헤매겠지만 앞으로 계속 마주치게 될 기능일 것 같으니
부딪혀보자 ! 💫
