[TIL - 노마드코더] 바닐라JS로 크롬 앱 만들기 (2)

 

로그인 기능 구현하기

필수 입력 사항, 최대길이 등 js 파일에서 if 문으로 이렇게 만들어 줄 수도 있지만

이정도 기능은 html 자체에서도 지원하고 있음

required는 필수로 적어야 된다는 거고

maxlength='' 로 최대 길이를 설정해 놓을 수 있음

하지만 

그냥 이 상태로 하면 검사가 유효하지 않음 

왜냐, input은 form 안에서 검사가 유효해지기 때문에 > 지금은 div안에 있다.

이렇게 form 안에 input이 있으면 검사가 잘 된다

input type='submit' 으로 하든 <button> 태그를 쓰든

form 안에서는 무조건 submit이 되고 페이지를 새로 로딩한다 > 새로고침 된다

// 버튼의 클릭이 중요한게 아니라 form의 submit이 중요하다!

submit을 할 때마다 새로고침이 안되게 하려면

loginSubmit의 첫번째 인자에 preventDefault() 를 주면 됨

그리고 그 첫 번째 인자를 console.log()에 찍어보면

이런 정보들이 넘어오고 있다는 걸 알 수 있음

submit이 일어나면 첫 번째 인자에 해당 정보가 들어온다

 

이벤트에 어떤 function 을 추가하던 간에 첫 번째 argument로 발생한 event의 정보를 준다.

-----------------

alert를 사용하면 모든 동작을 막게 된다 > 그래서 요즘엔 아무도 안쓴다...?

<a> 태그에 링크 걸어놓은 것도 preventDefault()를 주면 링크로 이동되지 않음

이렇게 어디를 클릭했는지 좌표도 나옴

path를 보면 지금 어떤 경로로 이 이벤트가 발생했는지 알 수 있음

 

---

이름 입력하고 submit하면 글씨가 사라지게 하고 싶음

1. html 태그 자체를 없앤다

2. css로 숨긴다 > display: none 만 주면 됨

 

submit이 일어나면 loginForm에 hidden 클래스를 추가해서 숨겨준다

 

일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용한다.

이렇게 하면 이름 submit 할 때 form 사라지고

h1 태그에 Hello username으로 나옴

이렇게!

 

--------------

새로고침해도 username 기억하고 싶음

local storage에 저장하기

session storage, indexed DB, Web SQL, cookies 등 여러 저장소가 있지만

local storage가 가장 다루기 쉬움

setItem을 사용하면 local storage에 정보를 저장할 수 있다.

정보 저장 - setItem

정보 조회 - getItem

정보 삭제 - removeItem

 

11번째 줄에 localStorage.setItem

오른쪽 개발자도구에 local storage 안에 username 저장된 것 확인

 

 

최종 동작 영상

똑같은 paintGreetings()인데

왜 13번 줄은 username을 주고 왜 29번 줄에는 savedUsername을 주는지!?!

 

13번의 paintGreetings는 input에서 데이터(여기서는 username)를 가져오고

29번의 paintGreetings는 localStorage에서 데이터(username)를 가져온다!

 

 

하지만 저렇게 username을 넘겨주지 않아도 됨

localstorage에 뭔가를 저장하면 paintGreetings가 호출되고

유저 정보는 이미 localstorage에 저장돼있음!

(하지만 노마드코더는 굳이 localStorage를 두 번 열어볼 필요가 없다고 이전 코드로 한다고 한다.. 나두 따라갈래여,, 슨생님,,,)