우리는 평소에 웹사이트를 빌드를 하면서 아마도 당신은 환경설정 기능을 고려해본적이 있을 것이다. 웹사이트에서 환경설정은 darkMode 혹은 다양한 기능들을 유저들이 켜고 끌 수 있는 기능을 말한다.
이러한 기능들을 구현하려면 단순하게 사용자가 해당하는 기능을 켜고 껐는 지를 기록해야 하며 이를 브라우저가 꺼져도 그 설정을 유지 할 수 있도록 해야한다. 그리고 더 나아가 페이지 전반적으로 해당 기능을 적용해야 한다.
바로 이러한 기능들을 구현하기 위해 Store
라는 개념을 사용한다. Store
는 단순히 데이터를 저장하는 공간이라고 생각하면 된다.
사실 이 Store
라는 개념은 여타 다른 라이브러리를 통해서 구현을 쉽게 만들 수 있는데, 예를들어서 redux
나 recoil
혹은 justand
등등을 통해서 구현을 할 수 있지만 다른 라이브러리 없이 바닐라 자바스크립트를 통해서도 쉽게 만들 수 있다.
우리는 Store
를 만들기 위해서 Object
를 사용하여 만들 수 있다. Object
안에 있는 getter
와 setter
를 통해서 데이터를 저장하고 데이터를 불러올 수 있게 만들 것이다.
그렇다면 아주 간단하게 getter
와 setter
의 개념에 대해서 간단하게 알아보자. getter
는 데이터를 가져오는 함수이고 setter
는 데이터를 저장하는 함수이다.
해당하는 객체에 생성을 하게 되면 getter
와 setter
를 통해서 데이터를 저장하고 불러올 수 있다. 이 둘의 함수를 통해서 언제든지 객체 내에 있는 값이 바뀌었는지를 확인 할 수 있으며, 또 값이 실행되었을 때 특정한 함수를 실행 할 수 있다.
const setting = {
_darkMode: false,
get darkMode() {
return this._darkMode;
},
set darkMode(value) {
this._darkMode = value;
}
}
위와 같이 getter
와 setter
를 통해서 데이터를 저장하고 불러올 수 있다. 이제 이 setting
이라는 객체를 통해서 darkMode
라는 값을 저장하고 불러올 수 있다.
그렇다면 이를 통해서 darkMode
를 값을 저장하고 또 이를 localStorage 에 저장하는 방법을 알아보자.
const setting = {
_darkMode: false,
get darkMode() {
return this._darkMode;
},
set darkMode(value) {
this._darkMode = value;
saveSettingOnLocal(this._darkMode);
}
}
function saveSettingOnLocal({darkMode}) {
localStorage.setItem('darkMode', darkMode);
}
function loadSettingOnLocal() {
const darkMode = localStorage.getItem('darkMode');
setting.darkMode = darkMode;
}
위와 같이 darkMode
를 저장하고 불러오는 함수를 만들어서 localStorage
에 저장하고 불러올 수 있다. 이제 이를 통해서 darkMode
를 저장하고 불러올 수 있다.
이제 Store
를 만들었으니 이를 활용하는 방법에 대해서 알아보자. 앞서 봤다 싶이 setting
이라는 객체는 darkMode
라는 값을 localStorage
에 저장하고 불러올 수 있었다. 그렇다면 이를 불러오기만 하면 darkMode
를 불러올 수 있다.
const setting = {
_darkMode: false,
get darkMode() {
return this._darkMode;
},
set darkMode(value) {
this._darkMode = value;
}
}
window.onload = () => {
loadSettingOnLocal();
console.log(setting.darkMode);
}
function loadSettingOnLocal() {
const darkMode = localStorage.getItem('darkMode');
setting.darkMode = darkMode;
if (darkMode === 'true') {
document.body.classList.add('dark');
}
else{
document.body.classList.remove('dark');
}
}
위와 같이 window.onload
를 통해서 만약 브라우저가 로드가 되었을 떄 darkMode
를 불러오게 되며 해당 하는 값에 따라서 dark
클래스를 추가하거나 제거하게 된다.
이렇게 Store
를 통해서 localStorage
에 값을 저장하고 불러올 수 있다.
간단하게 바닐라 자바스크립트를 통해서 Store
를 만들어서 localStorage
에 값을 저장하고 불러오는 방법에 대해서 알아보았다. 사실 처음에는 OOP
에 대한 개념이 제대로 잡히지 않아서 처음에는 잘 사용하지 못했었다.
하지만 객체 안에 있는 다양한 메소드 들을 통해서 객체에 대해서 제대로 공부를 해보니 적절하게 이를 응용하여 복잡해보였던 기능도 아주 단순하게 만들 수 있었다.