JavaScript 회원가입

JavaScript 회원가입/로그인/회원 조회 시스템

이번 포스팅은 JavaScript만으로 회원가입, 로그인, 회원정보 조회 기능을 만드는 과제 예시입니다. 데이터베이스 없이 새로고침 전까지 가입정보를 배열에 저장하며 로그인·조회 기능을 제공합니다. (실제 서비스용이 아니라 학교 과제 목적이므로 참고용으로만 사용 바랍니다!)

---

회원 정보 관리 객체 예시

// 사용자 관리 객체 (회원가입, 로그인, 회원정보 조회)
const UserManagement = {
  users: [],

  signUp() {
    let post_member = prompt("아이디 비밀번호 이름을 입력하시오");
    let words = post_member.split(' ');
    if (words.length !== 3) {
      alert("올바른 형식으로 입력해 주세요 (아이디 비밀번호 이름)");
      return;
    }
    const Post = { id: words[0], pw: words[1], name: words[2] };
    for (let i = 0; i < this.users.length; i++) {
      if (Post.id === this.users[i].id) {
        alert("아이디 중복으로 인해 회원가입이 어렵습니다");
        return;
      }
    }
    this.users.push(Post);
    alert("회원가입이 완료되었습니다!");
  },

  signIn() {
    let get_member = prompt("아이디 비밀번호 입력하시오");
    let words = get_member.split(' ');
    if (words.length !== 2) {
      alert("올바른 형식으로 입력해 주세요 (아이디 비밀번호)");
      return;
    }
    const Get = { id: words[0], pw: words[1] };
    for (let i = 0; i < this.users.length; i++) {
      if (Get.id === this.users[i].id && Get.pw === this.users[i].pw) {
        alert(Get.id + "님 환영합니다.");
        return;
      }
    }
    alert("회원정보가 일치하지 않습니다.");
  },

  getAllMembers() {
    let show = () => {
      let out = "";
      for (let i = 0; i < this.users.length; i++) {
        out += this.users[i].id + " " + this.users[i].name + "<br>";
      }
      return out;
    }
    document.getElementById("findAll").innerHTML = show();
  }
};

---

주요 기능 버튼/태그 예시

• 회원가입: UserManagement.signUp();
• 로그인: UserManagement.signIn();
• 전체회원조회: UserManagement.getAllMembers();
  (id="findAll"인 태그에 결과 출력)

---

#html #css #javascript #signup #signin #과제
순수 JS로 객체/배열 조작하며 과제 UI 수행!

---