[JavaScript] #3.4 Saving the User Name part Two (#코딩공부)

https://youtu.be/7gYwj8vh_OQ

---

<복습>

https://wook-2124.tistory.com/85

[JavaScript] #3.3 Saving the User Name part One (#코딩공부)

 

<준비물>

https://repl.it/

Online IDE, Editor, and Compiler - Fast, Powerful, Free

 

<코드기록>

// form 빈칸에 text를 적고 Enter를 누르는 행동은 form을 submit(제출)하는 것
// form을 제출하면 제출된 것을 다른 곳으로 보내려고 함
// Enter를 누르면 text값이 default로 사라지고 다시 빈칸으로 됨
const form = document.querySelector(".js-form"),
  input = form.querySelector("input"),
  greeting = document.querySelector(".js-greeting");

const USER_LS = "currentUser",
  SHOWING_CN = "showing";
// handleSubmit(event)로 submit(제출) event가 발생하면 행동할 규칙을 정함
function handleSubmit(event) {
  event.preventDefault();
}
// addEventListener로 submit이 발생하면 handleSummit 값을 호출
function askForName() {
  form.classList.add(SHOWING_CN);
  form.addEventListener("submit", handleSubmit);
}

function paintGreeting(text) {
  form.classList.remove(SHOWING_CN);
  greeting.classList.add(SHOWING_CN);
  greeting.innerText = `Hello ${text}`;
}

function loadName() {
  const currentUser = localStorage.getItem(USER_LS);
  // 만약(if) currentUser === null이면 askForName으로 <form> classList에 추가(add)
  if (currentUser === null) {
    askForName();
  } else {
    paintGreeting(currentUser);
  }
}

function init() {
  loadName();
}

init();


// currentValue 값을 얻기 위해 input.value를 이용해 빈칸에 Enter를 쳐서 console.log로 출력해봄
function handleSubmit(event) {
  event.preventDefault();
  const currentValue = input.value;
  console.log(currentValue);
}


// paintGreeting(currentValue)로 현재 빈칸에 적은 input.value를 
// paintGreeting으로 보낸 다음 `Hello ${currentValue}`값이 나오게끔함
function handleSubmit(event) {
  event.preventDefault();
  const currentValue = input.value;
  paintGreeting(currentValue);
}


// 최종 코드
const form = document.querySelector(".js-form"),
  input = form.querySelector("input"),
  greeting = document.querySelector(".js-greeting");

const USER_LS = "currentUser",
  SHOWING_CN = "showing";
// LS에 key="currentUser", value="text로 input(입력)한 것"으로 각각 저장함
function saveName(text) {
  localStorage.setItem(USER_LS, text);
}
// submit(제출) event가 발생하면 Default를 prevent(방지)하고
// paintGreeting과 saveName이 실행되어 currentValue(=input.value)가 LS에 저장됨
function handleSubmit(event) {
  event.preventDefault();
  const currentValue = input.value;
  paintGreeting(currentValue);
  saveName(currentValue);
}

function askForName() {
  form.classList.add(SHOWING_CN);
  form.addEventListener("submit", handleSubmit);
}

function paintGreeting(text) {
  form.classList.remove(SHOWING_CN);
  greeting.classList.add(SHOWING_CN);
  greeting.innerText = `Hello ${text}`;
}

function loadName() {
  const currentUser = localStorage.getItem(USER_LS);
  if (currentUser === null) {
    askForName();
  } else {
    paintGreeting(currentUser);
  }
}

function init() {
  loadName();
}

init();

---

1. handleSubmit, "submit" event 관리하기

form 빈칸에 text를 적고 Enter를 누르는 행동은 form을 어딘가로 submit(제출)하는 것이다. form을 제출하는 행동인 Enter를 누르면 text값이 default로 사라지고 다시 빈칸으로 된다.

 

handleSubmit(event)로 submit(제출) event가 발생하면 event.preventDefault가 실행되게끔 정하고, askForName에 addEventListener로 submit event가 발생하면 handleSummit 값을 호출되게끔 했다.

---

2. paintGreeting, `Hello ${text}` 띄우기

그리고 currentValue 값을 얻기 위해 input.value를 이용해 빈칸에 Enter를 쳐서 console.log로 출력해봤다.

 

빈칸에 치는 text대로 input.value 값이 console에 출력되고 있다.

 

paintGreeting(currentValue)로 현재 빈칸에 적은 input.value를 paintGreeting으로 보낸 다음 `Hello ${currentValue}`값이 화면에 표시되게끔했다. 여기서 currentValue는 빈칸에 적은 text가 된다.

 

빈칸에 적은 text "YoungWook"으로 `Hello YoungWook`이 뜬 것을 볼 수 있다.

---

3. Local Storage에 저장하기

submit(제출) event가 발생하면 function handleSubmit이 실행되어 Default를 prevent(방지)하고 paintGreeting으로 `Hello YoungWook` 문구와 saveName function이 실행되어 currentValue(=input.value), 즉 빈칸에 text로 입력한 것이 LS에 value로 저장된다.

 

다시말해, function saveName에서는 localStorage.setItem으로 지정한 대로, key="currentUser", value="text로 input(입력)한 것"으로 각각 Local Storage에 저장한다.

 

paintGreeting으로 뜬 ${text}에 들어간 "YoungWook"문구가 Local Storage에 Key=currentUser의 Value로 저장됐다.

 

---

※ 코로나19 조심하세요!!!!