[노마드코더] 바닐라 JS로 크롬 앱 만들기 - 로그인 폼

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

<!--index.html-->

<!--생략-->
<form class="hidden" id="login-form">
    <input 
      	required 
        maxlength="15" 
        type="text" 
        placeholder="What is your name?" 
     />
     <input type="submit" value="Log In">
</form>
<!--생략-->

//greetings.js

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

//event라는 인자를 넣어 공간을 할당 해주면, 그 공간에 알아서 정보까지 다 채워줌
//결론적으로 form에서 발생한 submit event 관련 정보를 담을 용도로 onLoginSubmit함수에 event라는 매개변수를 추가
function onLoginSubmit(event){
//정보 중 하나인 preventDefault함수
//브라우저가 default값(새로고침)을 실행하지 못하게 막기
    event.preventDefault();
    console.log(loginInput.value);
}

//submit이 발생하면, onLonginSubmit함수를 실행
loginForm.addEventListener("submit", onLoginSubmit);

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있음 => 이러면 안됨

이때, preventDefault() 함수를 추가해서 브라우저의 기본 동작을 막을 수 있음

 

addEventListener 안에 있는 함수는 직접 실행X

브라우저가 실행시켜주고 브라우저에서 해당 이벤트에 대한 정보(=object)를 가지게 됨

<!--index.html-->

<!--생략-->
<form id="login-form">
	<input 
		required 
		maxlength="15" 
		type="text" 
		placeholder="What is your name?" 
	/>
	<input type="submit" value="Log In">
</form>
<h1 class="hidden" id="greeting"></h1>
<!--생략-->

/*style.css*/

.hidden {
    display: none;
}

//greetings.js

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

//string만 포함된 변수는 대문자로 작성(관습)
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event){
    event.preventDefault();
    //class 추가(add)
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem("username", username);
    //"Hello " + username 도 사용 가능
    greeting.innerText = `Hello ${username}`;
    //class 삭제(remove)
    greeting.classList.remove(HIDDEN_CLASSNAME);
}


loginForm.addEventListener("submit", onLoginSubmit);

localStorage.setItem("key","value") : 항목 추가

localStorage.getItem("key") : 추가된 항목 읽기

localStorage.removeItem("key") : 항목 삭제

 

<!--index.html-->

<!--생략-->
<!--class="hidden" 생성-->
<form class="hidden" id="login-form">
	<input 
		required 
		maxlength="15" 
		type="text" 
		placeholder="What is your name?" 
	/>
	<input type="submit" value="Log In">
</form>
<h1 class="hidden" id="greeting"></h1>
<!--생략-->

//greetings.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){
    //1. 브라우저의 기본 동작을 막게 되고, 우리가 원하는 대로 할 수 있게 됨
    event.preventDefault();
    //2. form에 hidden이라는 class를 추가
    loginForm.classList.add(HIDDEN_CLASSNAME);
    //3. loginInput의 값을 username이라는 변수에 저장
    //유저 정보가 input으로부터 오고 있음(41번 라인과 비교)
    const username = loginInput.value;
    //4. localStorage에 username을 영구적으로 저장
    localStorage.setItem(USERNAME_KEY, username);
    //5.paintGreetings함수 호출
    paintGreetings(username);
}

//중복된 코드이므로 paintGreetings라는 함수로 만들어 코드 줄수 줄여줌
function paintGreetings(username) {
	//기본적으로 비어있는 h1인 greeting을 가져다가 "Hello username"을 넣어줌(${}을 활용해 string안에 username값 넣음)
    greeting.innerText = `Hello ${username}`;   
    //h1에 hidden이라는 class를 삭제
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null) {
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    //show the greetings
    //유저 정보가 local storage로부터 오고 있음
    paintGreetings(savedUsername);

 

1. form과 h1모두 숨겨진(hidden)상태에서 시작

2. 앱을 처음 실행 -> key값과 value값 없음

따라서 savedUsername === null 조건은 참

그러므로 form에서 HIDDEN_CLASSNAME 삭제

3. form이 표시되고 addEventListener가 form이 submit되기를 기다림

submit이 발생하면 onLoginSubmit함수 호출(자바스크립트가 호출)

4. 함수를 호출하면서 인자(event에 관한 정보들이 담겨있음 ex: preventDefault() 등등)를 줌

5. add HIDDEN_CLASSNAME으로 다시 form을 숨김

6. input값을 username이라는 변수로 저장

7. 그 변수값을 local storage에 USERNAME_KEY와 함께 저장

8. paintGreetings 함수를 호출하는데 input값을 인자로 넣어줌

-> h1에 "Hello username"이라는 텍스트가 추가됨(innerText), h1으로부터 hidden을 제거해서 h1을 화면에 띄워줌(remove)

9. 이후에 새로고침을 하면 savedUsername값은 null이 아니게됨

 

1. form과 h1모두 숨겨진(hidden)상태에서 시작

2. 앱 실행 -> local storage에서 savedUsername을 얻으려고 시도

(const savedUsername = localStorage.getItem(USERNAME_KEY)

3. 이미 유저정보가 있음(local storage에 username이 저장됨)

따라서 savedUsername === null 조건은 거짓

그러므로 paintGreetings 함수로 직행(paintGreetings 함수가 local storage에 저장된 값을 인자로 받게 되고 이전 작업이 반복 : greeting.innerText = `Hello ${username}`;   
    greeting.classList.remove(HIDDEN_CLASSNAME); )

※ paintGreetings 함수를 호출할 때, 다른 이름의 인자를 넣고 있음 (USERNAME_KEY가 아닌 savedUsername)

paintGreetings 함수는 화면에 텍스트를 출력되게 하는게 전부임