백오피스를 개발할 때 아키텍처 구성에 대한 질문
3
작성한 질문수 6
감사한 마음으로 강의 잘 듣고 있는 중입니다.
Vue3 + Quasar(UI Framework) + Nuxt3
TypeScript
vee-validate/valibot
으로 프로젝트를 한 경험이 있는데 react는 조금 어렵게 느껴지네요. 아마도 원리를 알려주신다고 리액트 훅들을 직접 만들어서 그런 것 같지만 좋은 것 같습니다. 제가 드리고자 하는 질문은
React + UI Framework + Next
TypeScript
검증 라이브러리
로 유사한 아키덱처로 갈 예정인데
문제가 UI Framework와 검증 라이브러리를 어떤 것을 사용하는 것이 좋을지 몰라서 질문 드립니다. 혹시 추천해주실 UI Framework와 검증 라이브러리가 있나요?
또 한가지는 아무래도 백오피스이므로 데이타 그리드도 중요한데 추천 부탁드립니다.
이전에 사용한 Quasar는 자체 quasar.css를 가지고 있어 웹 접근성이나 sass 작업할 때 너무 힘들었습니다. 질문이 너무 광범위해서 죄송합니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. gaabi1204님, 백오피스 개발에 대한 질문을 해주셨군요!
React 생태계에서 UI Framework와 검증 라이브러리 선택은 프로젝트의 요구사항과 팀의 선호도에 따라 달라질 수 있습니다. 아래에 몇 가지 추천과 자료를 안내드리겠습니다.
UI Framework:
- Material-UI (MUI): React와 잘 통합되어 있는 가장 인기 있는 UI 라이브러리 중 하나입니다. 다양한 컴포넌트를 제공하며, 커스터마이징이 용이합니다.
- Ant Design: UI 컴포넌트가 매우 직관적이고, 백오피스 개발에 적합한 라이브러리입니다.
- Material-UI 사용 예시
- Ant Design 사용 가이드
- Material-UI (MUI): React와 잘 통합되어 있는 가장 인기 있는 UI 라이브러리 중 하나입니다. 다양한 컴포넌트를 제공하며, 커스터마이징이 용이합니다.
검증 라이브러리:
- Formik과 Yup 조합: Formik은 폼 상태 관리를 용이하게 해주며, Yup과 함께 사용하면 강력한 데이터 검증 기능을 제공합니다.
- React Hook Form: 경량의 폼 상태 관리 라이브러리로, 심플한 문법과 빠른 런타임 성능이 특징입니다.
- Formik과 Yup 가이드
- React Hook Form 사용법
- Formik과 Yup 조합: Formik은 폼 상태 관리를 용이하게 해주며, Yup과 함께 사용하면 강력한 데이터 검증 기능을 제공합니다.
데이터 그리드:
- AG-Grid: 매우 강력한 그리드 라이브러리로, 다양한 기능과 퍼포먼스 측면에서 우수합니다.
- TanStack Table (구 React Table): 가벼우면서도 필요한 기능을 쉽게 넣을 수 있는 그리드 라이브러리입니다.
- AG-Grid 자세한 사용 사례
- TanStack Table 가이드
- AG-Grid: 매우 강력한 그리드 라이브러리로, 다양한 기능과 퍼포먼스 측면에서 우수합니다.
백오피스 개발에서는 UI의 일관성, 접근성, 그리고 유지보수성을 고려하는 것이 중요합니다. 참고로, 모든 선택이 개발자의 필요에 따라 다를 수 있으며, 문서를 꼼꼼히 살펴보고 팀의 피드백을 받아 결정하는 것도 방법입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
잘못된 useEffect 사용?
1
68
2
useEffect 의존성 질문
1
62
2
orderableProductItem 에 관하여...
0
63
2
강의 자료, 블로그, 깃 주소
0
68
1
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
1
106
2
pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
1
87
2
FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유
1
123
1
dispatch 함수도 리렌더링 유발하지 않나요?
1
204
2
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
1
161
2
replaceState를 쓰지 않는 대안
1
197
2
setValue 메서드를 바인딩 해야 하는 이유
1
165
2
MyReact를 IIFE(즉시실행함수)로 설계하신 이유
0
211
2
[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교
0
130
1
useRef 관련하여 질문드립니다
0
152
2
렌더 프롭 관련하여 질문드립니다
0
184
2
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
1
395
2
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
1
319
2
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
1
356
2
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
1
282
2
[4.1장 레프 훅] useRef관련 질문이있습니다.
1
334
1
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
1
435
2
[1.3.6 상태정의] state 관련
1
260
1
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
1
278
1
[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.
1
429
2