백오피스를 개발할 때 아키텍처 구성에 대한 질문
36
작성한 질문수 6
감사한 마음으로 강의 잘 듣고 있는 중입니다.
Vue3 + Quasar(UI Framework) + Nuxt3
TypeScript
vee-validate/valibot
으로 프로젝트를 한 경험이 있는데 react는 조금 어렵게 느껴지네요. 아마도 원리를 알려주신다고 리액트 훅들을 직접 만들어서 그런 것 같지만 좋은 것 같습니다. 제가 드리고자 하는 질문은
React + UI Framework + Next
TypeScript
검증 라이브러리
로 유사한 아키덱처로 갈 예정인데
문제가 UI Framework와 검증 라이브러리를 어떤 것을 사용하는 것이 좋을지 몰라서 질문 드립니다. 혹시 추천해주실 UI Framework와 검증 라이브러리가 있나요?
또 한가지는 아무래도 백오피스이므로 데이타 그리드도 중요한데 추천 부탁드립니다.
이전에 사용한 Quasar는 자체 quasar.css를 가지고 있어 웹 접근성이나 sass 작업할 때 너무 힘들었습니다. 질문이 너무 광범위해서 죄송합니다.
답변 3
0
안녕하세요 gaabi1204님, 제가 너무 늦게 확인했네요. 많이 기다리셨을텐데 이제야 답변드려서 정말 죄송합니다.
리액트 기반으로 백오피스를 개발하셔야하는 상황인 것 같네요. 회사 표준 기술스택이 없다면 오픈소스 라이브러리를 적극 활용하시게 될텐데, 무엇을 선택할지 고민이 많으실 것 같아요.
저는 이런 상황에 보통 대중적인 Ant Design이나 Material UI을 사용하긴 합니다. 가장 많이 쓰이고 있고 자료도 많아서 무난하게 사용했던 것 같습니다. 특히 라이브러리를 선택할 때는 문서나 커뮤니티의 트러블슈팅 자료가 많은 게 문제 해결에 도움이 되었어요. 어려움을 겪으셨던 Quasar는 아직 사용해 보지 않아서 정확한 답변을 드리기 어려울것 같습니다.
검증 라이브러리도 Formik이나 React Hook Form을 이용하면 대부분의 요구사항을 구현하실 수 있을 거에요. 추후 스키마 기반의 검증 구조(yup, zod 등)로 전환하실 수도 있구요.
답변이 충분한지 모르겠네요. 라이브러리 선택에서 가장 중요한 건 안정성이라고 생각합니다. 사용자 층이 많고 관련 트러블슈팅 자료가 충분하다면 바꾸지 않고 오랫동안 사용할 수 있었던 것 같았어요.
0
질문 전에 자료를 찾아보고 질문을 했는데 역시 AI 답변은 한결같네요.
Quasar를 사용할 때 css 문제로 힘들었는데 Material UI도 비슷할 것 같은데 괜찮을까요?
AI 답변보다 지식공유자님 답변 좀 부탁드립니다.
-1
안녕하세요, 인프런 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
86
2
useEffect 의존성 질문
1
79
2
orderableProductItem 에 관하여...
0
78
2
강의 자료, 블로그, 깃 주소
0
80
1
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
1
117
2
pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
1
98
2
FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유
1
128
1
dispatch 함수도 리렌더링 유발하지 않나요?
1
208
2
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
1
166
2
replaceState를 쓰지 않는 대안
1
202
2
setValue 메서드를 바인딩 해야 하는 이유
1
170
2
MyReact를 IIFE(즉시실행함수)로 설계하신 이유
0
220
2
[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교
0
136
1
useRef 관련하여 질문드립니다
0
155
2
렌더 프롭 관련하여 질문드립니다
0
187
2
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
1
398
2
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
1
324
2
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
1
360
2
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
1
287
2
[4.1장 레프 훅] useRef관련 질문이있습니다.
1
339
1
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
1
443
2
[1.3.6 상태정의] state 관련
1
264
1
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
1
284
1
[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.
1
440
2