React Admin Boilerplate

Installation & Run

pnpm install

pnpm dev

storybook

pnpm storybook

cypress

pnpm cypress

• msw와 호환되지 않음

VSCode Extensions

1. Tailwind CSS IntelliSense -> https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
2. ESLint -> https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
3. Prettier -> https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

FSD 폴더 구조

• https://www.youtube.com/watch?v=64Fx5Y1gEOA
• https://emewjin.github.io/feature-sliced-design/?utm_source=substack&utm_medium=email
• https://github.com/yurisldk/realworld-react-fsd/tree/881a4d35faf092d5739d00ef0365e9fe730274f6

• App.tsx
• main.tsx
• pages/
• widgets/
• features/
  • apis/
  • hooks/
  • libs/
  • ui/
• entities/
  • consts.ts
  • contracts.ts
  • types.ts
• shared/
  • components/
  • consts/
  • contracts/
  • hooks/
  • shadcn-ui/
  • stores/
  • typings/
  • utils/

FSD 규칙

1. pages -> widgets -> features -> entities -> shared 순으로 의존성을 갖습니다. 즉, features는 entities를 참조할 수 있지만, entities는 features를 참조할 수 없습니다.
2. features 레이어의 각 slices의 segments는 apis, hooks, libs, ui로 나눕니다.
3. entities 레이어의 각 slices의 segments는 consts, contracts, types로 나눕니다.
4. 배럴 파일을 생성하지 않습니다.