[ JS : 실습 : Saving the User Name (2) ]

📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.

Event 의 preventDefault
보통 event가 발생하면 root에서 일어나고 form에서 일어난다. 이벤트는 일종의 거품 같은 것. 이벤트가 올라가면서 다른 모든 것들이 event에 반응하게 되기 때문이다.

form 칸에 min 을 입력했다.

hello min이 브라우저에 출력되는 것을 확인할 수 있다.

const form = document.querySelector(".js-form”); 
const input = form.querySelector("input”);
const greeting = document.querySelector(".js-greetings");

const USER_LS = “currentUser";
const SHOWING_CN = "showing";

/* 이름을 저장하는 함수이다 */
function saveName(text){
    localStorage.setItem(USER_LS, text);
}

/* event의 default 기본 동작을 변경하는 함수이다.*/
function handleSubmit(event) {
    event를 금지시켰다. 기본 동작을 막는 1단계. 보통 event가 발생하면 root에서 일어나고, form에서 일어난다. 이 event는 마치 일종의 거품같은 것이다. form 을 제출하는 event가 발생하면, event가 계속 위로 올라간다. document까지. 그래서, 이 event의 기본동작(preventDefault)을 막고자 한다면

    event.preventDefault();
    value 를 갖고 paintGreeting() 함수를 다시 부를 것임. 이 event를 사용함으로서 새로고침이 되지 않을 것이다. 이제 이 parameter의 현재 value값이 필요하다.

    const currentValue = input.value; 
    여기서 필요한 것은 value값을 갖고, paintGreeting function 을 다시 부르는 것이다.

    paintGreeting(currentValue);
    텍스트를 그리고(넣고)
    saveName(currentValue);
    이름을 저장할 것이다.
}

/* 이름을 질문하는 함수이다. */
function askForName() {
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

/* 이름의 텍스트를 입력하거나 그리기 위한 함수이다. */
function paintGreeting(text) {
    만약 텍스트를 입력하거나 그리기 위해서는 기존의 form을 숨겨야 할 것이다.
    form.classList.remove(SHOWING_CN); 
    // classList로 form 을 지우고
    greeting.classList.add(SHOWING_CN); 
    // classList로 greeting 을 보여줄거고
    greeting.innerText = `hello ${text}`; 
    // innerText로 내가 보낸 text를 집어넣을 것임.
}

/* local storage에서 가져오는 용도. 이름을 불러만 오는 함수. (저장하는게 아님) */
function loadName() { 
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null) {
    // 로컬 스토리지에 유저가 없을 때(null)
        askForName();
    } else {
    // 로컬 스토리지에 유저가 있을 때
        paintGreeting(currentUser); 
        // paintGreeting 함수를 부른다. 로컬 스토리지에서 가져온 텍스트와 함께.
    }
}

function init(){
    loadName();
}
init();