Login,Logout

jini.choi·2022년 5월 18일
0

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">
    <title>Momentum</title>
    <link rel="stylesheet" href="style.css" />
</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>
    <form id="logout-form" class="hidden">
        <input type="submit" value="Log out">
    </form>
    <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 logoutForm = document.querySelector("#logout-form")

const HIDDEN_CLASSNAME = "hidden"; 
const USERNAME_KEY = "username"; 
//일반적으로 string만 포함된 변수는 대문자로 표기학 string을 저장하고 싶을 때 사용

function onLoginSubmit(event){
    event.preventDefault(); //브라우저가 기본동작을 실행하지 못하게 막음
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const typeUsername = loginInput.value;
    localStorage.setItem(USERNAME_KEY, typeUsername) //localStorage.setItem(key, value) 
    paintGreeting(typeUsername);
} 


function paintGreeting(username){
    greeting.innerText = `${username}님 환영합니다.`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
    logoutForm.classList.remove(HIDDEN_CLASSNAME);
}

function onLogoutSubmit(){
    localStorage.removeItem(USERNAME_KEY);
    window.location.reload();
}


const savedUserName = localStorage.getItem(USERNAME_KEY);
//savedUserName === null or "username"


if(savedUserName === null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    //show the greeting
    paintGreeting(savedUserName);
    
}

logoutForm.addEventListener("click", onLogoutSubmit);
  • 보통 프로그래밍 언어는 위에서부터 아래로 읽어나가는데, function paintGreeting()function onLoinsubmit() 보다 아래쪽에 위치하고 있는데도, paintGreetingonLoginSubmit안에서 써도 잘 작동되는 이유

  • 함수는 처음엔 브라우저가 무시하고 지나가다가 함수를 호출하는 코드를 만나면 함수가 정의되어있는 코드를 가서 함수를 실행하고 끝나면 함수를 빠져나와서 호출했던 부분으로 돌아와 다시 코드를 읽어내려간다. 때문에 어디에서 함수를 호출하는지가 중요. 함수안에서 함수를 만나도 똑같음


설명

Login만

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";
//일반적으로 string만 포함된 변수는 대문자로 표기학 string을 저장하고 싶을 때 사용

//4. event가 원래 하는 행동을 멈춘다.(새로고침)
//5. loginform을 다시 숨긴다.
//6. loginInput.value를 username이라는 변수로 저장해준다.
//7. username값을 username이라는 key와 함께 local storage에 저장
//8. paintGreeting함수 호출. paintGreeting함수는 하나의 인자를 받고있는데, 지금 같은 경우는 유저가 form안에 있는 input에 입력한 유저명을 받고 있음
function onLoginSubmit(event){
event.preventDefault(); //브라우저가 기본동작을 실행하지 못하게 막음
loginForm.classList.add(HIDDEN_CLASSNAME);
const typeUsername = loginInput.value;
localStorage.setItem(USERNAME_KEY, typeUsername) //localStorage.setItem(key, value)
paintGreeting(typeUsername);
}

//9. paintGreeting 함수는 username이라는 인자를 하나 받고 있고 이 함수가 하는 일은 비어있는 h1요소 안에 innerText를 한다.
//10. 그 다음에 h1 요소로부터 hidden이라는 클래스 명을 제거해준다.

//15. 이 전에 했던 작업이 반복됨
function paintGreeting(username){
greeting.innerText = `${username}님 환영합니다.`;
greeting.classList.remove(HIDDEN_CLASSNAME);
logoutForm.classList.remove(HIDDEN_CLASSNAME);
}

/**
헷갈리만한 점은 paintGreenting함수를 호출할 때, 다른 이름의 인자를 넣고 있다는 것 (typeUsername), (savedUserName)
우리가 paintGreenting로 하는건 화면에 텍스트가 출력되게 하는게 다임 이때 텍스트를 보내줘야겠지
paintGreeting(savedUserName)에서는 유저정보가 local storage로 부터 오고 있고
nLoginSubmit함수에서는 유저 정보가 loginInput.value으로 부터 오고 있음
*/


//0. localStorage에서 username key를 찾으려 함
const savedUserName = localStorage.getItem(USERNAME_KEY);
//savedUserName === null or "username"

//1. savedUserName가 null이라면 loginForm의 hidden class를 제거
//2. 그 다음 일은 loginform에 addEventListener를 더하고, submit을 기다린다.
//3. submit event가 발생하면 onLoginSubmit함수가 실행
if(savedUserName === null){
//show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
//show the greeting
paintGreeting(savedUserName);

}
//12. 창을 새로고침 하더라도 USERNAME_KEY가 지워지지않음 이미 가지고 있기 때문에 해당 조건문은 false가 됨
//13. paintGreeting함수로 직행함. 역시 string인자로 받을 것임
//14. 이 경우에는 paintGreeting 함수가 local storage에 저장된 값을 인자로 받게 되고

Login, Logout

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

const HIDDEN_CLASSNAME = "hidden"; 
const USERNAME_KEY = "username"; 
//일반적으로 string만 포함된 변수는 대문자로 표기학 string을 저장하고 싶을 때 사용

//4.event가 원래 하는 행동을 멈춘다.(새로고침)
//5. loginform을 다시 숨긴다.
//6. loginInput.value를 username이라는 변수로 저장해준다.
//7. username값을 username이라는 key와 함께 local storage에 저장
//8. paintGreeting함수 호츌. paintGreeting함수는 하나의 인자를 받고있는데, 지금 같은 경우는 유저가 form안에 있는 input에 입력한 유저명을 받고 있음
function onLoginSubmit(event){
    event.preventDefault(); //브라우저가 기본동작을 실행하지 못하게 막음
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const typeUsername = loginInput.value;
    localStorage.setItem(USERNAME_KEY, typeUsername) //localStorage.setItem(key, value) 
    paintGreeting(typeUsername);
} 

//9. 이 함수는 username이라는 인자를 하나 받고 있고 이 함수가 하는 일은 비어있는 h1요소 안에 innerText를 한다.
//10. 그 다음에 h1 요소, logoutForm으로부터 hidden이라는 클래스 명을 제거해준다.
//17. 이 전에 했던 작업이 반복됨
/** 
헷갈리만한 점은 paintGreenting함수를 호출할 때, 다른 이름의 인자를 넣고 있다는 것 (typeUsername), (savedUserName)
우리가 paintGreenting로 하는건 화면에 텍스트가 출력되게 하는게 다임 이때 텍스트를 보내줘야겠지
paintGreeting(savedUserName)에서는 유저정보가 local storage로 부터 오고 있고
onLoginSubmit함수에서는 유저 정보가 loginInput.value으로 부터 오고 있음
*/
function paintGreeting(username){
    greeting.innerText = `${username}님 환영합니다.`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
    logoutForm.classList.remove(HIDDEN_CLASSNAME);
}

//12. localStorage에서 USERNAME_KEY를 지움.
//13. username key가 다시 null되니까 window를 새로고침하면서 Login창이 다시 나타남
function onLogoutSubmit(){
    localStorage.removeItem(USERNAME_KEY);
    window.location.reload();
}

//0. localStorage에서 username key를 찾으려 함
const savedUserName = localStorage.getItem(USERNAME_KEY);
//savedUserName === null or "username"

//1. savedUserName가 null이라면 loginForm의 hidden class를 제거
//2. 그 다음 일은 loginform에 addEventListener를 더하고, submit을 기다린다.
//3. submit event가 발생하면 onLoginSubmit함수가 실행
if(savedUserName === null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    //show the greeting
    paintGreeting(savedUserName);
    
}
//14. logout을 안한다고 했을 시 창을 새로고침 하더라도 USERNAME_KEY가 지워지지않음 이미 가지고 있기 때문에 해당 조건문은 false가 됨
//15. paintGreeting함수로 직행함. 역시 string인자로 받을 것임
//16. 이 경우에는 paintGreetinggkatnrk local storage에 저장된 갑을 인자로 받게 되고 

//11. logoutForm의 click이벤트가 발생하면 onLogoutSubmit함수 호출
logoutForm.addEventListener("click", onLogoutSubmit);

이 글은 패스트캠퍼스 노마드코더 '바닐라 JS로 크롬 앱 만들기'을 수강하며 정리한 노트입니다.
https://nomadcoders.co/javascript-for-beginners/lobby

profile
개발짜🏃‍♀️

0개의 댓글