우선 내가 맡은 로그인 페이지에서 필요한 주요 기능은 이러했다.
- 아이디와 패스워드 유효성 검사
- 아이디와 패스워드가 포켓베이스 안에 존재하는지
- 로그인 버튼과 회원가입 버튼을 누를 시 페이지 이동
- 아이디 찾기, 비밀번호 찾기는 눌렀을 때 서비스 준비중입니다 문구를 모달창으로 띄우기 (기능 구현이 오래 걸리기도 하고 1주 반에 걸친 짧은 프로젝트기 때문에 생략)
- 자동 로그인 체크 활성화, 비활성화 하기 (위와 동일한 이유)
JS 기능 구현을 어떻게 해야 한 번에 할까 고민이 많았는데 5가지 기능 전부 구현하는 순서는 똑같았다.
- 먼저 노드를 가져오기
- 이벤트를 부여하기
- 이벤트를 부여한 함수를 정의하기
2-1. JS 기본 설정
HTML 코드에서 선언한 클래스를 querySelector를 통해서 불러왔다. 포켓베이스와 스토리지 JS 파일에서 스토리지를 가져왔다.
JS 파일의 하단부에는 이벤트 부여 함수를 선언했다. 안에 무언가를 입력했을 때는 input, 클릭을 했을 때 발생하는 이벤트에는 click 이벤트를 부여하여 밑에 각각 이벤트를 추가해두었다.
이후에는 아이디와 패스워드의 조건을 선언하기 위한 정규식을 함수로 선언해주었다. 아이디 기능에는
- 문자열은 알파벳 대소문자와 숫자로만 구성되어야 합니다.
- 문자열의 길이는 6에서 12 사이로 구성했다.
패스워드의 조건은
- 문자열은 알파벳 대소문자, 숫자, 특수문자 !@#$%^&* 중 하나로 이루어져야 합니다.
- 문자열 내에는 특수문자 !@#$%^&* 중 하나가 적어도 한 번 이상 나와야 합니다.
- 문자열의 길이는 6에서 16 사이여야 합니다.
2-2. JS 함수 설정
- 아이디, 비번 체크 함수
- 아이디랑 비번 밸리데이션 함수
- 로그인 버튼 누르는 함수
- 체크박스 함수
- 모달창 함수
1. 아이디, 비번 체크 함수
포켓베이스에서 일치한 유저 정보를 가져와서 아이디와 비번을 체크하는 함수를 구현했다. 유저 노드에서 둘을 비교하여 정보가 일치하지 않을 때는 일치하는 회원정보가 없다는 alert창을 띄웠다.
2. 아이디, 비번 밸리데이션 함수
아이디랑 비번의 조건 유효성 검사를 idReg 함수를 통해서 실행함.
input 에 들어온 값을 변수에 저장하여 if문을 실행함.
조건에 부합할 때는 넘어가고, 조건을 충족하지 못할 때는 아이디와 비번의 조건을 텍스트를 통해서 화면에 띄운다.
3. 로그인 버튼 누르는 함수
setStorage 를 사용하여 저장하고 아이디와 비밀번호를 체크한다.
e.preventDefault를 사용하여 이벤트의 기본 동작을 취소한다.
만약에 두 아이디와 비밀번호가 일치한다면 경로를 index.html로 돌아가게 한다.
아닐 시, 경고창을 띄운다.
4. 체크박스 함수
원래는 자동 로그인 기능을 구현하려고 했으나, 바닐라 프로젝트의 짧은 특성상 눈에만 보이도록 눌렀을 때 이미지가 바뀌도록 기능을 구현했다. 체크박스에 배경 이미지를 주는 방법도 있었는데 복잡할 것 같아서 우선은 이미지가 바뀌도록 기능을 구현했다.
5. 모달창 함수
아직 구현하지 못한 아이디 찾기나 비밀번호 찾기 등을 "서비스 준비중입니다." 라는 모달창을 띄우도록 구현했다. HTML은 폼 태그 밖에 모달창 태그를 넣었고, 디자인은 CSS에 구현했다.
