바닐라 JS 챌린지 day7 Login

4.Login

4.0 Input Values

• 모든 것은 HTML에서 시작되어야함
• HTML에서 작성 후 JS에서 기능 구현

1) HTML form 마크업

• 사용자가 이름을 작성할 수 있도록 <input>태그 작성
  안에 텍스트를 넣기위해 type="text"
  미리 작성할 말은 placeholder="텍스트를 입력하세요"
• 그리고 버튼만들기 <button>Log In</button>
• 위에 것들을 <div>로 묶어주고, id="login-form"으로 작성
  묶어준 후에 아래 input과 button 요소를 js에서 손쉽게 찾기 위함이다

2) JS 기능 구현

• input과 button 요소를 담을 변수 선언

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
// document안의 id가 login-form인 요소인 곳에서 input과 button을 찾음
.
.
//login-form에서 input과 button을 가져오는 또다른 방법!!
const loginForm = document.getElementById("login-form"); //=== const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

• 버튼 클릭 시 원하는 기능을 실행하도록 addEventListener 실행

loginButton.addEventListener("click",handleBtnClick);

• addEventListener 실행될 때 실행될 함수 만들기

function handleBtnClick(){
    //input객체보기 console.dir(loginInput);
  //input에 작성된 글을 보기위해 value라는 property 가져오기
    console.log(loginInput.value);
    console.log("click!!!");
}

4.1 Form Submission

• 우선 JS에서 구현하는 대신 HTML의 기본 속성을 최대한 이용하는 것이 좋다

1) JS 조건문으로 로그인 유효성 검사 구현 예제

• loginInput.value를 username변수에 담아 조건문 활용
• 변수 길이 확인하기 : .length

function handleBtnClick(){
    const username = loginInput.value;
    if(username ===""){
        alert("please write your name");
    } else if (username.length > 15 ){
        alert("your name is too long");
    }
}

2) <form>태그를 활용하여 유효성검사 구현 (권장)

   <form id="login-form">
    <input required maxlength="15" type="text" placeholder="what is your name?" />
    <input type="submit" value="Login" />
    </form>

• required 속성 : 서버로 제출되기 전 반드시 입력해야하는 필드로 명시하기

• 위 속성이 제대로 동작하기 위해서 type의 속성값으로 다음과 같다
  checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url
• required 속성은 불리언(boolean)이다.
  • boolean은 해당 속성을 명시하지 않으면 자동으로 false값을 가지게 되며, 명시하면 자동으로 true값을 가짐

• maxlength="15" :최대 입력 길이 15로 설정
• 이렇게만 했을 때 필드값을 입력하지 않으면 브라우저에서 입력하라고 요청이 들어오며, 15자 이상은 못쓰게 됨

submit할때마다 새로고침 후 값이 사라지는 문제

• input의 유효성검사를 하기위해서는 html에서 form태그로 묶어줘야 가능
• 그리고 더 이상 html요소에 input태그의 속성으로 submit을 넣었기때문에 더이상 button의 클릭여부가 필요없음
• 하지만 form이 submit할때마다 새로고침이 되어 값이 사라짐
• 그러한 문제를 form이 submit되는걸 막아주자!!->브라우저가 새로고침 하지 않고 user정보를 저장하도록 하고싶은것

4.2 Event

• 새로고침은 form의 submit의 기본 동작임 기본동작이란 브라우저가 자동으로 실행하도록 프로그래밍 된 것
• loginForm.addEventListener("submit", onLoginSubmit);에서 onLoginSubmit()이렇게 추가하지 않음
• 왜냐? ()은 함수를 "즉시" 실행한다는 뜻임 하지만 바로 실행하는걸 원하지 않음 왜냐? 이벤트가 일어나면 실행하길 원하기 때문
• 그리고 직접 () 실행하게 된다면 한번만실행하고 끝나게됨 그럼 이벤트가 발생할 때마다 실행이 어려워지기 때문에 JS에게 실행을 맡기는것임!!!!
• 그리고 이벤트가 일어난 뒤 실행될 함수에게 JS는 방금 일어난 event에 대한 정보를 지닌 객체를 argument를 통해 전달해줌

방금 일어난 event 객체 확인하는 방법 예제

// 인자의 이름은 아무거나!!
funtion onLoginSubmit(tomato) {
  console.log(tomato);// 결과 : SubmitEvent{..방금 실행된 event 정보들...}

• 그리고 event 객체 안에 있는 preventDefult()를 호출하면 브라우저의 기본동작을 막아줄 수 있음

4.4 Getting username

username을 입력한 후에는 form이 사라지게 하기

1) CSS 이용하기

• css 코드 추가 .hidden{ display:none;}
• js에서 classList를 사용하여 class 추가하기

function onLoginSubmit (e){
  e.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log(username);

• 위와 같이 했을 시 submit했을 때 새로고침은 막고 form은 사라지지만 username은 콘솔에 찍힘

2)form이 사라지면 HTML에 새로 추가한 요소가 보여지게 하기

• 비어있는 h1태그를 사용하며 class는 기본값으로 class="hidden" 작성
• h1에 id="greeting" 추가하여 JS에서 가져오기 const greeting = document.querySelector("#greeting");
• 유저의 이름을 변수로 저장한 username을 h1 안에 넣어서 유저의 이름을 보여줄 것
  greeting.innerText="Hello" + username
• h1에 기본적으로 있는 class="hidden" 지우기 위해
  greeting.classList.remove("hidden") 추가
• 여기까지는 유저한테 인사하기 성공~!!

4.5 Saving username

• 문제는 유저를 기억할 수 없어서 새로고침할때마다 새로 로그인을 해야함
• 새로고침을 해도 form을 볼 필요없이 이름이 저장되어있게 만들기`

localStorage : 브라우저에 저장하게 해주며 나중에 가져다 쓸 수 있게 해줌

• 개발자도구 > 어플리케이션 >Local Storage > file:// 누르면 볼 수 있음
• localStorage의 유용한 method
  • setItem : local storage에 정보를 저장할 수 있음
    localStorage.setItem("hidden", username); 이렇게하면 key : hidden , value: username되는거임
  • getItem : 저장한 값을 불러올 수 있음
    localStorage.getItem("hidden") 결과: "username"
  • removeItem :저장된 값 삭제하기
    localStorage.removeItem("hidden") 결과 : undefinded , 로컬스토리지엔 삭제되었음
• 유저의 이름(key)를 정해주고 입력받은 값(value)를 지정하기
  localStorage.setItem(USERNAME_KEY, username);
• 여기까지하면 로컬스토리지에서 유저명은 기억하지만 새로고침하면 여전히 form이 나옴!!

4.6 Loading Username

• 그래서 로컬스토리지에 (username이 존재하면) { form이 나타나지않게 하고},
  (username이 존재하지 않는다면) {form이 나타나게 만들어주기}

1) 유저네임이 저장되어 있는지 확인하기
localStorage.getItem("USERNAME_KEY");

• console에서 결과값으로 만약 있다면 vlaue를 보여주고 없다면 null을 보여줌

2) 로컬스토리지에 저장된 키의 값을 저장할 변수 만들기
const savedUsername = localStorage.getItem(USERNAME_KEY);

3) savedUsername의 유무 코드 작성

if(savedUsername === null ){
  //show the form
} else {
  //show the greetings(h1)
}

6) html 파일에서 <form>태그에도 class="hidden"을 기본값으로 추가해주기

5) 완성 코드

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";

//1-3.이벤트 발생시 실행함수
function onLoginSubmit(e){
    //브라우저의 기본동작을 막기:새로고침 등
  //1-4. 새로고침 막기
    e.preventDefault();
  //1-5. form에 hidden 추가
  loginForm.classList.add(HIDDEN_CLASSNAME);
  //1-6. 받은 유저네임을 로컬스토리지에 키와 값으로 저장하기
    const username = loginInput.value; 
    localStorage.setItem(USERNAME_KEY, username);
    // === greeting.innerText ="Hello " + username;
  //1-7. 유저네임을 보여줄 함수 실행
  paintGreetings(username);
    
    console.log(username);

}

//submit은 엔터나 버튼을 누를 때 발생

function paintGreetings (username){
   //1-8 hidden 클래스 제거하여 요소 보여주기
  greeting.classList.remove(HIDDEN_CLASSNAME);
   greeting.innerText= `Hello ${username}`;
}

//1. 로컬스토리지의 유저네임 유무 확인

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
  //1-1. class에서 hidden 제거되며 form이 보여짐
loginForm.classList.remove(HIDDEN_CLASSNAME);
  // 1-2. form에 이벤트가 발생하면 onLoginSubmit 함수 실행
loginForm.addEventListener("submit", onLoginSubmit);
}else {
    // greeting.innerText= `Hello ${username}`;
    //greeting.classList.remove(HIDDEN_CLASSNAME);
    paintGreetings (savedUsername);

}