DAY 8

#4.4 Getting Username

submit 버튼을 클릭했을 때, form 자체를 사라지게 하는 방법이 2개가 있다.

① form 태그 자체를 제거하는 것

② css에서 display:none; 속성을 추가해주는 것

아래는 form에서 입력값을 받아오면 form은 제거하고, 받아온 입력값을 출력하는 코드다.

index.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" />
    <title>Momentum</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form id="login-form">
      <input required maxlength="15" type="text" placeholder="What is your name?" />
      <input type="submit" value="Login"/>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>
</html>

style.css 에는 다음과 같은 클래스를 만들었다.

.hidden{
   display:none;
}
/* 좀 비슷한 속성에는 display:hidden;이 있지만, 이는 그냥 보이지 않게 숨겨주는 것 뿐
해당 요소가 차지하는 공간도 그대로이며 따라서 html에서 완전히 제거된게 아니다. */

app.js 에서 form에 작성한 값을 변수에 담고, loginForm에 이 클래스를 추가해줄 것이다.

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

// 일반적으로 string만 포함되어 있고, 그렇게 중요하지 않은 변수는 대문자로 표기한다. 
// 문자열의 오타는 javascript가 무시하지만, 변수명의 오타는 지적해주기 때문에
// 2번 이상 사용되는 경우 이렇게 변수에 담는 것을 추천한다.
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event){
  // submit 버튼 클릭 시 자동으로 새로고침되어 정보가 날아가는 것을 방지
  event.preventDefault();
  const username = loginInput.value;
  // loginForm을 제거한다.
  loginForm.classList.add(HIDDEN_CLASSNAME);
  // h1 태그에 있던 hidden 태그를 지움으로써 보여지게 한다.
  greeting.classList.remove(HIDDEN_CLASSNAME);
  // h1 태그 안에 hello + username을 출력한다.
  greeting.innerText = `Hello ${username}`;
}

loginForm.addEventListener("submit", onLoginSubmit);

#4.5 Saving Username

무언가를 저장하는 것은 매우 자주 사용되는 기능이다. 유튜브의 볼륨을 조절하고 새로고침했을 때 그 설정이 유지되는 것이 이에 해당한다. 위의 코드에서는 user를 저장해두는 기능을 구현할 것이다.

그 기능을 제공하는 API가 localStorage다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

localStorage에 들어있는 것을 보고싶다면 개발자 도구 - Application - Storage - Local Storage에서 확인하면 된다. Storage에는 Session, indexedDB, WebSQL, 쿠키, Token 등도 확인할 수 있다.

- setItem() : local storage에 정보 저장

- getItem() : local storage에 저장한 값을 불러옴

- removeItem() : local storage에 저장한 값을 삭제

local storage에는 오른쪽 캡쳐와 같이 key, value 형식으로 저장된다.

localStorage.setItem("username", "hayeon");
localStorage.getItem("username");
localStorage.removeItem("username");

#4.6 Loading Username

이제 local storage를 이용해 username에 관한 기능을 구현한다.

1) 먼저 onLoginSubmit 함수에 localStorage에 username을 저장한다.

function onLoginSubmit(event){
// 중략
  localStorage.setItem(USERNAME_KEY, username);
}

2) addEventListener를 하기 전에 확인한다.

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
} else {
}

(1) local storage가 비어 있으면 form을 보여주면서 초기화한다.

그러나 지금의 코드로는 위의 if-else 구문과 관계없이 form 태그가 무조건 보여지므로, index.html에서 form 태그에도 class="hidden"을 추가한다.

// 이 if구문과 관계없이 form이 표시되므로 form에도 hidden 클래스 추가 
if(savedUsername === null){
  // show the form
  // 만약 local storage에 저장된 값이 없다면, form 태그의 hidden 클래스 제거
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  // 
  loginForm.addEventListener("submit", onLoginSubmit);
}

(2) local storage에 유저 정보가 있다면 form을 지우고 h1 태그를 보여줘야 한다.

else {
  // show the greeting
  // 만약 local storage에 저장된 값이 있다면, #greeting의 hidden 클래스 제거
  greeting.classList.remove(HIDDEN_CLASSNAME);
  // username이 아니라 savedUsername인 이유는
  // 이 구문에는 username이 없기 때문에(username은 onLoginSubmit 함수 안에서만 존재함)
  // username 값이 대입된 USERNAME_KEY를 받아온 savedUsername을 대신 사용함.
  greeting.innerText = `Hello ${savedUsername}`; 
}

위처럼 작성한 코드에는 greeting.classList~와 greeting.innerText~ 이 두 줄이 반복되는데, 다음과 같이 새로운 함수를 만들어 이 부분의 중복을 줄인다.

function paintGreetings(username){
  // 여기에서의 username은 단지 인자일 뿐이므로 tomato, aibao 등등 아무거나 해도 상관없다..
  greeting.innerText = `Hello ${username}`; 
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

app.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}`;
  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);
}
console.log(savedUsername);

#6.0 Quotes

코드 챌린지를 할 때 참고해야 한다고 해서 여기다가 정리

index.html, quotes.js : https://github.com/nomadcoders/javascript-for-beginners/commit/0c6d246bd1fc5e3a4a55ef00aa08fd1b9420ce94

clock.js : https://github.com/nomadcoders/javascript-for-beginners/blob/master/js/clock.js

greeting.js : https://github.com/nomadcoders/javascript-for-beginners/blob/a3a25c939aea604f071cebcaab3e3895c91f5dbe/js/greetings.js

style.css는 위와 같음

(정작 이 강의 실습에는 index.html과 quotes.js만 쓰긴 한다.)

index.html

  <body>
    <form class="hidden" id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <div id="quote">
      <span></span>
      <span></span>
    </div>
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
  </body>

id가 quote인 div태그 내의 span태그는 명언과 작가가 각각 담길 것이다.

quotes.js

const quotes = [
	// 명언들
];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

이제 명언은 #quote의 첫번째 span 태그를, 작가에는 마지막 span 태그를 가져왔다.

이 때 명언 array의 모든 오브젝트를 가져오기 위해서는 quotes[0] 부터 [9]까지 가져와야 하는데, 이는 math module에 있는 함수를 사용하면 된다.

그 중 Math.random()은 0부터 1 사이의 랜덤한 숫자를 제공하는데, 0~9까지의 숫자가 필요하므로 quotes.length를 곱해주면 0부터 10미만의 숫자를 제공해줄 것이다.

그리고 뒤의 소수부분을 전부 빼줄 함수 세 개도 존재한다.

Math.floor()은 소수점을 버리기 때문에 [0]~[n-1]까지,

Math.ceil()은 소수점을 올리기 때문에 [1]~[n]까지,

Math.round()는 소수점을 반올림하기 때문에 [0]~[n]까지 나온다.

우리는 0~9까지의 정수를 얻고 싶으므로 floor()을 이용한다. (만약 ceil이나 round를 이용하게되면 Math.random() * quotes.length의 값이 9.***가 나왔을 때 ceil은 무조건 10을, round도 그 수에 따라 10을 출력할 수도 있으며, 값이 0.****가 나오면 마찬가지로 ceil은 무조건 1을, round도 1을 출력할 수도 있기 때문에 floor()을 사용한다.)

그리고 innerText로 todaysQuote의 quote와 author를 각각 담는다.

'javascript > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

DAY 11 (0)	2023.01.05
DAY 10 (0)	2023.01.04
DAY 5 (0)	2022.12.30
DAY 4 (0)	2022.12.30
DAY 3 (0)	2022.12.28

hykim

DAY 8

#4.4 Getting Username

#4.5 Saving Username

#4.6 Loading Username

1) 먼저 onLoginSubmit 함수에 localStorage에 username을 저장한다.

2) addEventListener를 하기 전에 확인한다.

(1) local storage가 비어 있으면 form을 보여주면서 초기화한다.

(2) local storage에 유저 정보가 있다면 form을 지우고 h1 태그를 보여줘야 한다.

#6.0 Quotes

'javascript > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

티스토리툴바

DAY 8

#4.4 Getting Username

#4.5 Saving Username

#4.6 Loading Username

1) 먼저 onLoginSubmit 함수에 localStorage에 username을 저장한다.

2) addEventListener를 하기 전에 확인한다.

(1) local storage가 비어 있으면 form을 보여주면서 초기화한다.

(2) local storage에 유저 정보가 있다면 form을 지우고 h1 태그를 보여줘야 한다.

#6.0 Quotes

'javascript > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

'javascript/바닐라 JS로 크롬 앱 만들기' Related Articles

티스토리툴바