자바스크립트로 로그 기록남기기

안녕하세요 홍 가 입니다.

오늘은 로그인 로그 기록을 남기게 해보려고 합니다.

로그인 창을 만들었으니 자바스크립트로 입력 정보를 가져오게 하고싶다.  

 

저는 div class를 login-form으로 정해놔서 저렇게 사용을 했고 첫번째도 가능하지만 두번째도 가능합니다.

 

html과 js소스코드 인데요. 

querySelector은 클래스명 아이디 등등 다 사용할 수 있어요

저는 클래스를 사용했으니 . 반면 id를 사용했다면 #으로 하시면됩니다. 

 

이렇게 하면 value의 값을 얻을 수 있어요!

저는 이제 사람들의 이름만으로 로그인이 되게끔 만들어 보려고해요

 

우선 글자수를 정해주시고 

 

문제점은 HTML이 확인 작업을 안해주는데요 JS에 있는 input의 유효성 검사를 하려면 form을 사용 해야 합니다.

 

이벤트를 사용하여 만들어 보겠습니다. 

유저가 이름을 제출하면 이제 form을 없애려고 하는데요

이것을 css로 없애주려고 해요.

 

입력된 값은 있지만 form창이 사라졌죠?

 

이런식으로 html부분에 h1태그를 사용해서 id랑 class를 사용했고요 

js부분에는 이제 히든을 나타나게 하려고 저렇게 작성을 했습니다. 

 

작성 할 때 원래는 "" + "" 이런식으로 사용을 했는데

`00 ${} 00` 도 사용이 가능합니다. 

 

honga로 로그인을 하니 입력이 되었습니다.

서버에 이제 사용자 이름을 기억하게끔 넣는 localStorage.setItem();이에요 

새로고침을 해도 유저명은 계속 기억을 하고 있습니다. 

 

이렇게 주석으로 코드를 해석해 봤습니다. 

greeting은 이제 h1으로 로그인 했을때 안녕하세요 00 님 이라고 해주려고 만들었고요 

USERNAME_KEY는 반복적으로 username을 사용하기 때문에 만들었고요 

저런식으로 로그인 창 만드는 연습을 하시면 될 것 같습니다. 

 

새로고침을 해도 계속 나타날텐데 개발자 도구가셔서 localstorage들어가셔서

내용을 지우시면 form이 다시 나오게 됩니다.