‘Login 기능을 어떻게 코드로 구현할 수 있을까?’
노마드 코더 사이트 중 무료강의인 “바닐라 JS로 Momentom 앱 만들기”를 시작하기로 마음먹고 첫 강의를 듣고나서 들었던 생각이다.
자바스크립트에서 변수, 반복문, 객체, 고차함수 등등...까지
한-두달간 그래도 많은 것을 배웠다고 생각했지만 내가 배웠던 것을 이용해서 로그인 기능을 어떻게 구현을 해야하는지 도무지 떠오르지 않았다.
그런 의문들을 남겨둔 채로 강의를 계속 듣기 시작했다.
강의에서는 내가 배운 적이 없던, 그리고 아주 간단하게 로컬 스토리지라는 것을 사용해 사용자 정보를 저장하는 기능을 만들었다.
Momentom 앱 만들기에서 Login 기능을 구현하기 위해 필요한 재료는 로컬 스토리지를 배움으로써 모두 얻게되었다.
Momemtom 앱에서 원하는 로그인 기능의 절차는 다음과 같다
사용자 정보를 저장하기 위해서는 form 엘리먼트를 사용할 것이다.
form버튼을 누르면 input.value가 로컬스토리지에 저장이 된다.
이 때 form버튼의 기본동작인 새로고침이 되는 것을 막아야하는데 preventDefault()메서드를 사용한다.
그리고 조건문으로 사용자 정보가 있다면 input버튼이 사라지고 h1엘리먼트에서 사용자 이름을 출력하고 사용자 정보가 없다면 input버튼을 보여주고 h1을 가린다.