React + PWA + Vite 프로젝트 시작하기 (feat. tailwind)

이 블로그 글은 내가 PWA 초기 세팅을 까먹지 않기 위해 작성하는 것임.

 

PWA

PWA(프로그래시브 웹 앱)은 크로스 플랫폼 웹 어플리케이션을 생성해준다.

그냥 쉽게 정리하면 리액트 네이티브를 안쓰고 리액트만으로 앱을 만들 수 있는 것임.

 

PWA 사용 이유

캡스톤디자인이 일단 앱으로 해야지 접근성이 좋고 주제와 잘 맞을 것 같아서 앱 개발을 해야 하는 상황임. 그런데 Flutter는 일단 해본 적이 없고 리액트 네이티브는 너무 무겁고 다시 공부해야 되는게 귀찮았음. 무엇보다 안드로이드 스튜디오 이용해서 시뮬레이터 돌리는게 너무  무거워서 쓰고 싶지 않았다. 그래서 우리 프로젝트에는 마이크 기능만 필요하기 때문에 리액트 기반 앱을 만들 수 있는 PWA를 적용하고 자함.

 

 

프로젝트 생성

npm create @vite-pwa/pwa@latest

 

옵션 선택 과정에서 내 개발 환경에 맞게 선택하면 됨.

 

일단 PWA가 제대로 되기 위해서는 로고 이미지를 각 사이즈별로 넣어야됨.

이 이미지들은 나중에 다운로드 받을 때 앱 로고(?) 그런식으로 사용된다.

난 처음에 경로 설정을 잘 못해서 크롬창에서 웹앱 다운로드 버튼이 계속 안떠서 당황했음.

(나는 icons라는 폴더를 따로 파서 그 안에 아이콘 이미지를 넣었기 때문에 src를 /icons/....png 로 했어야 함.(ㅋㅋ))

 

그리고 여기서 당황한게 다른 사람들은 다 manifest.webmanifest 란 파일이 생성되어있던데 나는 안되어있길래 수동으로 만들어줌.

코드는 GPT에게 물어봐서 넣어주었다.

 

{
  "name": "Ddukddak",
  "short_name": "Ddukddak",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#38bdf8",
  "icons": [
    {
      "src": "/icons/pwa-icon-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/pwa-icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/pwa-icon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/pwa-icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/pwa-icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/pwa-icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

 

manifest파일 작성했으면 index.html에 해당 코드를 추가해줌.

    <link rel="manifest" href="/manifest.webmanifest" />

 

 

아이콘 이미지는 보통 이 사이트에서 많이 이미지 전환함.

https://favicomatic.com/

 

 

 

프로젝트 생성했으면 해당 명령어로 필요 패키지 설치해줌

npm install
npm install @vitejs/plugin-react vite-plugin-pwa

 

 

필수 파일 수정

vite.config.js 파일 수정해줌.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: "autoUpdate",
      includeAssets: [
        "favicon.svg",
        "favicon.ico",
        "robots.txt",
        "apple-touch-icon.png",
        "icons/*.png",
      ],
      manifest: {
        name: "Ddukddak App",
        short_name: "Ddukddak",
        start_url: "/",
        display: "standalone",
        background_color: "#ffffff",
        icons: [
          {
            src: "/icons/pwa-icon-48.png",
            sizes: "48x48",
            type: "image/png",
          },
          {
            src: "/icons/pwa-icon-72.png",
            sizes: "72x72",
            type: "image/png",
          },
          {
            src: "/icons/pwa-icon-96.png",
            sizes: "96x96",
            type: "image/png",
          },
          {
            src: "/icons/pwa-icon-144.png",
            sizes: "144x144",
            type: "image/png",
          },
          {
            src: "/icons/pwa-icon-192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "/icons/pwa-icon-512.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      },
    }),
  ],
});

 

 

 

파일 수정하고 이 명령어 입력하면 PWA 확인 가능함.

npm run build
npx serve dist

 

잘 됐는지는 [크롬 개발자모드] → [Application] → [Manifest / Service Workers] 탭에서 확인 가능함.

 

나는 해당 탭에서 <이미지가 정사각형이 아님. 이미지가 형식에 맞지 않음.> 같은 에러가 떠서 경로가 잘못됨을 알고 수정함.

그래서 다운로드 버튼(주소창 즐겨찾기 옆에 생기는 다운로드 버튼)도 활성화가 안되었던 것임.

 

경로를 잘못설정해서 404 에러가 계속 뜸..ㅋㅋ

 

 

성공한다면 이런 화면을 볼 수 있다

 

 

그리고 이런식으로 주소창 즐겨찾기 옆에 다운로드 버튼이 활성화됨

 

 

 

 

번외) Tailwind 설치하기(npx 에러)

 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

이번 프로젝트에서는  Tailwind를 써보고 싶어서 이것도 설치해줌.

모바일 UI를 잡기 쉽다고 해서 적용해보고 싶었다.

 

그런데 일단 npm 명령어까지는 잘 됐는데 npx명령어에서 계속 에러가 뜨는 것임.

에러내용:

npm error could not determine executable to run
npm error A complete log of this run can be found in:

 

계속 이 에러가 떠서 열심히 찾아봤는데 npm 삭제하고 재설치, 파일 삭제 등 여러가지 해봤는데 계속 똑같은 에러가 떴다.

npm install -D tailwindcss@3.4.17 postcss autoprefixer

 

그런데 이 명령어로 tailwind 설치하고 다시 npx tailwindcss init -p  명령어 하니까 제대로 설치되었다.

다들 나처럼 npx 설치가 제대로 되지 않는 다면 이 명령어를 이용해서 npm 설치를 해볼 것!