# Login 기능

1. Input value 가져오기

HTML

  <form id="login_form">
      <input
        type="text"
        placeholder="What is your name?"
      />
      <button>Log in</button>
    </form>

JS

// id가 login_form인 요소 내부의 input 요소 가져옴
const loginInput = document.querySelector('#login_form input') 
// id가 login_form인 요소 내부의 button 요소 가져옴
const loginButton = document.querySelector('#login_form button') 

function onLoginBtnClick() {
console.log(loginInput.value)
}  

// 버튼 클릭하면 함수 실행
loginButton.addEventListener('click', onLoginBtnClick)

⭐️ input안에 입력되는 값을 value 라고 한다.

👉🏻 input에 입력된 값을 가져오기 위해 value라는 property를 가져와야 함.
👉🏻 loginInput.value

2. username 유효성 검사

조건

1. 비어있으면 안됨
2. 10자 이내
   
   

방식 1) JS로 하나하나 만들기

function onLoginBtnClick() {
const username = loginInput.value // 입력값 저장
  if (username === '') {
    alert('Please write your name.')
  } else if (username.length > 10) {
    alert('Your name is too long')
  }
} 

방식 2) HTML 도움 받기

👉🏻 브라우저에 있는 기능 활용하기: required

HTML

 <form id="login_form">
      <input 
        required
        maxlength="10" 
        type="text"
        placeholder="What is your name?"
      />
      <button>Log in</button>
 </form>

👉🏻 required maxlength = "10" 로 길이 제한 가능.
⚠️ html에서 input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 작성되어야 함.

JS

function onLoginBtnClick() {
  const username = loginInput.value
  console.log(username)
}  

👉🏻 자바스크립트 코드가 단축되고, 아래와 같이 브라우저에 내장되어 있는 효과도 나타남.

3. 브라우저의 기본 동작 제어하기

• 이름을 입력하고 버튼이나 엔터를 누르면 페이지가 자동으로 새로고침 되는 것을 볼 수 있음.
  👉🏻 form이 submit 되고 있기 때문.

💡 브라우저의 자동 새로고침 현상 막기

preventDefault

: 브라우저의 기본 동작을 막아줌.
기본 동작 : 어떤 함수에 대해 브라우저가 기본적으로 수행하는 동작.
ex) 누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침하도록 되어 있음.

const loginForm = document.querySelector('#login_form')
const loginInput = document.querySelector('#login_form input')

function onLoginSubmit(event) {
  event.preventDefault() // 브라우저의 기본 동작을 막아줌.
  console.log(loginInput) // 새로고침 안되고 값 나타남.
}

loginForm.addEventListener('submit', onLoginSubmit)

다른 예시

💡 링크의 기본 동작 막기

• 링크의 기본 동작 : 다른 페이지로 이동하기
  기본 동작을 막으면 링크를 눌러도 다른 페이지로 이동하지 않게 됨.

😮 console.dir로 이벤트 정보를 읽어보면 스크린 상에서 클릭한 위치(x,y)도 알 수 있음.

4. Username 가져오기

💡 form을 제출한 후에 정보는 남아있고 form만 사라지게 하는 방법

방법 1. html 없애기
방법 2. css를 이용해서 숨기기
CSS

.hidden {display : none;}

JS

const loginForm = document.querySelector('#login_form')
const loginInput = document.querySelector('#login_form input')

function onLoginSubmit(event) {
  event.preventDefault() // 브라우저의 기본 동작을 막아줌.
  loginForm.classList.add("hidden"); // 제출 후에 hidden class를 더해서 form을 숨겨줌.
  const username = loginInput.value;
  console.log(username) // 제출 후 form은 사라지고 입력값은 남아있음.
}

loginForm.addEventListener('submit', onLoginSubmit)

💡 form 제출후 유저 이름을 h1으로 화면에 출력하기

h1 : 기본적으로 hidden 상태, 폼 제출 후 입력값 받기 + hidden 제거

HTML

<form id="login_form">
</form>
<h1 id="greeting" class="hidden"></h1> // h1 추가 : 기본적으로 hidden 상태

JS

const loginForm = document.querySelector('#login_form')
const loginInput = document.querySelector('#login_form input')
const greeting = document.querySelector('#greeting'); //h1 가져오기
const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기함.(관습)

function onLoginSubmit(event) {
  event.preventDefault() // 브라우저의 기본 동작을 막아줌.
  loginForm.classList.add(HIDDEN_CLASSNAME); // 제출 후에 hidden class를 더해서 form을 숨겨줌.
  const username = loginInput.value;
  greeting.innerText = "Hello" + username; // 제출 후 입력값이 포함된 문구가 뜨도록.
  greeting.innerText = 'Hello ${username}'; // 위와 같지만 더 좋은 방식!
  greeting.classList.remove(HIDDEN_CLASSNAME);//hidden class 제거
}

loginForm.addEventListener('submit', onLoginSubmit)

⭐️ string과 변수를 합치는 방식

1. "string" + 변수

ex) "Hello" + username

2. 'string ${변수}'

ex) 'Hello ${username}'
더 새로운 방식!(띄어쓰기하기 편함)
반드시 백틱기호(`) 사용!! ⚠️따옴표 아님

5. username 저장하기

⭐️ localStorage

: 브라우저에 무언갈 저장하고 가져다 쓸 수 있게 해줌.
👉🏻 개발자 도구 -> Application에서 확인 가능.

localStorage.setItem()

: localStorage에 정보 저장
ex) localStorage.setItem("username", "nico")

localStorage.getItem()

: localStorage에 저장된 값 불러오기
ex) localStorage.getItem("username")

localStorage.removeItem()

: localStorage에 저장된 값 삭제
ex) localStorage.removeItem("username")

localStorage.setItem("저장될 이름", 변수)

const loginForm = document.querySelector('#login_form')
const loginInput = document.querySelector('#login_form input')
const greeting = document.querySelector('#greeting'); //h1 가져오기
const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기함.(관습)

function onLoginSubmit(event) {
  event.preventDefault() // 브라우저의 기본 동작을 막아줌.
  loginForm.classList.add(HIDDEN_CLASSNAME); // 제출 후에 hidden class를 더해서 form을 숨겨줌.
  const username = loginInput.value;
  localStorage.setItem("username", username) // 유저네임 localStorage에 저장
  greeting.innerText = 'Hello ${username}'; // 제출 후 문구 출력
  greeting.classList.remove(HIDDEN_CLASSNAME);// hidden class 제거
}

loginForm.addEventListener('submit', onLoginSubmit)

6.username 기억하기

📌 목표

local storage에 유저정보가 있는지 확인.
-> 유저정보가 있으면 form 보여주지 않고 h1 출력
-> 유저정보가 없으면 form 보여주기

💡 유저정보 유무 확인 : localStorage.getItem() === null

HTML

<form id="login_form" class="hidden"> // JS로 컨트롤하기 위해 숨겨줌
</form>
<h1 id="greeting" class="hidden"></h1> // h1 추가 : 기본적으로 hidden 상태

JS

const loginForm = document.querySelector('#login_form')
const loginInput = document.querySelector('#login_form input')
const greeting = document.querySelector('#greeting'); //h1 가져오기

// 자주 사용하는 string 
const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기함.(관습)
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  event.preventDefault() // 브라우저의 기본 동작을 막아줌.
  loginForm.classList.add(HIDDEN_CLASSNAME); // 제출 후에 hidden class를 더해서 form을 숨겨줌.
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username) // 유저네임 localStorage에 저장
  paintGreetings(username);
}

function paintGreetings(username){
  greeting.classList.remove(username);
  greeting.innerText = 'Hello ${savedUsername}'; 
}

// 유저 정보 유무 확인
const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
 // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener('submit', onLoginSubmit)
} else{
  // show greetings
 paintGreetings(savedUsername);
}

출처 : 노마드코더 바닐라 JS로 크롬 앱 만들기