vite-tools

vite 개발시 도움될만한 것들을 모아둠

pnpm install @orderlycode/vite-tools react-router-dom
mkdir src/routes

Layers

메시지를 보여주거나 redirect를 함수로 할 수 있게 한다.

레이아웃에 <Layers />을 추가해준다.

폴더를 이용한 Router

Next.js app router와 거의 비슷하게 만들어놨다. routes 폴더를 기준으로 라우팅하려면 아래와 같이 만들면 된다.

import {createBrowserRouter, RouterProvider} from "react-router-dom";
import {createRouteObjects} from "@orderlycode/vite-tools";
import {Suspense} from "react";
import ReactDOM from "react-dom/client";
import React from "react";
import "@orderlycode/vite-tools/index.css"
import "./index.css"

const routes = import.meta.glob(
  "./routes/**/{layout,page,loading,not-found,error}.tsx",
  {import: "default"},
);
const router = createBrowserRouter(createRouteObjects(routes, "./routes"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RouterProvider router={router} />
    </Suspense>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

routes 폴더

폴더 구조

• (test) -> url에 안들어가는데 그룹핑 가능
• [id] -> usePathParam('id')로 조회가능
• 이외 모든 폴더는 그대로 url에 반영됨

예제

src/routes/layout.tsx

import {Layers, LayoutProps} from "@orderlycode/vite-tools";

export default function Component({children}: LayoutProps) {
  return (
    <>
      {children}
      <Layers/>
    </>
  );
}

src/routes/error.tsx

import {ErrorProps} from "@/utils/routes/ErrorProps.ts";

export default function Component({error}: ErrorProps) {
  return (
    <div>
      <div>{import.meta.url}</div>
      <pre>{error.stack}</pre>
    </div>
  );
}

다른 파일들

export default function Component() {
  return (
    <div>{import.meta.url}</div>
  );
}

helpers

• /test?a=1 -> useQuery('a') === '1', useURLSearchParams().get('a') === '1'
• /[id] + /123 -> usePathParam('id') === '123'
• /test + /test -> usePathname() === '/test'

참고자료

• favicon 생성기
• flat icon (아이콘 다운)
• emojipedia 이모티콘 검색