🔐노마드코더 Vanilla JS LOGIN

소연·2021년 7월 3일

JavaScript nomadcoder vanillajs 노마드코더 자바스크립트

vanillaJS

목록 보기

5/8

preventDefault

const link = document.querySelector("a");

function linkEvent(event){
    event.preventDefault();
    console.log(event);  
}

link.addEventListener("click", linkEvent);

preventDefault는 브라우저 자체에서의 기능을 없애주는 역할을 한다
예를 들어 a요소를 생성하면 브라우저 자체에서 설정된 링크로 연결되는 태그이다
자바스크립트에서는 이 링크가 연결이 안되도록 막을 수 있는데 그 기능이 바로 preventDefault이다.

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

스트링으로 된 것은 여러번 사용하게 됐을 때,
오타가 난다면 자바스크립트에서 알려주지 않으므로 변수로 설정하는 것이 좋다.

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    //greeting.innerText = "Hello " + username;                    같은 코드
    //greeting.innerText = `Hello ${username}`;      반복되는 코드   같은 코드
    //greeting.classList.remove(HIDDEN_CLASSNAME);   반복되는 코드
    paintGreeting(username);
}

위에 두 innerText 코드는 같은 역할. `Hello ${username}` ;에서 둘러싼 기호 ` ` 주의
submit이 실행됐을 때 자동으로 새로고침되는 브라우저 자체의 기능을 막기 위해 preventDefault를 사용
loginForm에 .hidden을 추가하여 submit타입의 버튼을 클릭하면 loginForm이 사라지게 함
loginInput의 value를 저장하기 위해 username의 변수를 만듦
localStorage에 "username"(키 값의 이름일 뿐이므로 변경 가능)이라는 USERNAME_KEY 변수가 저장되도록 함
이후에 innerText ` Hello ${username] `; 으로 이너텍스트를 변경.
여기서 username은 위에서 지정한 const username = loginInput.value;값이 저장된 후에 greeting에 .hidden을 제거하여 화면에 나타나도록 함

function paintGreeting(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

위와 아래에 '반복되는 코드'들을 function paintGreeting()으로 묶어주어 여러 번 사용하는 것들을 단순하게 표현할 수 있다

const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    //greeting.innerText = `Hello ${savedUsername}`;   반복되는 코드
    //greeting.classList.remove(HIDDEN_CLASSNAME);     반복되는 코드
    paintGreeting(savedUsername);
}

사이트에서 가장 먼저 해야 할 것은 localStorage에 데이터가 저장이 되어있는지 확인
이를 if문으로 나타내고 만약 savedUsername === null 이라면 loginForn에 .hidden을 지워주기
loginForm에서 submit 이벤트가 발생하면 onLoginSubmit 함수가 실행되도록 함

HTML

<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
    <title>Momentum App</title>
</head>

<body>
    <div id="wrap">
        <div id="formTag">
            <form id="login-form" class="hidden">
                <input required maxlength="15" type="text" placeholder="What is your name?">
                <button type="submit">Log In</button>
            </form>
        </div>
        <h1 id="greeting" class="hidden"></h1>
    </div>
    <script src="script/greeting.js"></script>
</body>

</html>

CSS

@charset "UTF-8";

*{
    box-sizing: border-box;
}
.hidden{
    display: none;
}
div#wrap{
    width: 800px;
    height: 400px;
    border: 1px solid #f00;
    background-color: #000;
    margin: 0 auto;
    position: relative;
}
#formTag{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
button{
    color:#000;
    font-weight: bold;
    width: 80px;
    height: 30px;
    background-color:deeppink;
    border: none;;
}

input{
    width: 200px;
    height: 30px;
    padding: 10px;
}

h1{
    font-size: 60px;
    text-align: center;
    color:greenyellow;
    margin: 140px 20px;
}

JavaScript

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

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

function paintGreeting(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

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