CODE KATA #5

YoungToMaturity·2021년 1월 16일

TIL

CODE KATA 🧗‍♂️

목록 보기

5/37

CODE KATA 🧗‍♂️

<select>와 <option>을 이용하여 사용자의 국가가 어디인지 입력받고, 해당 입력 결과를 Local Storage에 저장하여 새로고침해도 해당 정보가 계속 남아있도록 하자.

요구조건

1. Save the country selection to localStorage.
2. Load the saved selection on refresh.

해결과정

html 파일 내부에는 Country라는 클래스를 가진 <select>를 생성해주고, 내부의 <option>은 총 네개로 각각 KR, GR, TK, FL을 value로 갖는다. 사용자가 <select>를 통해 국가를 선택하면, 해당 국가의 언어로 인사말을 건낼 <h1>을 js-greeting이라는 클래스를 갖도록 하여 생성해 주었다. css 파일 내부에서는 <select>혹은 <h1>을 보여주도록 하기 위하여 .Country와 .js-greeting를 display: none;으로 설정해주고, .showing을 display: block;으로 설정해주어 추후 js 파일에서 필요에 따라 보이게 할 수 있도록 하였다. js 파일에서는`

const country = document.querySelector(".Country");
const greeting = document.querySelector(".js-greeting");
const COUNTRY_LS = "country";
const SHOWING_CN = "showing";

앞서 언급한 내용들을 사전에 선언하여 오타를 방지하였고, init 함수 내부에 local storage 내부에 이미 "country"가 저장되어있는지를 확인하는 함수 loadCountry를 실행하고, 존재한다면 인사말을 출력하도록 하는 paintGreeting 함수를, 존재하지 않는다면 <select>와 <option>을 보이게 하여 입력을 기다리는 askCountry함수를 실행하도록 하였다. 그후 askCountry에서는 <select>의 값이 변하는 것을 감지하는 event listener를 추가해주고, 해당 event 발생시 handleChange를 실행하도록 하고, 그 내부에는 local storage에 선택된 값을 저장하는 saveCountry와 저장값을 출력하는 paintGreeting을 실행하도록 하였다.

loadCountry()

const currentCountry = localStorage.getItem(COUNTRY_LS);를 통해서 사용자의 local storage 내부의 "country"라는 key를 가진 value를 currentCountry에 저장하도록 선언했다. 이후 if문을 통해 해당 값이 null인지 확인하고, 만약 null인 경우 저장된 "country" 값이 없다는 뜻이고, null이 아닌 경우 이미 "country"의 value가 존재하기 때문에, paintGreeting(currentCountry)를 실행하도록 하였다.

askCountry()

사용자로부터 국가를 선택할 수 있도록 해야하기 때문에, display: none;으로 저장되어있는 country의 classList에 "showing"을 추가하도록 하여 <select>가 출력되도록 하였고, <select>의 값이 변화하는 경우 발생하는 이벤트 change에 반응하기 위해 addEventListener("change",handleChange)를 통해 event listener를 추가해주었다.

function askCountry() {
  country.classList.add(SHOWING_CN);
  country.addEventListener("change", handleChange);
}

handleChange()

event를 인자로 갖는 handleChange 함수에서는 event.target.value를 통해 사용자가 선택한 <option>의 value를 currentValue에 저장해주고, 선택을 한 이후 <select>는 더 이상 보일 필요가 없기 때문에 classList.remove를 통해 <select>는 보이지 않게하였다.

country.classList.remove(SHOWING_CN);

이후에는 saveCountry(currentValue)를 통해 해당 값을 local storage에 저장하여 사용자에게 국가를 다시 묻지 않도록 하고, paintGreeting(currentValue)를 실행하여 보이게 된 <h1>을 해당 국가의 인삿말이 출력되도록 하였다.

saveCountry() & paintGreeting()

currentValue를 인자로 받은 두 함수는 각각 local storage에 해당 value 저장하는 기능과 해당 value에 해당하는 국가의 인사말을 출력하도록 하는 기능을 한다. 먼저 saveCountry(text)는 localStorage.setItem(COUNTRY_LS,text)를 통해 "country"라는 key에 currentValue에 해당하는 value의 값을 저장하도록 했다. 이후 paintGreeting(country)에서는 <h1>이 보이도록 하고, currentValue에 해당하는 country의 값에 따라 greeting.innerText = "(해당 국가 인삿말)"를 통해 수정하도록 하였다.