[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1)

2024년 08월 23일

Song hyun
작성자
2024.08.23.:28

728x90

[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1)

1. sign-in.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</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" />
              </td>
            </tr>
            <tr>
              <th>비밀번호</th>
              <td>
                <input type="password" class="inputs" placeholder="비밀번호를입력하세요" value="1234" />
              </td>
            </tr>
          </table>
        </form>
      </section>

      <div class="btn-area">
        <button type="button" class="btn">로그인</button>
      </div>
    </main>

    <script src="../js/header.js"></script>
    <script src="../js/signIn.js"></script>
  </body>
</html>

2. signIn.js

// 1. 사용자 로그인 처리
// 2. 회원가입 된 사용자 확인
// 3. 사용자 입력값 유효성 검사
// 4. 로컬 스토리지에 사용자 정보 저장

// - 로컬 스토리지에서 사용자 전체 목록을 가져오기
const userList = JSON.parse(localStorage.getItem('userList'));
console.log("userList",userList);

// - DOM API 접근 Node 가져오기
const inputs = document.querySelectorAll('.inputs');
const button = document.querySelector('button');

// - 이벤트 리스너 등록
function addEventListener(){
    button.addEventListener('click',login);
}

// - 로그인 처리 함수 만들어보기
function login(){
    const username = inputs[0];
    const password = inputs[1];

    // 유효성 검사
    if(username.value.trim()===""){
        alert('아이디를 입력하세요.');
        username.focus();
        return;
    }

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

    // 단 한 명도 회원가입 없을 경우 예외 처리

    if(userList==null || userList.length===0){
        alert('등록된 사용자가 없습니다.');
        location.href("sign-up.html")
        return;
    }

    //[{},{},{},{}]
     let userFound=false;
     for(let i=0; i<userList.length; i++){
        // 1.사용자가 입력값 username, 자료구조 안에 username 값이 같다면 일단 ID는 있는 것
        // 2. 이름이 같다면 비밀번호가 맞는지 확인해야
        if(userList[i].username===username.value){
            userFound=true;
            if(userList[i].password !== password.value){
                alert('잘못된 비밀번호 입니다.');
                password.focus();
                return;
            } else {
                // 로컬 스토리지에 현재 상태를 저장시킴
                // key - user, value - object
                localStorage.setItem('user',JSON.stringify(userList[i]));
                alert('로그인 완료');
                // location.href="board-list.html";
                return;
            }
        }
     }

     if(userFound == false){
        alert('해당 ID가 존재하지 않습니다.');
        username.focus();
     }
}

// -이벤트 리스너 호출
addEventListener();

728x90

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

[JavaScript] 27. JavaScript를 사용한 목록 페이지 만들기(1) (0)	2024.08.26
[JavaScript] 26. JavaScript를 사용한 헤더 만들기 (0)	2024.08.26
[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3) (0)	2024.08.23
[JavaScript] 23. JavaScript를 사용한 회원 가입 만들기 (2) (0)	2024.08.21
[JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1) (0)	2024.08.21

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1)

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

티스토리툴바