[바닐라 JS로 크롬 앱 만들기] 03 LOGIN

박지원 ·2023년 2월 15일
js
post-thumbnail

1. Input value

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

JS

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

function onLoginBtnClick() {
    console.log("hello", loginInput.value);
}
loginButton.addEventListener("click", onLoginBtnClick)

2. Form submission

user name을 길이 제한을 두고 싶을 때
JS 

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

function onLoginBtnClick() {
    const username = loginInput.value;
    if (username===""){
        alert("Please write your name")
    }else if(username.length > 15) {
        alert("Your name is too long")
    }
}
loginButton.addEventListener("click", onLoginBtnClick)

JS에서 하지 않고 HTML에서 브라우저에 도움을 받아서 길이 제한을 둘 수 있음
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">
        <input 
        required 
        maxlength ="15"
        type="text"
        placeholder="What is your name?" />
        <button>Log In</button>
    </form>
    
    <script src="app.js"></script>
</body>
</html>

JS

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

function onLoginBtnClick() {
    const username = loginInput.value;
    console.log(username);
}
loginButton.addEventListener("click", onLoginBtnClick)

근데 이랬을 때 HTML에서 form이 자동으로 submit이 되는 문제점이 발생

3. Event

함수 중 preventDefault라는 함수가 있는데 이 함수를 호출하면 브라우저의 기본동작을 막아줌.

JS

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


function onLoginSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}
loginForm.addEventListener("submit",onLoginSubmit);

링크를 만들고 링크로 갈 수 있도록 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">
        <input 
        required 
        maxlength ="15"
        type="text"
        placeholder="What is your name?" />
        <button>Log In</button>
    </form>
    <a href="https://nomadcoders.co"> Go to courses</a>
    <script src="app.js"></script>
</body>
</html>

JS 에서는 마우스가 링크를 클릭했을 때 PointerEvent를 알려줄 수 있도록 하고, preventDefault 기능을 사용하여서 링크를 눌렀을 때 링크로 이동하는 "기본 기능"을 제어 

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

const link = document.querySelector("a")
function onLoginSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}
function handleLinkClick(event) {
    event.preventDefault();
    console.log(event)
    alert("clicked")

}

loginForm.addEventListener("submit",onLoginSubmit);
link.addEventListener("click", handleLinkClick)

pointerEvent console

4. Getting username

이 챕터에서는 username input 창을 없애고 싶음
그리고 username 받은 걸 화면에 띄우고 싶음

HTML에서 id를 greeting을 가지고 있는 그리고 class 를 hidden을 줌
이 class는 css에서 작업한 값임. (display를 none으로 한)

<!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">
        <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>

CSS

.hidden {
    display: none;
}

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

loginForm.addEventListener("submit",onLoginSubmit);

여기서(백틱이 중요함)

greeting.innerText =Hello ${username};

이 코드는

greeting.innerText = "Hello " + username

이란 같은 역할을 함.

5. Saving Username

console에서는 localStorage를 이용해서 username을 저장, 삭제 할 수 있음.

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

loginForm.addEventListener("submit",onLoginSubmit);


어플리케이션 local storage에서 볼 수 있음

6. Loading Username

local storage에 username이 있다면 form(username input 창)을 보여주면 안되고, 없다면 보여주어야 함

실수를 줄이고 싶다면 긴 string은 대문자 변수로 저장해놓는게 좋음 

const USERNAME_KEY = "username";

브라우저 내 API에 이름을 저장하는 방법이기에 브라우저를 새로고침해도 로그인 창이 뜨지 않음.
대신 HTML에 form도 일단 hidden 해놔야함 

<!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 class="hidden" id="login-form">
        <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>

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 onLoginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, 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 {
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

JS 코드 

    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);

이게 위에서도 반복이 되니까 아예 함수로 만들어버리기 

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);
}
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);

}
profile
박지원
배움이 즐거운 개발자
이전 포스트

[바닐라 JS로 크롬 앱 만들기] 02 JavaScript on the Browser

다음 포스트

[바닐라 JS로 크롬 앱 만들기] 03 LOGIN 정리

0개의 댓글