바닐라 자바스크립트로 Store 개념 만들기

1. What is Store?

우리는 평소에 웹사이트를 빌드를 하면서 아마도 당신은 환경설정 기능을 고려해본적이 있을 것이다. 웹사이트에서 환경설정은 darkMode 혹은 다양한 기능들을 유저들이 켜고 끌 수 있는 기능을 말한다.

이러한 기능들을 구현하려면 단순하게 사용자가 해당하는 기능을 켜고 껐는 지를 기록해야 하며 이를 브라우저가 꺼져도 그 설정을 유지 할 수 있도록 해야한다. 그리고 더 나아가 페이지 전반적으로 해당 기능을 적용해야 한다.

바로 이러한 기능들을 구현하기 위해 Store 라는 개념을 사용한다. Store 는 단순히 데이터를 저장하는 공간이라고 생각하면 된다.

사실 이 Store 라는 개념은 여타 다른 라이브러리를 통해서 구현을 쉽게 만들 수 있는데, 예를들어서 reduxrecoil 혹은 justand 등등을 통해서 구현을 할 수 있지만 다른 라이브러리 없이 바닐라 자바스크립트를 통해서도 쉽게 만들 수 있다.

2. How to make Store?

우리는 Store 를 만들기 위해서 Object 를 사용하여 만들 수 있다. Object 안에 있는 gettersetter 를 통해서 데이터를 저장하고 데이터를 불러올 수 있게 만들 것이다.

그렇다면 아주 간단하게 gettersetter 의 개념에 대해서 간단하게 알아보자. getter 는 데이터를 가져오는 함수이고 setter 는 데이터를 저장하는 함수이다.

해당하는 객체에 생성을 하게 되면 gettersetter 를 통해서 데이터를 저장하고 불러올 수 있다. 이 둘의 함수를 통해서 언제든지 객체 내에 있는 값이 바뀌었는지를 확인 할 수 있으며, 또 값이 실행되었을 때 특정한 함수를 실행 할 수 있다.

const setting = {
  _darkMode: false,
  
    get darkMode() {
        return this._darkMode;
    },
  
    set darkMode(value) {
        this._darkMode = value;
    }
}

위와 같이 gettersetter 를 통해서 데이터를 저장하고 불러올 수 있다. 이제 이 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 를 저장하고 불러올 수 있다.

3. How to use Store?

이제 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 에 값을 저장하고 불러올 수 있다.

4. Conclusion

간단하게 바닐라 자바스크립트를 통해서 Store 를 만들어서 localStorage 에 값을 저장하고 불러오는 방법에 대해서 알아보았다. 사실 처음에는 OOP에 대한 개념이 제대로 잡히지 않아서 처음에는 잘 사용하지 못했었다.

하지만 객체 안에 있는 다양한 메소드 들을 통해서 객체에 대해서 제대로 공부를 해보니 적절하게 이를 응용하여 복잡해보였던 기능도 아주 단순하게 만들 수 있었다.

profile
항상 즐겁고 재밌게!

0개의 댓글