[Vanilla JS] Google Chrome App Momentum 만들기

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

기록하는 개발자

[Vanilla JS] Google Chrome App Momentum 만들기 - 1. Log In 본문

Web/Javascript

[Vanilla JS] Google Chrome App Momentum 만들기 - 1. Log In

밍맹030 2021. 8. 2. 16:59

728x90

1. 첫 화면

- username 을 입력하는 form 을 보여준다.

- 이름을 입력하기 전에는 localStorage가 비어있다.

2. 이름 입력 후 login 버튼 클릭

- 'Hello 이름 :)!' 이 출력된다.

- form 태그는 출력되지 않는다.

- local Storage 에 username이 저장된다.

- 새로고침을 해도 username이 local Storage에 저장되어 인사 멘트가 동일하게 출력된다.

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>
    <!--input의 유효성 검사를 작동시키기 위해서는 form 태그를 사용해야한다.-->
    <form class="hidden" id="login-form"> 
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log in</button>
    </form>
    <h1 class="hidden" id="greeting"></h1>
    <script src="app.js"></script>
</body>
</html>

CSS

body{
    background-color: lightslategrey;
    text-align: center;
}

.hidden{
    display : none;
}

body 태그 내 form, h1태그의 class 이름을 hidden으로 지정하고 css에서 hidden class의 display를 none처리 해준다.

- form 만 보고 싶을 때 js를 통해 form의 classList 중 'hidden'을 제거한다.

- h1 만 보고 싶을 때 js를 통해 h1의 classList 중 'hidden'을 제거한다.

JS 전체 코드

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
//위와 같은 동작, 다른 문법 : loginForm.querySelector("#login-form button");
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.innerText=`Hello ${username} :)!`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername=localStorage.getItem(USERNAME_KEY);

if(savedUsername===null){ //저장된 username이 없는 경우 : show form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}
else{ //저장된 username이 있는 경우 : show greetings
    paintGreetings(savedUsername);
}

<사전 정의>

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
//위와 같은 동작, 다른 문법 : loginForm.querySelector("#login-form button");
const greeting = document.querySelector("#greeting");

// 문자열 정의
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

- css 선택자를 사용해 필요한 변수들을 선언한다(camel 표기법 사용).

- 자주 사용할 문자열 또한 변수로 정의한다. 문자열 저장 변수임을 구분하기 위해 대문자로 표기했다.

< js 주 실행 코드 >

const savedUsername=localStorage.getItem(USERNAME_KEY);

if(savedUsername===null){ //저장된 username이 없는 경우 : show form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}
else{ //저장된 username이 있는 경우 : show greetings
    paintGreetings(savedUsername);
}

1.

savedUsername에 localStroage에서 key인 USERNAME_KEY(="username")에 대응되는 item을 가져온다.

2-1. savedUsername이 null 인 경우

- 아직 사용자가 username을 입력하지 않은 경우이다.

- loginForm의 classList 중 hidden을 제거한다.

→ 클래스 'hidden'의 css인 'display : none'의 적용이 사라진다

→ form이 화면에 보인다.

- addEventListener를 통해 submit을 실행한다.

2-2. savedUsername이 null 이 아닌 경우

- 사용자가 username을 입력하여 localStorage에 저장 되어있는 경우이다.

- paintGreeting 함수를 호출한다.

< 함수 >

함수 호출 시 브라우저가 하는 일

- 브라우저는 함수를 실행시키고 있기는 하지만 브라우저 내에서 event 발생 시

우리에게 중요할 지도 모르는 정보(아래 event)를 가진 채로 onLoginSubmmit 함수 실행 버튼을 누른다.

onLoginSubmit(event)

위의 예시로, form 태그의 submit 버튼을 클릭하면 창이 자동으로 새로고침이 된다.

이러한 동작을 기본 동작이라고 한다.

브라우저의 기본 동작을 막기 위해 함수에 임의로 공간(event)을 주고 이에 대해 preventDefault 함수를 사용한다.

이 때 공간의 이름은 관행적으로 event를 사용한다. (for문에서 변수 이름을 i로 보통 사용하 듯이)

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

주로 사용하는 경우

1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
2. form 태그의 submit 버튼을 눌러도 refresh 새로고침)되지 않게 하고싶을 경우

< onLoginSubmit >

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username=loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    paintGreetings(username);
}

- preventDefault 함수를 통해 브라우저의 기본 동작을 방지한다.

- loginForm의 classList 에 hidden'을 추가한다.

→ form 입력이 끝났으므로 form을 화면에서 안보이도록 하기 위함이다.

- input 태그로 들어온 value값을 변수 username에 저장한다.

- localStorage에 입력받은 username을 저장한다.