//html
간단한....
form과 h1에 hidden 클래스 넣어주기
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
.hidden {display: none;}
</style>
</head>
<body>
<form class="hidden" id="login_form">
<input type="text" maxlength="8" required placeholder="이름을 입력해주세요.">
<input type="submit" value="login">
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app_2.js"></script>
</body>
</html>//javascript
const loginForm = document.getElementById('login_form');
const loginInput = loginForm.querySelector('input');
const greeting = document.querySelector('#greeting')
// 이렇게도 가능!
// const loginInput = document.querySelector('#login_form input');
// const loginButton = document.querySelector('#login_form button');
const HIDDEN_CLASSNAME = 'hidden'; //반복되는 string은 대문자로 저장해 놓는 것이 좋음
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
event.preventDefault(); //브라우저 기본동작 막기
loginForm.classList.add(HIDDEN_CLASSNAME); //loginFOrm에 hidden_calssname 클래스 추가하기
const username = loginInput.value; //변수 username = loginINput.value 값 저장
localStorage.setItem(USERNAME_KEY, username); //localStorage에 저장 ("저장될 아이템의 이름", 값)
paintGreetings(username);//코드 줄임
}
function paintGreetings(username) { //반복되는 코드로 인해 함수를 새로 만듦
greeting.classList.remove(HIDDEN_CLASSNAME);
// greeting.innerText = 'hello ' + username; 따옴표로 표기할 떄
greeting.innerText = `hello ${username}님 반가워요`;//greeting에 텍스트 추가, 백틱으로 표기할 때
}
const saveUsername = localStorage.getItem(USERNAME_KEY);
if(saveUsername ===null) {
//폼 보여주기
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener('submit', onLoginSubmit);
} else {
//greeting 보여주기
paintGreetings(saveUsername);//코드 줄임
}ㄴ> 니꼬샘 강의대로 쓴 것
const loginForm = document.getElementById('login_form');
const loginInput = loginForm.querySelector('input');
const greeting = document.querySelector('#greeting')
//반복되는 string은 대문자로 저장해 놓는 것이 좋음
const HIDDEN_CLASSNAME = 'hidden';
const USERNAME_KEY = "username_key"; //로컬 스토리지 키 이름
// h1 유저네임 표기
function paintGreetings(tomato) { //반복되는 코드로 인해 함수를 새로 만듦, tomato는 단순 매개변수
greeting.classList.remove(HIDDEN_CLASSNAME);
// greeting.innerText = 'hello ' + tomato; 따옴표로 표기할 떄
greeting.innerText = `hello ${tomato}님 반가워요`;//greeting에 텍스트 추가, 백틱으로 표기할 때
}
const saveUsername = localStorage.getItem(USERNAME_KEY);
if(saveUsername === null) {//로컬스토리지에 값이 null일 때
//로그인폼 보여주기
loginForm.classList.remove(HIDDEN_CLASSNAME);
//loginForm submit 이벤트 추가
loginForm.addEventListener('submit', (event) => {
event.preventDefault(); //브라우저 기본동작 막기
loginForm.classList.add(HIDDEN_CLASSNAME); //loginFOrm에 hidden_calssname 클래스 추가하기
const username = loginInput.value; //변수 username = input 입력값 저장, 이벤트가 발생해야 하기 때문에 이벤트 내부에서 실행
localStorage.setItem(USERNAME_KEY, username); //localStorage에 저장 ("저장될 아이템의 이름", 값)
paintGreetings(username);//코드 줄임
})
} else {//로컬스토리지에 값이 있을 때
//h1 유저네임 보여주기
paintGreetings(saveUsername);//코드 줄임
}ㄴ> 내가 줄여본 것
줄일 수 있을 것 같아서 줄여봄. 일단 오류없이 잘 돌아가긴 함..
제일 헷갈렸던 부분
function paintGreetings(username) { //반복되는 코드로 인해 함수를 새로 만듦
greeting.classList.remove(HIDDEN_CLASSNAME);
// greeting.innerText = 'hello ' + username; 따옴표로 표기할 떄
greeting.innerText = `hello ${username}님 반가워요`;//greeting에 텍스트 추가, 백틱으로 표기할 때
}분명 username은 loginForm안에 변수로 선언되어 있는데 여기에서도 username을 사용할 수 있는건지 이해가 안가고.. ㅎㅋ username때문에 오지게 헷갈렸음.
--결론
paintGreetings(username)에서 username은 변수로 선언된 input.value 가 아니고 그냥 매개변수, 그래서 다른 단어로 바꿔도 잘 표기됨
'강의 > 노마드 코더 강의' 카테고리의 다른 글
| 노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - 랜덤 배경, 랜덤 명언 (0) | 2023.05.26 |
|---|---|
| 노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - 시계 만들기 (0) | 2023.05.26 |
| 노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - addEventListener (0) | 2023.05.26 |
| 노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - addEventListener (0) | 2023.05.26 |
| 노마드 코더 - 바닐라 JS로 크롬 앱 만들기 - or, and 연산자 (0) | 2023.05.26 |