[바닐라 js 챌린지] 4.0강 백택(``), localStorage ✨

 

if문과 length를 사용하여 글자수를 제한둘 수 있다.

--> 근데 html에 이미 기능이 있으니 그 기능을 이용하자 

 

<form class="form-login">
     <input type="text" placeholder="what is your name?" />
     <input type="submit" value="Log In" />
</form>

input, button은 form태그로 감싸야한다 !

하지만 버튼을 누르거나 enter를 치면 자동으로 submi되는게 기본동작이기때문에

그걸 막기 위해서는 preventDefault()를 사용하면 된다 !

 

function onLoginSubmit(e){
  e.preventDefault();
  }
  //기본동작을 막아서 submit을 지연시킴

 

쓰는 법은 간단하다 ! 함수 첫줄에 적고 그 다음줄에 변수를 저장하거나 보관하는 코드를 적으면 된다

 

백택 (``)

 

h1.innerText  = `Hello ${username}`;
h2.innerText = "Hello" + username;

백택을 사용해서 좀 더 편리하게 적을 수 있다 ! 위의 코드의 결괏값은 동일하다

 

localStorage

나머지는 예전에 공부했던거여서 오랜만에 보네라는 느낌이 강하게 들었는데

localStorage는 처음 알았다 ,, mysql로 DB만 만졌는데 콘솔에도 이렇게 작고 소중한 DB가 있었다니,,!

function onLoginSubmit(e){
  e.preventDefault();
  const username = loginInput.value;
  localStorage.setItem("key",username);
  }

이렇게 넣어주면  F12 --> Application에 key, value값이 저장된다.

4강은 총 7개의 챕터로 로그인 기능을 구현하는데 목표를 두는데

혼자서 한번 더 해보고 코드 전체를 올리거나 해야겠다 개념은 여기까지 ✨