![]()
로그인 페이지 레이아웃 구성 들어가며 이전 포스팅까지는 회원가입을 하는기능을 개발해봤습니다. 이제부터는 회원가입한 데이터값을 이용해서 로그인 기능을 개발해볼 예정입니다. 이번 포스팅에서는 로그인 페이지의 레이아웃 부터 구성해보겠습니다. 예상 로그인 페이지 간단한 기능이 있는 로그인 페이지 HTML 기존에 만들었던 header.html 에서 href 부분에 "/login"을 추가한다. | 로그인 templates/ 하위에 login폴더 생성후 loginPage.html 생성 bootstrap을 사용할 예정이라 css파일에다가 bootstrap다운받은후에 bootstrap.min.css 파일을 넣어줘야합니다. loginPage.html 책방 Id Password Remember Id Sign in 아이디 찾..
![]()
회원가입 실행 들어가며 그동안 간단하게 회원가입기능을 개발해보았습니다. 개발했던것을 작동이 정상적으로 되는지 확인해보겠습니다. 실행화면 입력했던 값들이 db에 정상적으로 들어가있는것을 볼수있다. 이렇게 간단하게 회원가입 기능을 개발해봤습니다. 아직 이러한 회원가입 기능에는 여러가지 미흡한점이 있습니다. 비밀번호가 그대로 노출되는것입니다. 이기능은 UUID로 변환하여 저장하는 방법이 있습니다. 비밀번호를 암호화 해보시고 싶으시면 한번 도전해보시길 바랍니다!!! 감사합니다!
![]()
회원가입 주소등록 (카카오 API 사용) 들어가며 이번에는 회원가입시에 회원의 주소를 입력하는것을 개발할것입니다. 직접 API를 만들어서 할수도있지만 잘만들어진 API를 사용해서 구현하는것도 좋은 서비스라고 생각하여 KAKAO의 주소 찾기 API를 통해서 개발해보도록 하겠습니다. 기본설정 카카오 우편번호 API 사이트에 접속하면 자세한 설명들이 나와있습니다. 그릭고 여러종류의 레이아웃이있지만 저는 사용자가 선택한 값 이용하기를 사용하겠습니다. join.html 카카오 API를 사용하기 위해서는 스크립트한줄을 추가해줘야합니다. 그리고 예제 코드에나와있는것처럼 자신이 맞는 주소찾기의 이름을 적절하게 변경하여 작성해주시면 됩니다. script function sample6_execDaumPostcode() {..
![]()
아이디,비밀번호 중복검사 들어가며 이번에는 전에 구현했던 회원가입 페이지에서 아이디 및 비밀번호를 중복검사(중복체크)를 하는 구현해 보겠습니다. AJAX 통신을 위한 API 두 개를 간단하게 구현할 예정입니다. 수정사항 아 래와 같이 아이디 중복검사 버튼을 따로 만들지 않으며 바로 아이디 입력 시 실시간으로 아이디를 체크할 수 있게 수정. join.html 아이디 수정 아이디 onInput : 이벤트로, 입력요소의 값이 변경될때 발생하는 이벤트이다. API AJAX 통신을 하기 위해서 아이디 중복검사, 비밀번호 중복검사를 구현을 해보겠습니다. 아이디 중복검사와 비밀번호 일치 검증을 하기 위해서 MemberRepository, MmeberService 부분에 기능을 추가하여 MemberController에..
