#4. Login

Tip. 일반적으로 string만 포함된 변수나 중요한 정보를 담은 게 아닌 경우 변수명을 전부 대문자로 표기

Element 찾기

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

위와 같이 꼭 document 기준으로 element를 찾지 않아도 된다

 

Form 자동제출 막기

* form 안에 있는 button을 누르거나, type이 submit인 input을 클릭하면 작성한 form이 submit된다

function onLoginSubmit(event) {
    event.preventDefault();
}

addEventListener에 추가한 함수가 실행될 때는 해당 이벤트와 관련된 정보가 인자로 주어지는데, 해당 인자에 preventDefault 함수를 처리하게 되면 default로 지정된 이벤트가 벌어지지 않는다(form의 경우, 자동 제출 후 새로고침되는 동작이 막힌다. 다른 예로, a 태그의 경우, 위와 같은 방법으로 이벤트를 막을 경우 해당 링크로 이동되지 않는다)

 

문자열에 변수값 넣기

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

첫번째 줄과 같이 + 기호를 사용하여 둘을 합치거나, 두번째 줄과 같이 백틱(`)기호를 활용하여 문자열 내 원하는 부분에 변수를 삽입할 수 있다

 

정보 저장하기(local storage)

// local storage에 정보 저장
localStorage.setItem("key", "value");

// local storage에 저장된 값 반환
const item = localStorage.getItem("key");

// local storage에 저장된 값 삭제
localStorage.removeItem("key");

* 단, local storage에는 string 형식만 저장할 수 있다

따라서 다른 방식으로 저장하기 위해서는 json 형태로 저장하면 된다