1. Vite로 React PWA 시작하기

npm create @vite-pwa/pwa@latest [프로젝트 이름] --template react

• generateSW와 injectManifest

2. npm 패키지 설치

cd [프로젝트 이름]

npm i

3. SWC 세팅

https://swc.rs/docs/getting-started

• 설치: npm i -D @swc/cli @swc/core
• default config은 아래와 같다.

.swcrc

{
 "$schema": "<https://swc.rs/schema.json>",
 "jsc": {
 "parser": {
 "syntax": "ecmascript",
 "jsx": false,
 "dynamicImport": false,
 "privateMethod": false,
 "functionBind": false,
 "exportDefaultFrom": false,
 "exportNamespaceFrom": false,
 "decorators": false,
 "decoratorsBeforeExport": false,
 "topLevelAwait": false,
 "importMeta": false
 },
 "transform": null,
 "target": "es5",
 "loose": false,
 "externalHelpers": false,
 // Requires v1.2.50 or upper and requires target to be es2016 or upper.
 "keepClassNames": false
 },
 "minify": false
}

출처: https://swc.rs/docs/configuration/swcrc/

• Babel이 아닌 SWC를 선택한 이유

4. Prettier, Eslint 설치 및 세팅

설치: npm install --save-dev prettier

• 아래는 내가 임의로 작성한 config, prettier options 공식 문서 참고해서 커스텀 가능

.prettierrc.cjs