24.09.05 tanstack query, tailwind css, zustand, json-server, axios, supabase 프로젝트 세팅

1. 프로젝트 생성

  

    
    
    
    
  
yarn create vite

 

2. 라이브러리 설치

  

    
    
    
    
  
yarn add tailwindcss postcss autoprefixer json-server axios @tanstack/react-query zustand immer @supabase/supabase-js react-router-dom

 

3. tailwind 세팅파일 생성 및 세팅

  

    
    
    
    
  
npx tailwindcss init -p

  

    
    
    
    
  
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

  

    
    
    
    
  
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

 

4. json-server 파일 db.json 생성

  

    
    
    
    
  
{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

 

5. json-server 구동

  

    
    
    
    
  
yarn json-server db.json --port 4000

json서버를 4000번 포트로 구동한다는 명령

 

6. tanstackQuery 세팅

  

    
    
    
    
  
// main.jsx

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

필요한 option이 있다면 해당 코드의 QueryClient내부에서 설정하거나, useQuery명령안에서 설정한다.

 

7. zustand 세팅

  

    
    
    
    
  
// src > zustand > bearsStore.js
import { create } from "zustand";
import { immer } from "zustand/middleware/immer"

const useCountStore = create(immer((set) => ({
  count: 0,
}))
);

export default useBearsStore;