메모, 리마인더, 할일 웹앱 MEMOKU 만든 후기

이직하고 얼마 지나지 않았을 때, 히스토리가 파악이 안되었는데 여러 일을 진행해야 되었을 때가 있었음.

헤매면서 여러 일을 처리하려니, 정리가 안되어서 메모장에 할일을 적어가면서 했는데,

갑자기 이 메모장을 내가 만들고 싶어짐. 그래서 만듬ㅋ

MEMOKU 사용자가 많아지면 SaaS(서비스형 소프트웨어, Software as a Service)로 만들 망상함.

API도 만들어야 될거고, 첫로드도 빨라보이게 하고 싶고, SEO도 중요해질테니 SSR 지원하는 Nuxt3 선택

(정확히는 Universal Rendering 이라고 함)

1. Nuxt 공식홈페이지에서 알려주는 방법대로 프로젝트 시작

다른 개인 프로젝트에서도 Nuxt3를 쓰고있는게 몇개 있어서, 용량아낄 요량으로 pnpm으로 설치.

pnpm dlx nuxi@latest init <project-name>

2. Css양 많아질것 같으므로, TailwindCss 적용

// nuxt.config.ts
{
//...
postcss: {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
//...
}

3. 일단 브라우저의 기능 indexedDB로 로컬에 저장할거라, 잘 매핑해놓은 dexie 라이브러리 설치

// package.json
{
//...
  "dependencies": {
    "dexie": "^3.2.4",
    //...
  }
//...
}

4. 필요한 라이브러리(pinia, chart.js...) 설치하고, 전체적인 레이아웃 짜고... 계속 코딩(이 때가 제일 재밌는듯)

<!-- LayoutBasic.vue -->
<template>
  <div
    class="flex | w-screen h-dvh overflow-hidden"
    :class="storageStore.getThemeClass('bg-white', 'bg-slate-900')">
    <BulkButtons v-if="route.query.bulk" />
    <SNB />
    <div class="right-area | flex flex-col | h-full w-full overflow-hidden">
      <slot name="header"><Header /></slot>
      <main
        id="scroll-area"
        ref="scrollArea"
        class="flex flex-col | h-full"
        :class="lockScrollClass"
        @scroll="checkShowScrollTop">
        <slot />
      </main>
      <nav class="relative">
        <FloatingButtons
          v-if="!route.query.bulk"
          :is-show-scroll-top="isShowScrollTop"
          @scroll-top="scrollTop">
          <slot name="actions" />
        </FloatingButtons>
        <BottomAppBar />
      </nav>
    </div>
  </div>
</template>

5. netlify에서 nuxt 앱 서비스 가능하므로, 바로 업로드

6. 오프라인으로도 동작하고, push도 사용하고, 앱처럼 만들고 싶으니 PWA 세팅

// nuxt.config.ts
{
  // ...
  pwa: {
    registerType: 'autoUpdate',
    strategies: 'injectManifest',
    filename: 'service-worker.js',
    manifest: {
      id: '/',
      name: 'MEMOKU',
      short_name: 'MEMOKU',
  // ...
}