[JS, PHP, MySQL] 웹 사이트 만들기 1.7 - 회원가입시 아이디 중복확인하기

회원가입을 할 때 아이디 중복체크기능을 만들어줬고 아이디 중복체크를 하지 않으면 회원가입이 되지 않도록 했다

 

아이디 중복확인 - 회원가입 페이지

먼저 회원가입 페이지는 위와 같다
아이디 중복확인버튼을 누르지 않았으므로 회원가입버튼을 눌러도 전송이 되지 않는다

 

20
먼저 자바스크립트 코드를 head 태그 안에 포함시켜 준다

33, 36, 38
아이디 입력하는 부분의 id 값을 id로, 아이디 중복확인 버튼의 id 값은 id_check로 해준다

 

 

아이디 중복확인 - JavaScript

1 ~ 4
회원가입페이지에서 id값을 이용해 각각 변수에 대입해 준다 ( nf_btn 은 맨 아래 회원가입버튼 )

6 ~ 13
아이디 중복확인 버튼이 눌러지면 입력한 아이디값의 양쪽 공백 제거 후 uid 변수에 넣어주고 아이디값이 비어있다면 알림 창을 띄워준다

 

14 ~ 16
서버로 요청을 보내며 이때 id에 uid의 값을 같이 전달하여 서버에서 입력한 아이디의 값을 받을 수 있도록 해준다

17 ~ 41
서버로부터 온 응답이 정상적일 경우 아이디가 존재한다면 회원가입버튼을 누를 수 있도록, 아이디가 없다면 다시 입력하도록 해준다

 

document.addEventListener('DOMContentLoaded', () => {...});
// HTML 문서의 모든 요소가 로드되고 해석된 후, 함수 내부의 코드가 실행되도록 보장해주는 코드
// 따라서 모든 요소(HTML, CSS, 이미지, JS...)가 준비되고 실행이 되므로 오류 발생확률 낮아짐

변수이름 = document.querySelector('#아이디이름');
// 문서내에서 id 가 아이디이름 인 요소를 변수이름에 할당한다

open('GET', `./요청할 파일의 경로?id=${전달해줄 값}`);
// 요청할 파일의 경로에 id값을 전달해줄 값으로 전달해주고 HTTP GET으로 요청을 보낼 준비를 한다

onload = () => {...};
// 데이터를 받아온 후에 실행되는 함수, xhr.responseText를 통해 서버로부터 받은 응답 데이터를 가져올 수 있다

변수이름 = JSON.parse(xhr.responseText);
// xhr.responseText는 서버로부터 받아온 응답 본문이다
// JSON 문자열로 구성, JSON.parse()를 사용하여 JavaScript 객체로 파싱해야함
// 파싱 -> 컴퓨터가 이해할 수 있는 데이터 형식으로 변환하는 과정

.send();
// open() 메서드로 설정한 HTTP를 서버로 요청을 보냄

 

 

아이디 중복확인 - PHP, MySQL

3 ~ 10
데이터베이스에 연결을 하고 전달받은 아이디값을 uid 변수에 할당하고 데이터베이스 연결에 실패하면 에러를 출력한다

12 ~ 26
데이터베이스에 아이디 중복 여부를 결과로 받아서 아이디가 있다면 true를, 없다면 false를 배열에 추가한 뒤 값을 보내고 연결을 종료한다

 

아이디 중복확인이 정상적으로 실행이 된다