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

 

 

- preventDefault()

: 어떤 event의 기본 행동이든지 발생되지 않도록 막아주는 역할

(행동 = 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작)

 

ex) form을 submit 하면 기본적으로 페이지를 새로고침하게 되어있다.  →  preventDefault로 막기

function onLoginSubmit(event){
    event.preventDefault();
    console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);

cf.) JS에서 저 functio onLoginSubmit() 부분에 event로 채워준다. (event로 적는게 일반적)

 

cf.) event로부터 얻을 수 있는 다양한 정보 존재

: alert로 해서 event를 console에 찍어보면, MouseEvent가 출력되고 → 그 안에서 사용자가 클릭했던 마우스의 위치 (screenX, screenY) 좌표값을 확인할 수 있다.

 

 

ex) a태그를 통해서 click 했을 때 기본적으로 링크로 이동하게 되어있다. → preventDefault로 막기

const link = document.querySelector("a");

function handleLinkClick(event){
    event.preventDefault();
    console.dir(event);
}

link.addEventListener("click", handleLinkClick);

 

 

 

- Input에 값을 입력한 후, 입력 form을 사라지게 하는 방법

.hidden{
    display: none;
}

loginForm.classList.add("hidden");

→ CSS에서 hidden이라는 클래스를 통해 display : none으로 form이 사라지도록 한다.

→ JS에서는 해당 클래스 이름을 add해서 실행시켜 준다.

 

Log in 클릭 시 해당 화면은 사라진다.

Input에 작성한 내용은 console에 찍히게 된다.

 

 

 

- Input에 입력한 값을 h1 태그로 받아와서 출력하기

<h1 id="greeting" class="hidden"></h1>

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");

		greeting.innerText = `Hello ${username}`;
	//greeting.innerText = "Hello " + username; 과 같음 (표현만 다를 뿐)

    greeting.classList.remove("hidden");
}

loginForm.addEventListener("submit", onLoginSubmit);

→ h1에서는 hidden이 되면 안되기 때문에 remove를 사용해서 제거해준다.

 

cf.) string만 포함된 변수는 대문자로 표기 (일반적) / 반복되는 string은 변수로 선언해주는 것이 좋다.

 

 

 

 

- LocalStorage : API / 브라우저에 뭔가를 저장할 수 있게 해준다. (미니 DB 라고 생각하면 된다.)

(*localStorage 확인하는 방법 : 개발자 도구 → Application → LocalStorage)

 

1. localStorage.setItem(”키”, “값”) : local storage에 정보를 저장시켜 준다.
2. localStorage.getItem(”키”) : local storage에 있는 정보를 가져온다.
3. localStorage.removeItem(”키”) : local storage에 있는 정보를 지운다.

const username = loginInput.value;
    localStorage.setItem("username", username);