php - 회원가입 _ 중복 체크

이태현·2025년 7월 9일

Web 개발

목록 보기

10/53

아이디 중복 확인

// 아이디 중복 체크
  const btn_id_chk = document.querySelector("#btn_id_chk")

  btn_id_chk.addEventListener("click", () => {
    const f_id = document.querySelector("#f_id")

    if (f_id.value == "") {
      alert("아이디를 입력해 주세요.")
      f_id.focus()
      return false
    }

위 코드를 설명해보면

아이디 중복 확인 버튼을 btn_id_chk 변수에 담아줍니다.
btn_id_chk에 이벤트를 부여하여 클릭했을 때 다음과 같은 코드를 수행합니다.
f_id(아이디 입력 칸)를 찾아서 변수에 담아줍니다.
만약 f_id 입력 칸이 비어있다면 아래 코드를 수행합니다.
"아이디를 입력해 주세요" 알림 창을 띄우고 다시 아이디 입력 칸으로 마우스 커서가 이동합니다.
return false를 사용해서 밑에 있을 함수들이 실행되지 않게 해당 함수를 빠져나옵니다.

AJAX

출 처 https://developer.mozilla.org/ko/docs/Glossary/AJAX
AJAX는 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해줍니다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있습니다.

FormData

출 처 https://developer.mozilla.org/ko/docs/Web/API/FormData
FormData 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 XMLHttpRequest.send() 메서드를 사용하여 쉽게 전송할 수 있습니다.

XMLHttpRequest => xhr

출 처 https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. XMLHttpRequest는 AJAX 프로그래밍에 많이 사용됩니다.

// Ajax
    const f1 = new FormData()
    f1.append("id", f_id.value)
    f1.append("mode", "id_chk")

    const xhr = new XMLHttpRequest()
    xhr.open("POST", "./pg/member_process.php", "true")
    xhr.send(f1)

    xhr.onload = () => {
      if (xhr.status == 200) {
        const data = JSON.parse(xhr.responseText)

        if (data.result == "fail") {
          alert("중복된 아이디 입니다.")
          f_id.value = ""
          f_id.focus()
        } else {
          alert("사용 가능한 아이디 입니다.")
          id_cnt.value = 1
        }
      }
    }
  })

위 코드를 설명해보면

새로운 FormData 객체를 생성합니다.
생성된 객체에 key와 value를 넣습니다.
- 입력된 ID를 가지고 후에 DB와 연결하여 중복 체크를 하기 위함, 추후 자세히 설명하겠습니다.
새로운 xhr 객체를 생성합니다.
xhr.open 을 사용해서 요청을 초기화합니다.
- POST 방식으로 정보를 보낼 URL을 적고, 비동기 방식(true)으로 데이터를 전송합니다.
xhr.send(f1)를 사용하여 f1 객체를 해당 URL로 전송합니다.
xhr.onload()를 사용하여 xhr이 실행되었을 때 아래 구문을 실행합니다.
xhr.status는 통신이 제대로 이루어졌을 때 해당 아래 구문을 실행합니다.
- HTTP 상태 코드 https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status
JSON.parse(xhr.responseText)는 위에서 보냈던 요청에 대한 응답을 담아서 문자열 json을 js 객체로 바꾸는 걸 의미합니다. 이후 data에 데이터가 담아집니다.
data.result == "fail"는 데이터 안에 값이 실패일 때 아래 구문을 실행합니다.

조건이 fail 일 때,
- "중복된 아이디입니다."라고 알림 창을 띄웁니다.
- ID 칸을 비워주고, 해당 칸으로 다시 입력받을 준비를 합니다.
조건이 success 일 때,
- "사용 가능한 아이디입니다."라고 알림 창을 띄웁니다.
- 중복 확인을 했는지 확인하기 위해서 id_cnt.value 값에 1을 대입합니다.

ID - DB에서 중복 체크

<?php

include "../inc/dbconfig.php";
include "../inc/member.php";

$mem = new Member($db);

$id = $_POST["id"];

if ($_POST["mode"] == "id_chk") {
  if ($mem->id_exists($id)) {
    // echo "아이디가 중복 되었습니다.";
    $arr = ["result" => "fail"];
    $json = json_encode($arr); // 배열을 json 타입으로 변환 {"result" : "fail"}
    echo $json;
    exit;
  } else {
    // echo "사용 가능한 아이디 입니다.";
    $arr = ["result" => "success"];
    $json = json_encode($arr); // 배열을 json 타입으로 변환 {"result" : "fail"}
    echo $json;
    exit;
  }
}

위에 코드를 설명해보면

mem 변수에 Member 클래스를 사용하여 DB와 연결해 줍니다.
Ajax 통신 부분에서 f1 객체에 ID 데이터가 $_POST["id"]에 담아져서 $id 변수에 담아집니다.
Ajax에서 제대로 설명하지 못했던 부분이 있었는데 f1 객체에 담긴 mode 부분은 여기서 ID 중복 확인을 위해서 만들었습니다.
조건문을 통해서 ID의 중복 확인을 해줍니다.
- ID가 중복일 경우,
  - 배열을 하나 만들어서 결과가 실패일 경우를 arr 변수에 담아줍니다.
  - json_encode($arr); 배열을 json 타입으로 변환합니다.
    서버에서 전송된 JSON 데이터를 JavaScript에서 사용하기 위해 필요한 작업
    JSON.parse()를 사용하여 JSON 문자열을 파싱 하면 해당 데이터를 JavaScript에서 손쉽게 다룰 수 있다.
  - 해당 값을 출력합니다.
- ID가 중복이 아닐 경우,
  - 위와 동일합니다.

가입버튼 클릭 시

회원가입을 할 때 ID, PW, Email, 주소, 등등.. 사용자를 알 수 있는 정보를 기입하는데 해당 칸들이 비워진 상태로 가입하면 안 되기 때문에 조건을 주어서 값들이 제대로 있는지 확인하는 작업을 만들어야 합니다.

// 가입버튼 클릭 시
const btn_submit = document.querySelector("#btn_submit")

  btn_submit.addEventListener("click", () => {
    if (f_id.value == "") {
      alert("아이디를 입력해 주세요.")
      f_id.focus()
      return false
    }

회원가입 버튼을 찾아 btn_submit에 담아줍니다.
btn_submit 버튼을 클릭했을 때 ID 입력 칸이 비어있다면 알림 창을 띄우고 다시 입력받을 준비를 합니다.

아이디 중복체크 여부 확인

아이디는 잘 적었는데 중복 체크를 하지 않고 넘어가면 안 되기 때문에 중복 체크가 되었는지 확인을 해야 합니다.

// 아이디 중복체크 여부 확인
const id_cnt = document.querySelector("#id_cnt")

    if (id_cnt.value == 0) {
      alert("아이디 중복 체크를 해주세요.")
      return false
    }

중복 체크 버튼을 찾아 id_cnt에 담아줍니다.
중복 체크 값이 0일 경우 알림 창을 띄워서 알려줍니다.

비밀번호 확인

비밀번호가 비어있는지 확인합니다.

// 비밀번호 확인
const f_pw = document.querySelector("#f_pw")

    if (f_pw.value == "") {
      alert("비밀번호를 입력해 주세요.")
      f_pw.focus()
      return false
    }

비밀번호 칸을 찾아서 f_pw에 담아줍니다.
비밀번호 칸이 비어있을 경우 알림 창을 띄워서 알려주고 다시 입력받을 준비를 합니다.

비밀번호 재확인

2차 비밀번호 확인을 만들어서 비밀번호를 제대로 기입했는지 다시 확인합니다.

// 비밀번호 재확인
const f_pw2 = document.querySelector("#f_pw2")

    if (f_pw2.value == "") {
      alert("2차 비밀번호를 입력해 주세요.")
      f_pw2.focus()
      return false
    }

2차 비밀번호 칸을 찾아서 f_pw2에 담아줍니다.
2차 비밀번호 칸이 비어있을 경우 알림 창을 띄워서 알려주고 다시 입력받을 준비를 합니다.

비밀번호 일치 확인

첫 번째로 입력한 비밀번호와 2차 비밀번호 값이 다를 경우 다시 입력받게 합니다.

// 비밀번호 일치 확인
if (f_pw.value != f_pw2.value) {
      alert("비밀번호가 일치하지 않습니다.")
      f_pw.value = ""
      f_pw2.value = ""
      f_pw.focus()
      return false
    }

첫 번째 비밀번호와 2차 비밀번호가 다를 경우 알림 창을 띄워주고 첫 번째 비밀번호와 2차 비밀번호 칸을 비워주고 다시 처음부터 입력을 받습니다.

이메일 중복 확인

Email 중복 확인 부분은 ID 중복 확인이랑 동일하기 때문에 설명은 생략하겠습니다.

// 이메일 중복체크 여부 확인
    const email_cnt = document.querySelector("#email_cnt")

    if (email_cnt.value == 0) {
      alert("이메일 중복 체크를 해주세요.")
      return false
    }

Email Ajax

// 이메일 중복 체크
  const btn_email_chk = document.querySelector("#btn_email_chk")

  btn_email_chk.addEventListener("click", () => {
    const f_email = document.querySelector("#f_email")

    if (f_email.value == "") {
      alert("이메일을 입력해 주세요.")
      f_email.focus()
      return false
    }
    // Ajax
    const f1 = new FormData()
    f1.append("email", f_email.value)
    f1.append("mode", "email_chk")

    const xhr = new XMLHttpRequest()
    xhr.open("POST", "./pg/member_process.php", "true")
    xhr.send(f1)

    xhr.onload = () => {
      if (xhr.status == 200) {
        const data = JSON.parse(xhr.responseText)

        if (data.result == "Email_fail") {
          alert("중복된 이메일 입니다.")
          f_email.value = ""
          f_email.focus()
        } else {
          alert("사용 가능한 이메일 입니다.")
          email_cnt.value = 1
        }
      }
    }
  })

Email - DB에서 중복 체크

if ($_POST["mode"] == "email_chk") {
  if ($mem->email_exists($email)) {
    // echo "이메일이 중복 되었습니다.";
    $arr = ["result" => "Email_fail"];
    $json = json_encode($arr); // 배열을 json 타입으로 변환 {"result" : "fail"}
    echo $json;
    exit;
  } else {
    // echo "사용 가능한 이메일 입니다.";
    $arr = ["result" => "Email_success"];
    $json = json_encode($arr); // 배열을 json 타입으로 변환 {"result" : "fail"}
    echo $json;
    exit;
  }
}

이메일 확인

const f_email = document.querySelector("#f_email")

    if (f_email.value == "") {
      alert("이메일을 입력해 주세요.")
      f_email.focus()
      return false
    }

마무리

이번 부분에서 새로운 내용들이 있어서 익숙해지는 데 시간이 걸렸네요.
다음 시간에는 우편번호를 외부에서 이미 만들어진 걸 가져와서 사용해 볼 겁니다.
그리고 이미지 업로드 부분도 같이 해보겠습니다.

긴 글 봐주셔서 감사합니다.

이태현

이해하고 분석하고 지배한다

이전 포스트

php - Class정의 & Class를 이용한 중복 체크

다음 포스트