[JSClock 클론코딩] 2. 데이터를 저장해보자!

크롬 F12를 눌러서 확인할 수 있는 개발자 도구의 Application - LocalStorage, 그리고 콘솔창

다들 컴퓨터는 도대체 어떻게 내가 사용했던 정보를 기억하고 있을까 고민한 적이 있었지 않나요?

나만 그런건가..

당연히 기억을 위해서는 저장공간이 필요합니다. 그 저장공간은 브라우저 내부에 형성되고, 그 저장공간에 있는 자료들을 불러오면서 기억을 해 내는 것이죠.

이것을 localStorage라는 함수를 통해 실제로 사용할 수 있습니다!

localStorage.setItem()을 통해 설정해주고, getItem을 통해 string형태로 가져올 수 있는 것이죠.

(localStorage는 URL을 기반으로 저장됩니다!!)

위의 사진을 통해 이것의 간단한 사용 예를 가져왔습니다.

이번 글에서는 이 localStorage라는 것을 통해서 이름을 저장하는 기능을 구현해보도록 하겠습니다.

0. index.html

추가된 내용은 새로운 js파일, 그리고 form 부분입니다.

사용자로부터 이름을 받아와서 출력하기 위해 각각 form과 h4를 이용했습니다.

자세한 내용은 아래 코드와 주석을 참고하세요!

<!DOCTYPE html>
<html>

<head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="js-clock">
        <h1>00:00</h1> <!-- 임시로 -->
    </div>
    <form class="js-form form"> <!-- 작성창용 css를 적용하기 위해 class를 2개로!! form을 통해 엔터를 누를 때마다 정보가 전달!! -->
        <input type="text" placeholder="What is your name?" /> <!-- 입력창 추가 -->
    </form>
    <h4 class="js-greetings greetings"></h4>
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
</body>


</html>

1. index.css

이번엔 css입니다. 위의 내용은 다 무시하셔도 괜찮은데,

form과 greetings라는 class를 가지면 안보이게하고, showing이라는 class를 가지면 보이게 했습니다.

body{
    background-color: #ecf0f1;
}

.btn{
    cursor: pointer;
}

h1{
    color: #34495e;
    transition: color 0.5s ease-in-out;
}

.clicked {
    color: #7f8c8d;
}

/* 안보이게 하기 위함 */
.form,
.greetings {  
    display: none;
}

.showing{
    display: block;
}

2. greeting.js

강의에서는 gretting.js로 되어있기 때문에 주의하세요!! (니꼬쌤의 실수인듯 ㅋㅋ)

이름이 저장되어 있을 때와 저장되어 있지 않을 때로 각각 나누어서 다른 함수를 호출합니다.

만약 저장되어 있다면 입력창을 없애고 바로 이름을 출력하고 (paintGreeting 함수 사용)

저장되어있지 않다면 입력창을 띄우고, 사용자가 입력값을 넣고 엔터를 누르면 그 값을 출력하고 localStorage에 저장합니다.

개인차가 있겠지만, const USER_LS와 SHOWING_CN을 이용하여 상수를 만들어서 활용하는 부분이 가장 인상적이었습니다.

또한 프로그램에 익숙하지 않으신 분들은 if문을 사용해서 상태에 따라 프로그램이 다르게 작동하는 부분에서 인상적으로 느끼셨을 것 같습니다.

아래 주석을 자세하게 달아놓았으니, 참고하시고 잘 모르시는 내용이 있다면 댓글로 남겨주세요!

// greeting.js

const form = document.querySelector(".js-form"), // querySelector는 맨 처음꺼만, querySelectorAll은 모두 가져오는것! querySelectorAll는 array 형태로 가져온다는 특징도 있다!
    input = form.querySelector("input"); // form에서 input부분(입력창에 적은 내용) 가져온다!!
    greeting = document.querySelector(".js-greetings"); // js-greetings도 다시 가져온다!

const USER_LS = "currentUser", // UserLocalStorage에 들어갈 내용을 미리 넣어놓는다 (내용은 저장소 이름이라 크게 상관없음!)
    SHOWING_CN = "showing"; // Showing ClassName을 미리 showing으로 만들어놓고 이걸 추가하거나 뺌으로써 css를 적용하고 뺀다

function saveName(text){ // 저장을 위한 함수
    localStorage.setItem(USER_LS, text); // localStorage에 USER_LS라는 껍데기를 가진 text라는 데이터를 저장한다
})

function handleSubmit(event){ // 엔터를 눌렀을 때 값을 저장하고 출력하기 위해 만든 함수
    event.preventDefault(); // 엔터를 누를때 기본적으로 생기는 새로고침 현상을 막음
    const currentValue = input.value; // 값을 받아서
    paintGreeting(currentValue); // 입력창을 없애고 현재 입력된 이름을 출력
    saveName(currentValue); // 현재 값을 로컬스토리지에 저장
}

function askForName(){ // 이름을 묻는 함수
    form.classList.add(SHOWING_CN); // form에 showing이라는 class를 추가 (form창이 보임)
    form.addEventListener("submit", handleSubmit); // 엔터를 누르면 handleSubmit 함수가 실행
}

function paintGreeting(text){ // 입력창을 없애고 현재 입력된 이름을 출력(painting)하기 위한 함수
    form.classList.remove(SHOWING_CN); // form에 showing이라는 class를 삭제 (form창이 사라짐)
    greeting.classList.add(SHOWING_CN); // greeting에 showing이라는 class를 추가 (이름창이 보여짐)
    greeting.innerText = `Hello ${text}`; // Hello 사용자 로 greeting의 text 내용을 변경
}

function loadName(){ // 저장된 이름을 불러오거나, 값을 받는다.
    const currentUser = localStorage.getItem(USER_LS); // currentUser는 USER_LS(currentUser)에 저장된 값을 가져온 것!!
    if(currentUser === null){ // 만약 현재 이름이 저장되어있지 않으면 (저장되어 있지 않으면 null과 같다!!)
        askForName(); // 이름을 묻는다
    } else{ // 이름이 저장되어있다면
        paintGreeting(currentUser); // 그 이름을 불러온다
    }
}

function init(){ // 페이지가 작동되면 바로 loadName() 함수 실행!!
    loadName();
}

init();