React Guide는 Vuejs 개발자가 React를 배우면서 겪는 경험을 코드로 구성해본 공간입니다. reactease 기반으로 분석하면서 실제 프로젝트에 도입할 수준까지 예제를 포함해서 만들어 보는 것을 목적으로 합니다. 처음에는 UnoCSS를 도입한 React를 사용하고 싶어 시작했습니다. 그렇게 하나 둘 프로젝트를 수행하기 위해 필요한 것들을 추가하다 보니 평소에 서비스 구축을 위해 만들었던 프레임워크 수준으로 만드는 것을 목표로 진행하게 되었습니다. 서비스 개발을 할 때에는 실제적으로 필요한 것이 많습니다. React 기반으로 라이브러리 들을 한번 씩 만들어 보면서 적용해 보왔습니다.
- ⚡ Vite, pnpm
- 🔥 React
- ⚓ React Router
- 🎨 Unocss
- 🏠 Valtio, Redux와 같은 상태 관리 라이브러리
- 🎈 Iconify for icons（Icon sets)
- 💪 TypeScript
- 🚀 Using vite-plugin-react-swc, faster.
- 😋 ESLint with @antfu/eslint-config
- 📁 File path alias (
'~/*'->src/*) - 📱 Blueprint, React 기반 UI toolkit
- ofetch, fetch를 좀 더 좋게!
- json-server, 빠르고 편한 mock 서버
- Layout:
~/layout - Blueprint 추가하고 레이아웃에 적용
- Dark mode 적용
- SCSS 도입하고 관련 디렉토리 구성 (
~/assets/styles/)- preload: SCSS 변수 파일 vite.config에 적용
- fetch 전용 도구 선정 및 Interceptor 예제
- ofetch 선정 및 예제 구성, hooks 디렉토리 내 인터셉터 포함된 Wrapper 구성
pnpm mock로 mock 전용 json-server 실행
- 쓸만한 UI Component Library 도입
- Blueprint 도입 (관리자 페이지와 같이 개발자 style의 화면을 만드는데 도움이 될 듯)
- Food Action 서비스 예제
unocss는 tailwindcss의 기능을 가지면서 확장된 기능을 추가로 가진 훌륭한 라이브러리입니다. You can use many atomic css features by using the UnoCSS Packages
-
presetAttributify
<h2 m="x-2 y-1" bg="gray-400 hover:gray-200" text="2xl primary" font="base bold" > Attributify Mode </h2>
-
presetWind Integrated some features of TaildwindCSS and WindiCSS.
<!-- lt-sm means screen less then 640px --> <div className='lt-sm:bg-red-200 at-sm:gray-400 sm:bg-blue-200'></div>
-
transformerVariantGroup
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>
- Nodejs 최신 버전을 설치합니다. (v18 이상)
- pnpm을 설치합니다.
- 해당 Repository를 클론 합니다.
# 개발 환경 실행하기
$ pnpm i
$ pnpm dev
# mock 서버 실행하기 (json server 기반)
$ pnpm mock아래를 실행 한 후에, http://localhost:3333 로 들어오면 됩니다.
pnpm dev
아래를 실행하면 빌드 됩니다. (배포 전 빌드를 수행해서 문제가 없는지 확인하는 것도 좋습니다.)
pnpm build
github 연동을 통해 netlify 로 생성된 페이지를 배포 할 수 있습니다.