노마드코더 JavaScript. Login

맹뿌·2021년 6월 22일

form태그 localstorage preventDefalut 노마드코더 자바스크립트

노마드코더

목록 보기

1/2

h1 태그는 비어있으며, form 태그와 h1 태그는 기본적으로 숨김 처리.
form 태그에 사용자 이름을 입력하고 엔터를 누르면 localStorage.setItem을 통해서 사용자 저장공간에 사용자 이름 저장.
브라우저 새로고침 시, local Storage에 사용자 이름이 저장되어 있으면 form 태그 숨기고 h1 태그 통해서 "Hello 사용자 이름" 출력.
브라우저 새로고침 시, local Storage에 사용자 이름이 저장되어 있지 않으면 form 태그 보이고, h1 태그 숨김.

1. HTML

<!DOCTYPE html>
<html lang="en">
<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.css">
    <title>Momentum App</title>
</head>
<body>
    <form id="login-form" class="hidden">
      
<!-- html에서 input 내에 여러 속성들을 정의함으로써 자바스크립트를 통하지 않아도 어느정도 제어 가능. -->
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"/>
      <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>
</html>

html에서 input을 form 태그 안에 위치시키면 엔터를 누를 때마다 자동적으로 submit이 된다. 이러면 매번 페이지가 새로고침 된다는 문제점이 있다.

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"
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);  // username을 input으로부터 받음
}

function paintGreetings(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 {
    paintGreetings(savedUsername);  // username을 local Storage로부터 받음
}

정보 입력 후, 엔터를 누르면 페이지가 새로고침 되는 브라우저의 기본 동작을 막기 위해 preventDefault() 함수를 사용했다. 위 코드를 실행하면 입력받은 값이 consol.log에 찍힌다.

위 코드에서 사용된 'event'는 'apple', 'salad', 'crazy' 등과 같은 argument명으로 바꿔서 사용해도 무방하다.

✅ 알게 된 것

2번만 반복되더라도 함수를 사용하고, 변수에 할당해서 사용하는 것이 코드의 재사용성을 높이고, 더 짜임새 있는 코드를 만들 수 있음.
문자열을 합치는 방법을 한가지 더 배움.

// 위아래 같은 거
greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;

localStorage에 value 값을 저장할 때는, localStorage.setItem(key 값, value); 사용.
localStorage에 저장된 value 값을 불러올 때는, localStorage.getItem(key 값); 사용.
→ 불러올 때는 key 값으로 불러오면 value 값을 보여줌.
어떤 행동을 했을 때 실행되는 브라우저의 기본 동작을 막기 위해서는 preventDefault() 함수 사용.
전체가 대문자로 된 변수명은 중요하지 않거나, 딱히 의미가 없기 때문.