JS의 if문같은 조건문을 이용하지 않고 HTML에서 input태그의 글자수 제한(최대길이), 빈칸확인 등을 걸수 있는데,
이는 유효성 검사(required)가 필요하다. 이를 하기 위해 input태그는 꼭 form태그 안에 감싸져 있어야 한다!
그래야 HTML만으로도 유효성 검사를 통해 위의 기능들이 실행된다.
form의 자식인 input태그의 속성은 required(필수, 없다면 폼제출이 차단된다.), maxlength, type, placeholder 등이 있다.
하지만 이를 사용하면 버튼 or enter 클릭 시 '무조건' 자동으로 submit(새로고침)이 된다.
문자열을 입력시키는데 있어서 보다 깔끔하고 반복적이지 않게 사용하는 방법은
` ${} ` 를 사용하는 것이다.
const username = loginInput.value;
greeting.innerText = 'Hello ' + username;
greeting.innerText = `Hello ${username}`;
두 innerText는 모두 같은 결과를 보여 주지만 후자가 조금 더 간단하고 깔끔해 보인다.
더 맘에 드는 걸로 사용하면 되구~
메뉴판을 만들때 경험했듯이 같은 변수의 여러 값을 가진 객체가 있을 때 저절로 쇽쇽 넣어 주도록 가능!
이름 입력 후 form이 사라지고 h2가 나타나도록 하였으나
새로고침을 하게 되면 원래대로 돌아간다.
그래서 로컬 스토리지에 이름을 저장하게 만들어 새로고침을 해도 로그인 상태가 유지되도록 만들어 준다.
<로컬 스토리지(localStorage)>
흔히 쓰이는 방식이라 API 존재 => localStorage
.setItem('저장할 값의 이름', '저장할 값'); : 스토리지에 저장
.getItema(저장한 값의 이름'); : 저장된 스토리지값을 보여준다.
.removeItem('저장한 값의 이름'); : 저장된 스토리지값 삭제
그리고 반복되는
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
문장은 함수로 만들어 축약 시켜준다.
1. 필요한 HTML을 작성해 주고 JS에서 타겟팅 해준다.
<!-- subit greeting -->
<form id="login-form">
<input required maxlength="5"
type="text" placeholder="What is your name?">
<input type="submit" value="Log In">
</form>
<h1 id="greeting" class="hidden"></h1>
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
2. type="submit"인 <input>은 submit버튼 or enter 클릭시 저절로 값이 전송 되며 새로고침 된다.
이를 막고 document내 값을 저장하도록 하자
function onLoginSubmit(event) {
event.preventDefault(); }
를 이용하면 기본 event의 실행을 차단 할 수 있다 = 전송해도 새로고침 X
<로컬 스토리지 (localStorage)>
localStorage.setItem('저장한 값의 이름', '저장할 값') : 정보 저장
localStorage.getItem('저장한 값의 이름') : 저장한 값 불러내기
localStorage.removeItem('저장한 값의 이름') : 저장한 값 삭제
3. 스토리지에 저장된 값이 없으면 input태그를 나타나게 하고
값이 있으면 input태그를 삭제하고 h1태그가 나타나게 해주려고 한다.
= h1태그는 처음부터 보이지 않는다.
➡️ class="hidden"을 부여해 CSS에서 display: none;으로 자리를 대체할 수 있게 레이아웃까지 없애준다.
그리고 값이 저장되면 form태그의 내용도 사라져야 하니 form에선 hidden이 추가되고
h1에선 hidden이 사라져야 한다. 단어가 틀린걸 JS에서 알 수 있게 (이지코딩) 정의 하고
함수 작성
const greeting = document.querySelector('#greeting');
const HIDDEN_CLASSNAME = 'hidden';
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
//input 태그에서의 value는 사용자가 입력한 값을 나타낸다.
//그러니 사용자가 입력한 이름을 가지고 오게 된다.
// greeting.innerText = 'Hello ' + username;
localStorage.setItem(USERNAME_KEY, username);
//로컬 스토리지에 저장돼 있는걸 애플리케이션 페이지에서 확인 할 수 있다.
// greeting.innerText = `Hello ${username}`;
// //보다 쉽게 정의 가능 (불필요한 기호 없어도 된다.)
// //값이 바뀌는 데로 반복해 넣고 싶다면 ${}사용
// //*백틱이용해야함* 따옴표 사용시 실행되지 않는다.
// greeting.classList.remove(HIDDEN_CLASSNAME);
paintGreetings(username); }
loginForm.addEventListener('submit', onLoginSubmit);
4. 마지막으로 저장된 값에 따라 다른 반응을 보일 수 있도록 설정
const saveUsername = localStorage.getItem(USERNAME_KEY);
if(saveUsername === null){
//show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
greeting.classList.remove(HIDDEN_CLASSNAME);
} else {
//show the greeting
// greeting.innerText = `Hello ${saveUsername}`;
// greeting.classList.remove(HIDDEN_CLASSNAME);
loginForm.classList.add(HIDDEN_CLASSNAME);
paintGreetings(saveUsername);
}
// => 위와 아래에서 innerText와 .hidden을 삭제하는게 반복되고 있다.
// 이는 함수로 만드는게 좋아
function paintGreetings(username) {
greeting.innerText = `Hello ${username}!`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
//이 함수로 바꿔준다.
5. 완성