노마드코더 바닐라JS 로 크롬 앱 반들기 Day3

#4. Login

4.0) Input Values

• 로그인 Input 창과 button 제작

4.1) Form Submission

• 로그인 input value의 유효성 검사

• form 안에서 엔터를 누르고 Input이 더이상 존재하지 않는다면 자동으로 submit 됨.

• 관심사는 form을 submit 하는것. 브라우저가 새로고침하지 않고 user의 정보를 저장하는 것.

• 새로고침되는 문제점을 고쳐야함. 이런식으로 작동을 원치 않음.

4.2) Events

• 새로고침이 일어나는 것은 form submit의 디폴트 동작임.
• preventDefault() > 디폴트로 무엇을 하는 것을 금지시킴.

4.3) Events part 2

• 중요한 것은, addEventListener안에 있는 함수는 직접 실행하지 않음. 브라우저가 함. 그리고 정보도 담아줌. 우리는 장소만 만들어주면 됨.

4.4) Getting Username

    greeting.innerText = "Hello " + username;
    greeting.innerText = `Hello ${username}`; (백틱)
    

4.5) Saving Username

• local storage는 우리가 브라우저에 뭔가를 저장할 수 있게 해줌. 그래서 나중에 가져다 쓸 수 있음.
• localStorage.setItem('mycat','Tom');
• localStorage.getItem("mycat");
• localStorage.removeItem("mycat");

4.6) loading Username