Colin's Blog
[javascript] MobX와 프로그레시브 웹 앱 (PWA)

소개

MobX는 상태 관리 라이브러리로, 복잡한 애플리케이션 상태를 쉽게 관리할 수 있는 도구입니다. PWA(Progressive Web App)는 웹 앱을 모바일 기기에 설치하고 네이티브 앱과 비슷한 경험을 제공하는 기술입니다. 이번 포스팅에서는 MobX와 PWA를 함께 사용하여 웹 앱의 개발을 좀 더 진보된 수준으로 만드는 방법에 대해 알아보겠습니다.

MobX를 사용한 상태 관리

MobX는 리액트와 함께 사용할 수 있는 강력한 상태 관리 도구입니다. MobX를 사용하면 컴포넌트 간의 상태 공유 및 업데이트를 간단하게 할 수 있습니다. MobX는 관찰 가능한 상태(observed state)를 정의하고, 이와 관련된 리액트 컴포넌트를 자동으로 업데이트합니다.

MobX를 사용하는 예시를 살펴보겠습니다. 아래 코드는 MobX를 사용하여 간단한 카운터 앱을 만드는 예시입니다.

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

@observable
class CounterStore {
  count = 0;

  @action
  increment() {
    this.count++;
  }

  @action
  decrement() {
    this.count--;
  }
}

@observer
class CounterApp extends React.Component {
  counterStore = new CounterStore();

  render() {
    return (
      <div>
        <h1>Counter: {this.counterStore.count}</h1>
        <button onClick={this.counterStore.increment}>+</button>
        <button onClick={this.counterStore.decrement}>-</button>
      </div>
    );
  }
}

위 코드에서 CounterStore 클래스는 observable 데코레이터로 감싸져 있으며, 상태를 관찰 가능하게 만듭니다. @action 데코레이터를 사용하여 상태를 업데이트하는 메서드를 정의할 수 있습니다. 그리고 CounterApp 컴포넌트에서 CounterStore 인스턴스를 생성하고, 해당 상태를 렌더링하고 상태를 업데이트하는 버튼을 추가합니다.

PWA에 MobX 적용하기

PWA는 웹 앱을 모바일 기기에 설치하고, 오프라인에서도 동작하며 네이티브 앱과 같은 경험을 제공합니다. PWA에 MobX를 적용하면 상태 관리 뿐만 아니라 오프라인 동작을 위한 로컬 저장소(Local Storage)와 같은 기능도 구현할 수 있습니다.

PWA의 핵심 요소 중 하나인 Service Worker를 이용하여 MobX를 PWA에 적용하는 방법을 알아보겠습니다. Service Worker는 브라우저와 백그라운드에서 독립적으로 실행되며, 네트워크 요청을 가로채고 로컬 저장소에서 응답을 제공할 수 있습니다.

아래 코드는 Service Worker를 등록하고, MobX Store를 로컬 저장소에 저장하여 오프라인에서도 상태를 유지할 수 있도록 하는 예시입니다.

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-store-v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/app.js',
        '/app.css',
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

위 코드에서 Service Worker는 install 이벤트에서 캐시를 생성하고 필요한 파일을 캐싱합니다. fetch 이벤트에서는 네트워크 요청을 가로채서 캐시된 응답을 제공하거나 네트워크에서 가져온 응답을 반환합니다.

위 코드는 PWA 기본 요구사항을 충족시키기 위한 최소한의 예시이며, 추가적인 기능을 구현할 수 있습니다. 만약 Service Worker를 사용하지 않는 브라우저에서는 그냥 네트워크 요청을 수행합니다.

결론

MobX를 사용하여 상태 관리를 간편하게 할 수 있고, PWA를 적용하여 웹 앱을 좀 더 진보된 수준으로 개발할 수 있습니다. MobX와 PWA를 함께 사용하면 복잡한 애플리케이션 개발이 더욱 용이해집니다. 추가로 Service Worker를 사용하여 오프라인에서도 상태를 유지할 수 있습니다. MobX와 PWA의 강력한 기능을 활용하여 더 나은 웹 앱을 만들어보세요!

참고자료:

© 2018 Colin. All rights reserved.