[3-2] Getting Username

choimarmot·2024년 1월 17일

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

목록 보기

12/28

바닐라 JS로 크롬 앱 만들기 [3-2] Getting Username

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>valila js</title>
</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>
    <script src="web.js"></script>
</body>
</html>

CSS

.hidden {
    display: none;
}

hidden 클래스를 CSS로 숨길 수 있음

JavaScript

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();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    console.log(username);
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
 }

 loginForm.addEventListener("submit", onLoginSubmit);

로그인을 하면 로그인 입력 창에 class = hidden이 추가되어 사라지고 “Hello + username” 출력

greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;

이 두가지는 같은 결과가 나옴 `(백틱) → ₩ 영문으로 치면 됨

Hello ${username} 에 두가지 규칙 존재
1. 변수와 문자열을 더하고 싶거나 변수를 문자열 안에 넣고 싶다면 ${변수이름} 넣으면 끝
2. `` 백틱 기호 사용

Saving Username(save value)

localStorage

브라우저에 뭔가를 저장할 수 있게 해주고 나중에 가져다 쓸 수 있음
setItem : local storage에 정보 저장

콘솔 입력

⟩ localStorage.setItem(”username”, “marmot”)

크롬 검사 → Application localStorage에 위에서 입력한 값 저장됨

localStorage에 저장한 값 가져오기

⟩ localStorage.getItem(”username”)

‘marmot’

localStorage에 저장한 값 삭제하기

⟩ localStorage.removeItem(”username”)

응용

localStorage.setItem("username", username);

해당 코드를 이용해서 username을 넣게되면 localStorage에 저장
"username" -> key
username -> value

Loading username

local storage에 username 존재하는지 확인

존재하면 form 표시 x, h1 요소 바로 표시

유저 정보 없다면 form 표시

내가 해본 코드

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;
     localStorage.setItem("username", username);
     if (localStorage.length > 0) {
       loginForm.classList.add(HIDDEN_CLASSNAME);
       greeting.innerText = `Hello ${username}`;
       greeting.classList.remove(HIDDEN_CLASSNAME);
     } else {
       alert("please write user name!")
     }
  }
  loginForm.addEventListener("submit", onLoginSubmit);
 ```
 작동

const HIDDEN_CLASSNAME = "hidden"; : 관습, 일반적으로 문자열만 포함된 변수는 대문자 표기하고 문자열 저장할때 사용, 중요한 정보 담은게 아니라 대문자 작성

강의에서 한것

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);
   greeting.innerText = `Hello ${username}`;
   greeting.classList.remove(HIDDEN_CLASSNAME);
 }

 const savedusername = localStorage.getItem(USERNAME_KEY);

 if(savedusername === null) {
   loginForm.classList.remove(HIDDEN_CLASSNAME);
   loginForm.addEventListener("submit", onLoginSubmit);
   //show the form

 } else {
   greeting.innerText = `Hello ${savedusername}`;
   greeting.classList.remove(HIDDEN_CLASSNAME);
   //show the greetings

 }

함수 이용해서 요약

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);
 }  // (2)

 function paintGreetings(username) {
   greeting.innerText = `Hello ${username}`;
   greeting.classList.remove(HIDDEN_CLASSNAME); 
 } /* username을 인자로 받는 함수, 함수를 호출하는 위치에 따라 유저정보는 다른 곳에서 옴
예) local storage(1)에 유저정보가 있으면 거기서 유저정보를 받아서 인자로 넣어줌
   없다면 form이 submit 되면 input으로부터 유저정보를 받음((2) 로부터)
 */

 const savedusername = localStorage.getItem(USERNAME_KEY); // (1)

 if(savedusername === null) {
   loginForm.classList.remove(HIDDEN_CLASSNAME);
   loginForm.addEventListener("submit", onLoginSubmit);
 } else {
   paintGreetings(savedusername);
 }

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

위 두개처럼 변수 선언하는 이유 : 변수명의 오타가 있으면 자바스크립트가 지적해 주기때문에 변수 사용

대문자 사용하는 이유 : 관습, 일반적으로 문자열만 포함된 변수는 대문자 표기하고 문자열 저장할때 사용, 중요한 정보 담은게 아니라 대문자 작성

요약

class = hidden 인 두 요소가 있음

첫번째 단계 : 유저가 처음 앱을 열면 h1과 form은 css에 의해 숨겨져있기 때문에 숨겨져있음

USERNAME_KEY를 가지고 local storage에 값이 있나 확인
(local storage(정보 저장, 불러오고 삭제하는 브라우저가 가진 작은 DB 같은 API) → 없는 정보 불러오려고 하면 null 값 받음)
key, value가 초반엔 없어서 null
→ null은 참이니까 form을 숨기는 class가 사라짐
addEventListner이 submit이 발생하면 onLoginSubmit 함수 호출
호출하면서 인자를 주는데 그 인자에는 event에 관한 정보가 담겨있고 preventDefault 로 자동 이벤트 실행을 멈춤
form을 다시 숨기고 input 값을 username 이라는 변수로 저장(USERNAME_KEY와 함께)
paintGreeting 함수 호출( input 값을 인자로 넣어줌)
input 값을 받아서 Hello ${username}이라는 텍스트 적어줌
<h1>의 hidden 클래스를 제거해서 화면에 보여줌