자바스크립트 실습 - Saving the User Name

노마드코더 바닐라 JS로 크롬 앱 만들기 #3.2 ~ #3.3 강의 들으며 정리.

 

 

html

<form class="js-form form">
    <input type="text" placeholder="What is your name?">
 </form>
 <h4 class="js-greetings greetings"></h4>

 

이름을 입력할 input을 포함한 form을 하나 만들고 이름을 출력할 h4 태그 작성

 

 

 

css

.form, 
.greetings {
  display: none;
}

.showing {
  display: block;
}

 

이름을 입력할 form과 이름을 표시해줄 h4를 보이지 않게 해두고, 클래스 showing이 붙었을 때 보이도록 한다.

 

 

js

const form = document.querySelector('.js-form'),
      input = form.querySelector('input'),
      greeting = document.querySelector('.js-greetings');
      
function init(){
  loadName();
};

init();

 

변수 각각 작성하고 init 함수 안에 이름 불러오는 함수인 loadName을 넣어준다.

 

 

const USER_LS = 'currentUser';

//로컬스토리지에 저장한 정보를 가져오는 함수
function loadName(){
    const currentUser = localStorage.getItem(USER_LS);
    //로컬스토리지에 유저가 없을 때
    if(currentUser === null) {
     askForName();
    }
    //로컬스토리지에 유저가 있을 때
    else {
     paintGreeting(currentUser);
    }
};

 

localStorage는 데이터를 사용자 로컬에 저장할 수 있다.

localStorage.setItem('key', value)로 로컬에 정보를 저장할 수 있고

localStorage.getItem으로 내가 저장한 정보의 값을 불러올 수 있다.

확인하는 방법은 개발자 도구의 application에서 확인할 수 있음

 

로컬스토리지에 사용자에 대한 정보가 없으면 이름을 물어보고, 정보가 있으면 

사용자 이름을 보여주는 함수를 만들어 준다.

 

 

const SHOWING_CN = 'showing';

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}`;
}

 

paintGreeting은 이름을 입력하고 나면 Hello User 라고 표시해 줄 함수.

그래서 form은 클래스 showing을 제거하여 display: none 상태로 돌아가도록 하고

h4는 클래스 showing을 붙여서 display: block이 되도록 한다. 

그리고 h4 안에 Hello 사용자이름 이 나오도록 innerText를 이용하여 작성해준다.

 

askForName은 currentUser가 null 상태일 때, 즉 사용자에 대한 정보가 아무것도 저장되어 있지 않을 때

사용자 이름을 입력할 수 있도록 하는 함수.

이름을 입력할 수 있는 form이 보이도록 하기 위해 클래스 showing을 붙여주고,

제출되면 handleSubmit이라는 함수가 실행되도록 한다.

 

 

function saveName(text){
  localStorage.setItem(USER_LS, text);
}

function handleSubmit(event){
  event.preventDefault();
  const currentValue = input.value;
  paintGreeting(currentValue);
  saveName(currentValue);
}

 

form에 이름을 입력하고 엔터를 누르면(제출하면) 사라지는데, 이 동작이 기본 동작이다.

기본 동작을 제거하기 위해 preventDefault를 사용한다.

input에 입력된 값을 currentValue라는 변수로 지정하고, 이름을 표시하는 함수인 paintGreeting에 넣어준다.

근데 문제는 새로고침하면 내가 입력한 이름이 유지되지 않고 사라진다.

예를 들어 form에 user라고 입력했으면 hello user라고 이름이 계속 표시되고 있어야 하는데

새로고침하면 사라져버린다.

그래서 이름을 계속 표시해주기 위해 saveName이라는 함수를 만들어준다.

이름을 지우고 싶다면, application에 들어가서 로컬스토리지에 저장된 값을 지우고 새로고침 해주면 된다.

 

 

 

 

최종 완성본

 

const form = document.querySelector('.js-form'),
      input = form.querySelector('input'),
      greeting = document.querySelector('.js-greetings');


const USER_LS = 'currentUser',
      SHOWING_CN = 'showing';

function saveName(text){
  localStorage.setItem(USER_LS, text);
}

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();

 

 

ㅋㅋㅋㅋㅋ... 어렵다 ㅠㅠㅠ

혼자서 여러번 다시 작성해봐야 할 듯... 

그래도 글쓰다보니 정리는 좀 되는 것 같다

열심히 하다보면 혼자 이렇게 처음부터 끝까지 다 코드 짤 수 있는 날이 오겠지..?