this-is-blog
백오피스 및 관리자 사이트를 제작하는데 도움이 되는 라이브러리를 리서치 또는 직접 사용해 본 도구들을 모아서 정리하였습니다.
* ⭐️ 평점 : 제일 프로젝트에 적용하면 좋아보이는 기술이 가장 높은 별점으로 1점부터 3점까지 존재한다.
1. 디자인 프레임워크
1. Chakra UI ⭐️
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
chakra-ui.com
장점 : 디자인이 제일 최신 느낌, 커스텀 훅을 제공하는데 clipboard, outsideClick 과 같은 쓸만한게 꽤 있음
단점 : 백오피스에서 필요할 수 있는 트리선택자, 캘린더, 타임라인과 같은 패키지는 직접 구현해야함
2. Antd ⭐️⭐️
Ant Design - The world's second most popular React UI framework
Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.
ant.design
장점 : 제공되는 기본 컴포넌트가 매우 많다, 깃허브 스타 개수도 많다
단점 : 네모난 디자인이 기본으로 제공되고 커스텀하기 위해서는 별도 global.css 파일을 생성해서 스타일을 덮어씌워야함
3. Blue print ⭐️⭐️⭐️
Blueprint – Documentation
blueprintjs.com
장점 : 백오피스 특화로 사용할만한 기본 컴포넌트들이 매우 많다, 엑셀형태의 테이블 컴포넌트가 기본 제공된다, hotkey 기능을 잘 활용하면 사용자 업무생산성 향상이 기대됨
단점 : 공식 문서도 잘 되어있고 스타수는 많지만 아무도 써본 사람이 없을 확률이 높아 괜찮은 툴인지는 써보면서 검증해야함
4. Rsuite ⭐️⭐️
Home
A suite of React components, sensible UI design, and a friendly development experience.
rsuitejs.com
Blue print 처럼 기본 컴포넌트들이 어드민에서 쓰기 좋아 보이는 것들이 많음
2. 테이블
1. React Tables ⭐️⭐️⭐️
TanStack Table | React Table, Solid Table, Svelte Table, Vue Table
Headless UI for building powerful tables & datagrids with TS/JS, React, Solid, Svelte and Vue
tanstack.com
장점 : React Query 만든 회사랑 같은 회사, 필터, 페이지네이션 및 그룹화 등 기본 기능이 많이 포함되어있음, 무료
단점 : 러닝커브가 있음
2. Ag Grid ⭐️⭐️⭐️
Data Grid: AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
AG Grid is a feature rich datagrid designed for the major JavaScript Frameworks. Version 28. 2. Download v28 of the best Data Grid in the world now.
www.ag-grid.com
장점 : React Tables 보다 훨씬 더 많은 테이블 기능을 제공함, 엑셀처럼 키보드 인터랙션 필요한 경우 좋음
단점 : 러닝커브가 있음, Enterprise 버전(유료)인 경우 쓸 수 있는 기능 제한이 있어서 얼마만큼의 기능이 필요한지 미리 고려 필요
3. React Virtualized ⭐️⭐️
https://github.com/bvaughn/react-virtualized
GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular data
React components for efficiently rendering large lists and tabular data - GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular data
github.com
장점 : 가상 테이블 관련해서는 유명한 라이브러리임
단점 : 키보드 인터랙션, 필터링, 페이지네이션 등의 기능은 전부 개발자가 구현해야해서 작업속도가 느릴 것으로 예상됨
3. 차트
1. Recharts ⭐️⭐️
https://recharts.org/en-US/
2. Antd Charts ⭐️⭐️
Ant Design Charts
AntV react component library
charts.ant.design
장점 : Antd 랑 통합해서 사용하면 좋을 것 같음
15 Best React Chart Libraries in 2022 | Technostacks
Find out here the most popular and best react chart libraries for your web projects in 2022.
technostacks.com
4. 상태관리
1. Zustand ⭐️⭐️
GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React
🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.
github.com
5. 디자인 영감
# 키워드 : backoffice admin
1. 별점 ⭐️ 목록
269 Admin Admin Templates and Email Templates
Download All 269 “admin” admin templates and email templates unlimited times with a single Envato Elements subscription.
elements.envato.com
2. 별점 ⭐️⭐️ 목록
Browse thousands of Admin images for design inspiration | Dribbble
Cryptocurrency Admin Dashboard: Analytics UX
dribbble.com
Admin Projects | Photos, videos, logos, illustrations and branding on Behance
www.behance.net
요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.
www.pinterest.co.kr
'개발 팁 > 사이트 모음' 카테고리의 다른 글
| 프론트엔드 개발에 도움되는 사이트 모음 (0) | 2022.11.20 |
|---|
댓글