[TIL] 20240607 - bookstore(6)

import alias - craco

---

Install

npm i -D @craco/craco
npm i -D craco-alias

구조

my-app
  ├── node_modules
+ ├── craco.config.js
+ ├── tsconfig.paths.json
  └── package.json

craco.config.js 파일 생성

const cracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: cracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: ".",
        tsConfigPath: "tsconfig.paths.json",
        debug: false
      }
    }
  ]
};

tsconfig.paths.json 파일 생성 후 tsconfig.json 파일 수정

{
  "compilerOptions": {
  ...
  },
  "extends": "./tsconfig.paths.json",
  "include": [
    "src",
    "craco.config.js"
  ]
}

package.json 파일 수정

{
  ...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },
  ...
}

react-query

---

React-Query는 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리

Install

npm i react-query

queryClient.ts 파일 생성

import { QueryClient } from "react-query";

export const queryClient = new QueryClient();

App.tsx 파일 수정

import { QueryClientProvider } from "react-query";
import { queryClient } from "./api/queryClient";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
    </QueryClientProvider>
  );
};

export default App;

🧊 useQuery

const { data } = useQuery {
  queyrKey,  // Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key
  fetchFn,  // Query 요청을 수행하기 위한 Promise를 Return 하는 함수
  options,  // useQuery 에서 사용되는 Opeion 객체
};

example

const { data: booksData, isLoading: isBooksLoading } = useQuery(["books", location.search], () => 
    fetchBooks({
      ...
    })
  );

@keyframes

---

@keyframes는 CSS 애니메이션 구간을 정하고, 각 구간별 적용할 스타일을 지정

@keyframes 애니메이션이름 {
  0% {    /* from */
  	CSS 속성: 속성값;
  }
  
  100% {  /* to */
  	CSS 속성: 속성값;  
  }
}

svg {
  animation: 애니메이션이름 1s;
}