[React 프로젝트 기술 스택 및 초기 설정]

[React 프로젝트 기술 스택]

React

• Vite
• JavaScript

CSS

• tailwind

라이브러리

• 타입 체크 : prop-types
• 애니메이션 : framer-motion
• 통신 : TanStack Query
• 불변성 관리 : immer
• 상태 관리: Zustand

데이터베이스

• pocketbase
• pocketHost

SDK

• pocketbase

배포

• Vite(github pages)

---

[초기 설정]

package.json

  "dependencies": {
    "@tanstack/react-query": "^4.33.0",
    "@tanstack/react-query-devtools": "^4.33.0",
    "framer-motion": "^10.16.2",
    "immer": "^10.0.2",
    "pocketbase": "^0.17.3",
    "prop-types": "^15.8.1",
    "ramda": "^0.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-router-dom": "^6.15.0",
    "zustand": "^4.4.1"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^4.34.1",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vheemstra/vite-plugin-imagemin": "^1.0.11",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^10.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-svgo": "^10.0.1",
    "imagemin-webp": "^8.0.0",
    "postcss": "^8.4.29",
    "postcss-import": "^15.1.0",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.5"
  }

tailwind 설정

/* tailwind.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* import './styles/tailwind.css' */
/* tailwind.css 파일 생성 후 최상위 main.jsx 파일에서 import */

/* tailwind.config.js */
content: ["./index.html", "./src/**/*.jsx"],

절대 경로 설정

/* vite.config.js */
resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
},

/* jsconfig.json */
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    }
  }
}

eslint

module.exports = {
  root: true,
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react/prop-types': 'warn',
    'no-unused-vars': 'warn',
    'react-refresh/only-export-components': [
      'off',
      { allowConstantExport: true },
    ],
  },
};

prettier

module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: 'always',
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: 'css',
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: 'preserve',
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: 'as-needed',
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: 'es5',
  // 탭 사용 여부
  useTabs: false,
};

//settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",