노마드 코더 - 바닐라 JS로 크롬 앱 만들기(5)

#4 LOGIN

 

 

0. Input Values

모든 것은 HTML에서 시작되어야 한다. HTML에서 작성하고 JS로 기능을 구현한다.

 

 

• 먼저, HTML 코드 작성하기

1. 유저가 이름을 작성할 수 있도록 input 태그를 작성한다.

안에 텍스트를 넣을 것이기 때문에, type="text"해주고, 안에 미리 작성할 말은 placeholder 안에 써준다.

 

2. 옆에 Log In 버튼을 만든다.

 

3. div태그로 위의 것들 묶어주고, id="login-form"을 지정해준다.

 

 

• 자바스크립트로 그 기능 구현하기

1. html element를 가져오기 위해 변수 안에 넣고 가져오기

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

querySelector로 id태그를 쓸때는 #를 써야 하지만 getElementById로 id태그를 쓸 땐 #를 쓰지 않는다.

 

2. 버튼을 클릭하면, onLoginBtnClick함수 실행

loginButton.addEventListener("click, onLoginBtnClick);

 

3. 함수 만들기

function onLoginBtnClick(){
console.log(loginInput.value);  // loginInput의 value를 보여줌.
}

 

 

 

1. Form Submission

JavaScript에서 구현하는 대신 할 수 있다면 HTML의 기본 속성을 최대한 이용하는 게 좋다.

 

사용자가 무언가를 입력해야만 하고, 글자 수가 15를 넘기지 않도록 만들려고 한다면?

→

input 태그의 다양한 속성들을 이용, input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다.

(form안에 input이 있어야 아래 코드가 작동된다.)

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

 

문제!

나는 로그인을 하면 새로고침 하지 않고, user 정보를 저장하고 싶은데 자꾸 새로고침 된다.

form이 submit 되고 있기 때문이다. input 안에 있는 button을 누르면 내가 작성한 form이 submit 된다.

 

 

 

2. Events

form을 submit 하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. (← 이건 우리가 원하는 것이 아니다.)

preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!

 

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.

첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다. event 정보를 담는 object이다.

 

JS는 (기본적으로) argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.

ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 console에 출력해보면 알 수 있다.

 

function onLoginSubmit(event) {
event.preventDefault();  // 브라우저가 기본 동작을 실행하지 못하게 막기(event object는 preventDefault함수를 기본적으로 갖고 있음)
console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);  // submit 이벤트가 발생하면, onLoginSubmit함수를 실행시킨다는 의미

 

 

 

 

3. Events part Two

addEventListener 안에 있는 함수는 직접 실행하지 않는다.

브라우저가 실행시켜주고, 브라우저에서 해당 event에 대한 정보 즉, object를 가지게 된다.

addEventListener의 함수에서 object에 대한 자리만 할당해주면, 해당  event가 발생시킨 정보들에 대한 object들을 볼 수 있다!

이때 해당  event가 가진 기본 Default값을 발생시키지 않기 하게 위해선 preventDefault를 이용하여 막을 수 있다!

 

 

 

4. Getting Username

h1의 텍스트는 숨기고 싶지 않으니, loginForm에 hidden을 더했으니 h1에만 remove를 해준다.

loginForm.classList.remove(HIDDEN_CLASSNAME);

 

hidden을 두 번 사용하고 있으니, const HIDDEN_CLASSNAME = “hidden”을 추가해준다.

const HIDDEN_CLASSNAME = "hidden";​

 

일반적으로 string만 포함된 변수는 대문자로 표기하고, string을 저장하고 싶을 때 사용한다.

 

"Hello " + UserName === `Hello ${UserName}`

"Hello " + username를 ``이라는 백틱 기호를 이용해 `Hello ${username}` 로 표현 가능하다!

 

 

 

5. Saving Username

localStorage 브라우저에 무언가를 저장한 후 나중에 가져올 수 있다.

localStorage.setItem("username", username);

"username" => 저장될 아이템의 이름 (DB box) → key

username => 변수 → value

 

 

localStorge에서 value 저장

lcoalStorage.setItem("username", "nico");

 

 

localStorge에서 value 불러오기

lcoalStorage.getItem("username");

 

localStorge에서 value 지우기

 

lcoalStorage.removeItem("username");

 

 

 

 

6. Loading Username

본인이 생성한 string들은 반복해서 사용하게 될 경우 대문자 변수로 저장해놓는 게 좋다.

만약 스펠링이 틀렸다면 쉽게 찾기가 어렵기 때문인데(어디가 틀렸는지 말해주지 않음),

변수의 스펠링이 틀렸다면 알 수 있다. 이로 인해 실수를 줄일 수 있다.

 

기본 로직

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

if (savedUsername === null) {
// show the form
} else {
// show the greetings
}

 

 

 

7. Super Recap

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 onLoginSumit(event) {
  event.preventDefault();
  //4. event가 원래 하는 행동을 멈춤 (새로고침)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  //5. loginform을 다시 숨김
  const username = loginInput.value;
  //6. loginInput.value를 username이라는 변수로 저장
  localStorage.setItem(USERNAME_KEY, username);
  //7. username값을 username이라는 key와 함께 local storage에 저장
  paintGreeting(username);
  //8. paintGreeting함수 호출
}

function paintGreeting(username) {
/** paintGreeting함수는 하나의 인자를 받고있는데, 
 지금 같은 경우는 유저가 form안에 있는 input에 입력한 username이라는 인자를 받고 있음**/
  greeting.innerText = "Hello " + username; //`Hello ${username}`
  //9. 비어있는 h1요소 안에 innerText를 함
  greeting.classList.remove(HIDDEN_CLASSNAME);
  //10. 그 다음에 h1 요소로부터 hidden이라는 클래스 명을 제거
}

const savedUsername = localStorage.getItem(USERNAME_KEY); 
//1. localStorage에서 username key를 찾으려 함

if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  //2. savedUserName가 null이라면 loginForm의 hidden class를 제거
  loginForm.addEventListener("submit", onLoginSumit);
  /**3. 그 후 loginform에 addEventListener를 더하고, submit을 기다림
  submit event가 발생하면 onLoginSubmit함수가 실행**/
} else {  // 12. 창을 새로고침 하더라도 USERNAME_KEY가 지워지지 않고,이미 가지고 있기 때문에 해당 조건문은 false가 됨
  paintGreeting(savedUsername);
  /** 13. paintGreeting함수로 직행
  이 경우에는 paintGreeting 함수가 local storage에 저장된 값을 인자로 받게 되고,
  이 전에 했던 작업이 반복됨**/
}

사실  paintGreetings 함수는 따로 인자를 받을 필요가 없다. (= 아무것도 보내지 않아도 된다. )

왜냐하면 우리는 localStorage에 유저 정보가 존재하는 걸 알고 있기 때문이다.
=>

localStorage에 뭔가를 저장하면 paintGreetings를 호출하는 순간에, 그 유저 정보는 이미 localStorage에 저장되어 있을 것이다.

 

+) Q

paintGreetings(savedUsername)의 paintGreetings에 인자 값이 username과 달라도 실행이 되는 건지?

→

function paintGreetings 안에서만 일치하면 인자 값은 어떤 이름으로 불러도 상관없이 실행된다.
(강의 기준) function에서 인자 값으로 username라는 이름을 정했기 때문에 function 안에서는 username이라는 이름으로 쓰면 되고, function 밖에서는 paintGreetings(savedUsername)로 부르든 상관없다.
서로 다른 인자 값 이름으로 불러도 공통부분을 이용하기 위해 function이 있기 때문이다.