JavaScript를 활용한 간단한 로그인 기능 구현하기

공부/WEB

by micalcomanie 2025. 3. 3. 13:41

728x90

SMALL

사용자의 이름을 입력받아 환영 메시지를 표시하는 간단한 로그인 기능을 만들어봅니다.

로그인 후 입력 폼이 사라지고, 이름이 포함된 메시지가 나타납니다.

1. HTML 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <input type="submit" value="Log In" />
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>
</html>

2. CSS 스타일

.hidden {
    display: none;
}

3. JavaScript 기능 구현

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    greeting.innerHTML = `Hello ${username}, keep going!`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

4. 추가 기능: localStorage 활용

const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

function paintGreetings(username) {
    greeting.innerText = `Hello ${username}, keep going!`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername) {
    paintGreetings(savedUsername);
} else {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
}

이제 간단한 로그인 기능이 완성되었습니다! 🎉

localStorage를 활용하면 새로고침 후에도 사용자 이름을 유지할 수 있습니다.
로그인 폼을 숨기고, 환영 메시지를 표시하는 방식으로 간단하게 동작합니다.

728x90

LIST

'공부 > WEB' 카테고리의 다른 글

JavaScript에서 CSS 클래스를 다루는 방법: classList.toggle() 활용하기 (1)	2025.02.17
JavaScript로 CSS 스타일 변경하기 (1)	2025.02.17
자바스크립트 이벤트 리스너 심화: window 객체 활용하기 (1)	2025.02.16
자바스크립트 이벤트 리스너(Event Listener) 기초 배우기 (1)	2025.02.16
자바스크립트로 HTML 제목(title) 변경하기 (2)	2025.02.10