vite-tools

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

Layers

메시지를 보여주거나 redirect를 함수로 할 수 있게 한다. import '@orderlycode/index.css'을 해준다.

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

폴더를 이용한 Router

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

import {createBrowserRouter, RouterProvider} from "react-router-dom";
import {createRouteObjects} from "@orderlycode/vite-tools";

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

routes 폴더

폴더 구조

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

예제

src/routes/layout.tsx

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

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

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 이모티콘 검색