클론코딩/노마드코더 크롬 앱

[클론코딩/크롬 앱] 노마드 코더 크롬 앱 클론코딩 #1 Login

기록하는_사람 2022. 10. 17. 19:55

Login - 사용자 이름 입력 받기

📌 HTML에서 input에 reuired, maxlength 등을 사용하려면, form 안에 input이 들어있어야 함.

 

📌 form 안에서 엔터를 눌렀을 때, input이 더 존재하지 않으면 자동으로 submit이 됨.

      form 안의 버튼을 눌러도 submit 됨. 

 

📌 submit되면 브라우저가 새로 고침됨.

 

Login - submit해도 새로고침 안하도록

📌 모든 EventListener function의 첫 번째 argument는 일어날 일들에 대한 정보를 가짐.

 

📌 .preventDefault( )

: 어떤 event에 대해 브라우저가 기본적으로 수행하는 동작을 하지 않도록 하는 것..

  예를 들면, submit을 하면 기본적으로 브라우저를 새로고침하는 것. 

 

📄 index.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</title>
</head>
<body>
    <form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?"/>
        <button>Log In</button>
    </form>
    
    <script src="app.js"></script>
</body>
</html>

📄 app.js

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

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

loginForm.addEventListener("submit", onLoginSubmit);
SubmitEvent {isTrusted: true, submitter: button, type: 'submit', target: form#login-form, currentTarget: form#login-form, …}

 

Login - submit하면 form 전체가 사라지고, 텍스트 뜨도록

📌 string 합치는 방법

① "문자열" + 변수

② `문자열 ${변수명}`

 

📄 index.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</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>

📄 style.css

.hidden {
    display: none;
}

📄 app.js

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.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

Login - 새로 고침해도 계속 이름 저장되도록(localStorage)

📌 localStorage

: 브라우저에 데이터를 저장하고 가져다 사용할 수 있게 하는 API.

 

📌 localStorage.setItem("저장할 데이터 이름", "저장할 데이터");

: 데이터 저장. 

 

📌 localStorage.getItem("가져올 데이터 이름");

: 데이터 가져오기.

 

📌 localStorage.removeItem("삭제할 데이터 이름");

: 데이터 삭제.

 

Login - 유저 정보가 있을 경우, 정보 띄우도록

📄 index.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</title>
</head>
<body>
    <form id="login-form" class="hidden">
        <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>

📄 style.css

.hidden {
    display: none;
}

📄 app.js

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 paintGreeting(username) {
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

function onLoginSubmit(event) {
    event.preventDefault();
    
    loginForm.classList.add(HIDDEN_CLASSNAME);

    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreeting(username);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null) {  // username이 없는 경우, 
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
}
else {  // username이 있는 경우,
    paintGreeting(savedUsername);
}
저작자표시 (새창열림)