PWA를 이용한 회원관리 앱만들기

오픈카톡으로 배드민턴 동호회 운영도중 회원관리에 어려움이 있어 회원관리를 할수있는 간단한 앱을 만들고자 이 프로젝트를 시작하게 되었다 스터디도 할겸 PWA로 앱을 만들기로 하였습니다

오픈톡방으로 회원관리하는데 있어 가장 어려움이 되었던것은 유령회원을 파악하는 일이었다 다음 기준을 잡고 유령회원 파악을 하려고 합니다.

 

1. 모임 가입후 한달안에 미참여 유저

2. 월 2회 이하 참여 유저

목표

이 프로젝트를 통해  회원관리목적도있지만 개인적인 스터디 목적도 있습니다

1. 회원 데이터를 관리하며 유령회원을 파악

2. nextjs app router 스터디

3. postgre & express 스터디

4. pwa 스터디

 

PWA란

Progressive Web Apps의 줄임말로 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 앱.

 

Skills

nextjs, nodejs, postgresql을 사용하였고

nextjs -> netlify

nodejs, postgresql -> cloudtype 각각 배포하였습니다

 

nextjs로 회원 crud 및 게임참여 crud 기능을 만들어주었습니다

user crud

game crud

 

node js

Get api/user/list

get api/user/list

postgresql

users table

user db

 

PWA

이제 PWA를 만들어볼 차례이다

pnpm add next-pwa

const withPWA = require('next-pwa')({
  dest: 'public',
  // disable: process.env.NODE_ENV === 'development',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  modularizeImports: {
    '@mui/icons-material': {
      transform: '@mui/icons-material/{{member}}',
    },
  },
};

module.exports = withPWA(nextConfig);

next-pwa 를 install 해주고 next.config.json에 다음과같이 설정해준다

 

manifest.json

{
  "name": "이름",
  "short_name": "이름",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#000000",
  "description": "description",
  "orientation": "portrait",
  "scope":"/",
  "start_url": "/",
  "lang": "ko-KR",
  "id": "clubUserManager",
  "icons": [
      {
          "src": "icons/icon-128x128.png",
          "sizes": "128x128",
          "type": "image/png",
          "purpose": "any"
      },
      {
          "src": "icons/icon-144x144.png",
          "sizes": "144x144",
          "type": "image/png",
          "purpose": "any"
      },
      {
          "src": "icons/icon-152x152.png",
          "sizes": "152x152",
          "type": "image/png",
          "purpose": "any"
      },
      {
          "src": "icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "any"
      },
      {
          "src": "icons/icon-256x256.png",
          "sizes": "256x256",
          "type": "image/png",
          "purpose": "any"
      },
      {
          "src": "icons/icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "maskable"
      }
  ]
}

manifest.webmanifest 파일로 저장한뒤 src/app 에 위치시키면 nextjs에서 manifest파일을 알아서 인식한다

 

app/layout.tsx 에 다음 정보도 넣어주고 

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1.0,
  themeColor: 'black',
};

export const metadata: Metadata = {
  icons: {
    other: [
      {
        rel: 'alternate icon',
        url: '/favicon.ico',
        type: 'ico',
        sizes: '16x16',
      },
      {
        rel: 'apple-touch-icon',
        url: '/icons/apple-touch-icon.png',
        sizes: '180x180',
      },
    ],
  },
};

해당 아이콘들은 public/icons 에 넣어주었다

 

lighthouse에서 progressive web app 을 한번 해보면 다음과 같이 나오면 성공이다

APP 제작

PWA builder https://www.pwabuilder.com/ 를 이용해 본인의 application을 App으로 build 시킬수 있다