[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3)

2024년 08월 23일

Song hyun
작성자
2024.08.23.:26

728x90

[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3)

1. sign-up.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회원가입 by JS</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/header.css" />
  </head>
  <body>
    <!-- 헤더 섹션과 네비게이션 메뉴 영역  -->
    <header>
      <nav class="nav-container">
        <div class="nav-item">
          <span class="menu-link">게시판</span>
        </div>
        <div class="nav-item">
          <span class="menu-link">로그인</span>
          <span class="menu-link">회원가입</span>
        </div>
      </nav>
    </header>

    <main class="content-wrapper">
      <!-- 회원 가입 제목 영역  -->
      <section class="form-title">
        <h1>회원가입 by JS</h1>
      </section>

      <!-- 회원 가입 폼 영역 -->
      <section>
        <form action="" onsubmit="return false;">
          <table>
            <tr>
              <th>아이디</th>
              <td>
                <input type="text" class="inputs" placeholder="아이디를입력하세요" value="tenco1" />
                <button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
              </td>
            </tr>
            <tr>
              <th>닉네임</th>
              <td>
                <input type="text" class="inputs" placeholder="닉네임을입력하세요" value="둘리1" />
              </td>
            </tr>
            <tr>
              <th>비밀번호</th>
              <td>
                <input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
              </td>
            </tr>
            <tr>
              <th>비밀번호확인</th>
              <td>
                <input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
              </td>
            </tr>
          </table>

          <div class="btn-area">
            <button type="button" id="signUpBtn" class="btn">회원가입</button>
          </div>
        </form>
      </section>
    </main>

    <!-- js 파일은 하단에 두는 것이 일반적입니다. 
     모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고 
     페이지 로드 속도를 최적화 하는데 도움이 된다. 
    -->
    <script src="../js/header.js"></script>
    <script src="../js/signUp.js"></script>
  </body>
</html>

2. signUp.js

// 1. 변수에 선언과 초기화 
const inputs = document.querySelectorAll(".inputs");
const checkIdBtn = document.getElementById("checkIdBtn");
const signUpBtn = document.getElementById("signUpBtn");
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체 

// 로컬스토리지에 접근해서 사용자 정보를 가져오는 함수를 만들어 보자. 
// localStorage <-- 변수를 통해 접근 가능 
function getUserInfo() {
    let userListString = localStorage.getItem("userList");
    if(userListString === null) {
        return [];
    } else {
        // 문자열을(JSON 형식) JS 에 데이터 타입인 객체로 변환 처리 
        return JSON.parse(userListString);
    }
}

const userInfo = getUserInfo();


// 아이디 중복 확인 기능 만들어 보기 
function checkDuplicatedId() {

    const inputUsername = inputs[0].value.trim(); 
    
    if(inputUsername === "") {
        alert('아이디를 입력하세요');
        inputs[0].focus();
        return ; 
    }

    // 로컬스토리지에서 가져온 사용자리스트에서 반복문을 돌면서 inputUsername 에 담기 
    // 같은 값이 있는지 확인 
    let isDuplicatedId = false; 
    for(let i = 0; i < userInfo.length; i++ ) {
        if(userInfo[i].username === inputUsername) {
            isDuplicatedId = true; 
            break;        
        }
    }
    
    if(isDuplicatedId == true) {
        alert('이미 존재하는 아이디입니다.');
        inputs[0].focus();
    } else {
        alert('사용 가능한 아이디 입니다.');
        inputs[0].readOnly = true; 
        inputs[0].style.backgroundColor = "green";    
    }
}

// 회원가입 처리 함수
function registerUser(){
    const username=inputs[0];
    const nickname=inputs[1];
    const password=inputs[2];
    const confirmPassword=inputs[3];

    // 유효성 검사
    if(username.readOnly==false){
        alert('아이디 중복 확인을 해주세요.');
        username.focus();
        return;
    }

    if(nickname.value.trim()==+""){
        alert('닉네임을 입력하세요.');
        nickname.focus();
        return;
    }

    if(password.value.trim()===""){
        alert('비밀번호를 입력하세요.');
        nickname.focus();
        return;
    }

    if(confirmPassword.value.trim()===""){
        alert('비밀번호를 입력하세요.');
        nickname.focus();
        return;
    }

    if(password.value !== confirmPassword.value){
        alert('비밀번호가 일치하지 않습니다.');
        password.focus();
        return;
    }

    // 자바 스크립트에서 객체를 생성하는 방법 2가지
    // 1. new 키워드 사용
    // 2. 객체 리터럴 사용

    // 새로운 사용자 정보를 객체 리터럴로 생성
    const newUser = {
        username: username.value,
        nickname: nickname.value,
        password: password.value,
        createdAt: toDay.getFullYear ()+ "." + (toDay.getMonth()+1)+"."+toDay.getDate()
    };

    // [{},{},{}] : 자료구조
    userInfo.push(newUser);
    // 로컬 스토리지에 자료구조를 통으로 덮어쓰기 저장
    localStorage.setItem('userList',JSON.stringify(userInfo));

    // 로그인 페이지로 이동 처리
    window.location.href="sign-in.html";
}

// 이벤트 리스너 등록 처리 
function addEventListener() {
    checkIdBtn.addEventListener('click', checkDuplicatedId);
    signUpBtn.addEventListener('click', registerUser);
}

// 이벤트 리스너 함수 실행(호출)
addEventListener();

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 26. JavaScript를 사용한 헤더 만들기 (0)	2024.08.26
[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1) (0)	2024.08.23
[JavaScript] 23. JavaScript를 사용한 회원 가입 만들기 (2) (0)	2024.08.21
[JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1) (0)	2024.08.21
[JavaScript] 20. 실행 환경 구축 (0)	2024.08.21

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3)

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바