2021. 11. 06. (토) TIL - 바닐라 JS로 크롬 앱 만들기 - loaclStorage, innerText, classList
2021. 11. 7. 01:10ㆍNomadCoders/바닐라JS 챌린지
728x90
반응형
# 학습 전 나의 상태
오늘은 개발클럽이 첫 ot 시간을 가졌다. 그런데 모두 바닐라 JS를 중요하게 생각한 것을 알 수 있었다.
그런면에서 내가 시작하고 있던 것이 다행으로 여겨진다.
자바스크립트를 잘 배우고 싶다.
# 오늘의 학습 내용
<!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" class="hidden">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="로그인" />
</form>
<h1 id="greeting" class="hidden"></h1>
<!-- <a href="https://nomadcoders.co">Go to courses</a> -->
<script src="./app.js"></script>
<!-- 예제 연습용 js -->
<!-- <script src="./exam.js"></script> -->
</body>
</html>CSS
.hidden {
display: none;
}const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting')
// 이렇게 반복되는 String 을 대문자 변수로 저정해 놓으면 실수가 줄고
// string 이라는 사실을 기억하고 상기시키기 좋다.
const HIDDEN_CLASSNAME = 'hidden';
const USERNAME_KEY = 'username';
// submit 버튼을 눌렀을 때
function handleLoginSubmit(e) {
// 새로고침 동작을 막아준다.
e.preventDefault();
// loginForm에 className hidden을 줘서 숨겨준다.
loginForm.classList.add(HIDDEN_CLASSNAME);
// username 이라는 변수에 loginInput.value를 담아준다.
const username = loginInput.value;
// 로컬스토리지(브라우저)에 키, 값을 저장한다
localStorage.setItem(USERNAME_KEY, username); // key, value
// 함수 호출, username을 인자로 ..
paintGreetings(username);
}
function paintGreetings(username) {
// #greeting에 `Hello ${username}`의 내용을 넣어준다.
greeting.innerText = `Hello ${username}`; // 백틱(``)으로 하면 편해요!
// #greeting에 className hidden 을 제거한다.
greeting.classList.remove(HIDDEN_CLASSNAME);
}
// savedUsername 변수에 username 저장된 정보를 가져온다.
const savedUsername = localStorage.getItem(USERNAME_KEY);
// savedUsername 이 null 이면 form이 보이고
if (savedUsername === null) {
// show the form
// loginform에 hidden 을 제거한다.
loginForm.classList.remove(HIDDEN_CLASSNAME);
// loginform에 이번트리스너로 submit
loginForm.addEventListener('submit', handleLoginSubmit);
} else { // null이 아니면 paintGreetings 함수가 실행된다.
// show the greeting
paintGreetings(savedUsername);
}
# 학습을 마치며
오늘은 로컬스토리지를 사용하는 것과 클래스리스트를 통해서 클래스를 넣어주고 또는 제거할 수 있는 것을 보고 이렇게 사용할 수 있구나를 배웠고, 로컬스토리지를 사용하는 방법에 대해 많이 이해하게 되었다. 이 전에 프로젝트를 진행할 때 토큰을 어디에 둘것이냐 하면서 로컬스토리지를 이야기 했던 적이 있는데 그땐 잘 모르고 막 하려고 했지만 차근차근 배우니 방법에 대해 이해가 잘 된것 같다.
728x90
반응형
'NomadCoders > 바닐라JS 챌린지' 카테고리의 다른 글
| 2021. 11. 10. (수) TIL - 바닐라 JS로 크롬 앱 만들기 - weather / Finish (0) | 2021.11.10 |
|---|---|
| 2021. 11. 09. (화) TIL - 바닐라 JS로 크롬 앱 만들기 - ToDoList (0) | 2021.11.09 |
| 2021. 11. 08. (월) TIL - 바닐라 JS로 크롬 앱 만들기 - Clock & Quotes (0) | 2021.11.08 |
| 2021. 11. 05. (금) TIL - 바닐라 JS로 크롬 앱 만들기 e.preventDefault() (0) | 2021.11.06 |
| 2021. 11. 04. (목) TIL - form태그, input태그 (0) | 2021.11.05 |