세팅하기

리액트/타입스크립트 설치

npm create vite@latest
리액트/타입스크립트 선택

테일윈드 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p (설치하면 tailwind.config.js와 postcss.config.js 설치됨)

postcss.config.js 에는
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js 에는
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};


style.css 파일에는
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

빌드할시
package.json파일에
"scripts": {
  ....
    "build:css": "tailwindcss -i ./src/style/style.css -o ./src/style/outstyle.css"
  },
스크립트에 코드 추가

npm run dev build:css 하면 빌드 됨

수파베이스 설치

npm install @supabase/supabase-js

 

상태관리 설치

npm install react-redux

npm install @reduxjs/toolkit

 

라우팅 설치

npm install react-router-dom