[Vanilla JS] Momentum 크롬 앱 기능 만들기

[Vanilla JS] Momentum 크롬 앱 기능 만들기 - 1. Greeting

2022. 8. 13. 12:38ㆍ공부/Javascript

#1.0 ❤️ 무료 강의 ❤️ – 노마드 코더 Nomad Coders

All Courses – 노마드 코더 Nomad Coders

초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!

nomadcoders.co

위 강의를 공부한 내용을 토대로 직접 실습해보는 시간을 가지기로 했다.

Momentum 기본 기능 파악

momentum은 기본적으로 크롬에서 돌아가는 todo 앱이다.

로그인 전에는 이렇게 이름을 입력받으며

로그인 후에는 이렇게 시간과 To-Do 앱, 날씨와 명언 등이 출력된다.

Greeting 기능 구현하기

앞서 살펴보았듯, 로그인 전에는 이름을 입력받는 내용만이 출력되고,

로그인 후에 메인 내용들이 출력되는 것을 볼 수 있다.

<index.html>

위와같이 div.greeting에 main과 login form을 집어넣어 이름 입력 시 toggle될 수 있도록 구성했다.

<greeting.js>

hidden 클래스에는 display:none 속성이 들어가있어 렌더링이 되지 않도록 막아준다.

맨 처음 #login과 #main 요소 둘 다 hidden 클래스명을 가지고 있어 렌더링이 되지 않는데

name이 비어있게 된다면 #login 요소의 hidden 클래스명을 제거하여 표시한다.

만약 name이 입력되거나 이미 존재한다면 #login 요소는 hidden 클래스명을 가지게 되고, #main 요소는 제거되어 드러나게 된다.

localStorage 활용하기

우리는 앞서 name이라는 변수를 활용하여 훌륭하게 요소를 toggle하였다.

그러나 문제점은 새로고침하게 되면 name 변수또한 초기화가 되어 다시 로그인을 해야하는 번거로움이 생긴다.

따라서 이를 해결하기위해 브라우저의 localStorage를 활용하기로 했다.

이렇게하면 새로고침을 해도 여전히 로그인이 돼 있는 것을 확인할 수 있다.

완성

HtML

<!DOCTYPE html>
<html lang="ko">
<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="./css//main.css">
  <script defer src="./javascript/greeting.js"></script>
  <title>Momentum practice</title>
</head>
<body>
  <div id="greeting">
    <form id="login">
      <div>Hello, what's your name?</div>
      <input type="text" />
    </form>
    <div id="todo" class="hidden">
      <div id="hello"></div>
    </div>
  </div>

</body>
</html>

JavaScript

const greetingForm = document.querySelector("#login");
const todoEl = document.querySelector("#todo");
const helloEl = todoEl.querySelector("#hello");

const HIDDEN_KEY = "hidden"; // 오타의 위험을 줄여준다.
const USERNAME_KEY = "username";
let username = localStorage.getItem(USERNAME_KEY);

greetingForm.classList.add(HIDDEN_KEY);

function hiddenToggle() {
  helloEl.innerText = `반갑습니다. ${username}`;
  greetingForm.classList.add(HIDDEN_KEY);
  todoEl.classList.remove(HIDDEN_KEY);
}

if (username === null) {
  greetingForm.classList.remove(HIDDEN_KEY);
  greetingForm.addEventListener("submit", (e) => {
    e.preventDefault();
    username = e.target[0].value;
    localStorage.setItem(USERNAME_KEY, username);
    hiddenToggle();
  });
} else {
  hiddenToggle();
}

CSS

body {
  background-color: rgb(196, 196, 196);
}

.hidden {
  display: none;
}

'공부 > Javascript' 카테고리의 다른 글

[Vanilla JS] Momentum 크롬 앱 기능 만들기 - 3. 기타 기능 구현 (0)	2022.08.13
[Vanilla JS] Momentum 크롬 앱 기능 만들기 - 2. ToDo App (0)	2022.08.13
Vanilla JS 주요 특징 정리 3 - 변수 입력받기, form 태그 (0)	2022.08.12
Vanilla JS 주요 특징 정리 2 (0)	2022.08.07
Vanilla JS 주요 특징 정리 1 (0)	2022.08.06

Riam