React_Vite 환경 설정

테킷 멋쟁이사자처럼 React

• 테킷 멋쟁이사자처럼 React
  • 환경 설정
    • vite 설정
    • tailwind 설치
    • react router 설치
    • posketbase 설치_backend server
    • posketbase 설치_SDK
    • 절대 경로 설정

환경 설정

vite 설정

pnpm create vite@latest 폴더명
cd 폴더명
react => JavaScript 선택

CSS 결정 css || css module || tailwind || scss

tailwind 설치

pnpm add -D tailwindcss postcss autoprefixer postcss-import
pnpm tailwindcss init -p

/* 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"];

react router 설치

pnpm add react-router-dom

posketbase 설치_backend server

https://pocketbase.io/docs/

OS에 맞는 파일 다운로드 후 압축 풀고 프로젝트 폴더에 최상단에 위치 (폴더명은 pocketbase로 변경)

/* package.json */
"pocketbase": ".\\pocketbase\\pocketbase serve"

posketbase 설치_SDK

pnpm add pocketbase

절대 경로 설정

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

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