[JS] Momentum App 1 - Login

Form Submission

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

form 안에 input text가 하나 존재하고 input submit 또는 button이 있다면

button을 클릭했을 때 submit이 되어버린다.

그리고 화면은 리로딩이 되어 버리고 input에 적었던 글자는 사라진다.

​

이걸 막기 위해 preventDefault를 한다.

아래에서 계속...

 

 

 

---

Event

1. PreventDefault

loginForm.addEventListener("submit", onLoginSubmit);

eventListener가 submit 이벤트를 리슨하면 onLoginSubmit 함수를 호출한다.

함수를 호출할 때 JavaScript는 기본적으로 어떠한 정보를 우리에게 넘겨주는데

우리가 파라미터를 적으면 그 첫번째 파라미터에 그 정보를 담아서 넘겨준다.

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

여기서 JavaScript가 넘겨준 정보를 event에 담았다.

event를 콘솔에 찍으면 다음과 같은 정보를 볼 수 있다.

그 정보 가운데 defaultPrevented라는 정보는 브라우저가 기본적으로 작동되는 이벤트를 막는 값이다.

버튼을 클릭했을 때 submit이 되면서 브라우저가 리로딩 되는 기본적인 동작을 막아 보자.

​

다음과 같이 쓰면 된다.

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

event.preventDefault();

 

​

2. Event Object

submit 말고 다른 JavaScript가 우리에게 넘겨주는 event object의 정보를 살펴보자.

​

a 태그로 링크를 작성한 후 다음과 같이 코드를 작성했다.

const aEvent = document.querySelector("a");

function onClickEvent(event) {
    event.preventDefault();
    console.log(event);
}
aEvent.addEventListener("click", onClickEvent);

콘솔에 찍힌 모습은 다음과 같다.

스크린 상에서 유저가 어느 위치를 클릭했는지, 등등 다양한 정보를 얻을 수 있다.

이 정보들로 유저의 동작을 감지하여 여러가지 이벤트를 만들 수 있다.

 

 

 

 

---

Getting Username

form에 userName을 받으면 숨겨져 있던 h1 태그 안에 그 이름을 넣어줄 것이다.

.hidden {
    display: none;
}

먼저 CSS 코드에 hidden이라는 style을 작성했다.

그리고 h1 태그에 greeting이라는 id를 element로 추가했다.

​

동작은 다음과 같이 한다.

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

function onLoginSubmit(event){
    event.preventDefault();
    const userName = loginInput.value;
    loginForm.classList.add("hidden");
    greeting.innerText = "Hello " + userName + " keep going.";
    greeting.classList.remove("hidden");
}
loginForm.addEventListener("submit", onLoginSubmit);

여기에서 이벤트가 동작하면 hidden이라는 class를 form에 추가해주고 h1에서는 제거해준다.

이런 CSS에서 가져온 class 명은 이전 게시물에서도 말했듯이 글자 그대로 적어주기보단 const 변수로 만들어서 변수로 적어주는 것이 좋다.

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();
    const userName = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.innerText = "Hello " + userName + " keep going.";
    greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);

const HIDDEN_CLASSNAME = "hidden";

hidden이라는 sting을 HIDDEN_CLASSNAME이라는 변수명으로 만들어 줬다.

그냥 string으로 이루어진 것은 다른 것들과 다르게 엄청 중요한게 아니기 때문에 변수명을 대문자로 적어주는 것이 관례이다.

​

​

greeting.innerText = "Hello " + userName + " keep going.";

해당 부분을 보면 string과 변수명을 따옴표와 플러스 기호로 섞어서 적어주었다.

​

좀 더 최신 버전으로 다음과 같이 쓸 수 있다.

greeting.innerText = `Hello ${userName} keep going.`;

플러스로 연결할 필요 없이, string과 변수명을 자연스럽게 적을 수 있다.

여기서 중요한 점은 " (쌍따옴표, 더블 쿼트) or ' (따옴표, 싱글 쿼트)를 쓰면 동작이 안된다는 점.

여기서는 ` (백틱 기호)로 감싸줘야 한다.

​

그리고 변수명은 ${변수명} 이렇게 써주면 된다.

​

더 편한 방법으로 쓰면 되겠다.

​

​

​

 

---

Saving Username

1. LocalStorage

개발자 창에서 Application을 클릭하면 다음과 같이 정보를 저장하는 작은 DB 를 볼 수 있다.

다양한 것이 많지만 우리는 사용하기 쉬운 Local Storage를 이용할 것이다.

​

console창에 localStorage를 입력하면 localStorage 안에 있는 propertys를 볼 수 있다.

localStorage.setItem("username", "Hwayeon");

다음과 같이 localStorage에 username을 다음과 같이 입력하면

Application에 있는 localStorage 공간에는 이렇게 저장되어 있다.

​

저장한 data를 가져오려면 getItem을 하면 된다.

localStorage.getItem("username");

저장한 data를 삭제하려면 removeItem을 쓰면 된다.

localStorage.removeItem("username");

 

DB에 사라져 있음을 확인할 수 있다.

 

 

 

 

 

2. Loading Username

LocalStorage에 username이 없다면 input form을 화면에 보여주고,

username이 있다면 h1 태그를 보여주려고 한다.

const savedUsername = localStorage.getItem("username");

if(savedUsername === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${savedUsername} keep going.`;
}

LocalStorage에 username이 없을 때만 submit에대한 eventListener도 넣어준다.

​

오, username이란 string을 위에서도 사용했는데, 이번에도 또 사용한다.

그렇다면 변수에 담아 줘야한다.

이렇게 두번 이상 사용하는 string이 있다면 대문자 변수명으로 선언하자.

const USERNAME_KEY = "username";

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${savedUsername} keep going.`;
}

if문 안에 greeting에 적용하는 부분은 위의 코드, onLoginSubmit 함수 안에서 이미 사용하는 코드이다.

이렇게 중복되는 코드가 있을 시 함수로 묶어주자.

function paintGreetings(username) {
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username} keep going.`;
}

 

 

 

 

 

 

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){
    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} keep going.`;
    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);
}