Skip to content
가이드 문서

데이지 프레임워크

개요

Section titled “개요”
  1. 프런트앤드에서 실제 업무에 적용할 수 있도록 컴포넌트와 예제를 완성도 있게 만들어보기 위한 UI 프로젝트.
  2. Daisy-UI를 베이스로 하고, 이를 확장한 컴포넌트를 늘려나갈 계획이다.
  3. 스토리북을 사용하여 협업할 수 있는 환경을 제공한다.
  4. Pnpm을 사용하여 패키지를 관리한다.
  5. 최신 버전의 라이브러리를 사용하여 변경된 부분에 대하여 선제적으로 습득한다.

Tech Stack

Section titled “Tech Stack”

프로젝트 생성 절차

Section titled “프로젝트 생성 절차”

  1. vite 프로젝트 생성

    Terminal window
    pnpm create vite
    ◇  Project name:
    │  fe-mintchoco-biz
    │
    ◇  Select a framework:
    │  React
    │
    ◇  Select a variant:
    │  TypeScript + SWC
    │
    ◇  Scaffolding project in /home/gangil/dev/workspace/fe-mintchoco-biz...
    │
    └  Done. Now run:
    

    cd fe-mintchoco-biz
    pnpm install
    pnpm run dev

  2. git 저장소 설정

    Terminal window
    cd fe-mintchoco-biz
    git init

  3. 깃허브에 프로젝트 등록

    1. 프런트앤드를 위한 IDE(통합개발환경) Webstorm을 사용한다. 인증 절차를 거치면 쉽게 등록할 수 있다.
      • 메뉴 -> Git -> GitHub -> GitHub에 프로젝트 공유

추가 라이브러리 설치

Section titled “추가 라이브러리 설치”

  • Storybook

    Terminal window
    pnpm create storybook@latest

  • @types/node

    Terminal window
    pnpm install --save-dev @types/node

  • TailwindCSS

    Terminal window
    pnpm install tailwindcss @tailwindcss/vite

  • DaisyUI

    Terminal window
    pnpm add -D daisyui@latest

  • Prettier

    Terminal window
    pnpm add --save-dev --save-exact prettier
    pnpm install -D prettier-plugin-tailwindcss

  • Husky

    Terminal window
    pnpm add --save-dev husky
    pnpm exec husky init

  • Emotion

    Terminal window
    pnpm i @emotion/styled @emotion/react

  • Clsx

    Terminal window
    pnpm i @emotion/styled @emotion/react

  • Dayjs

    Terminal window
    pnpm add dayjs

  • Sass

    Terminal window
    pnpm add sass

  • SweetAlert2

    Terminal window
    pnpm add sweetalert2

  • Uuid

    Terminal window
    pnpm add uuid

  • React Router DOM

    Terminal window
    pnpm add react-router

  • Zustand

    Terminal window
    pnpm add zustand

  • vite-tsconfig-paths

    Terminal window
    pnpm add -D vite-tsconfig-paths

  • vite-plugin-svgr

    Terminal window
    pnpm add -D vite-plugin-svgr

  • Floating UI

    Terminal window
    pnpm add @floating-ui/react

스토리북 기동

Section titled “스토리북 기동”
Terminal window
pnpm run storybook

브라우저에서 스토리북 실행

Section titled “브라우저에서 스토리북 실행”
  1. 로컬
  2. 운영