반응형
Overview
React로 개발 시 디자인을 무에서 유를 창조하기에는 힘들다.
이런 힘듬을 보완하기 위해 CSS Framework인 MUI를 사용하여 Ui 구성요소를 살펴보고 사용해보기로 한다.
Example
아래의 예제를 셋팅해서 띄워보고 컴포넌트들을 살펴보자.
https://github.com/marmelab/material-ui-react-admin?tab=readme-ov-file
https://marmelab.com/react-admin/Features.html
https://marmelab.com/react-admin/CreateReactAdmin.html
CreateReactAdmin
- CSS Framework를 통해 우선적으로 개발 진행
- 여러가지 Framework가 있지만 우선 아래의 Framework를 사용해보자.
- https://marmelab.com/react-admin/CreateReactAdmin.html
- 특징
- 게시판 형태의 기능을 구현하는데 있어서 빠르게 구현이 가능
- 이미 만들어져있는 기능들이 많음
- 상태관리 등 제대로 된 소스 관리가 힘들다면 사용해도 좋을것 같음
- 단, React 기능을 실습을 통해 강화 할 수 없음.
- 이미 만들어져있는 기능들이 많음
- Spring Framework처럼 Framework를 학습 해야 함.
- 해당 Framework를 사용하되 React 학습도 병행 해야 제대로 사용이 가능 함. → 시간 투자 필수!
- 게시판 형태의 기능을 구현하는데 있어서 빠르게 구현이 가능
- 결론
- 프론트엔드를 밑바닥부터 만들면서 기술을 익히면 좋겠지만 시간이 너무 많이 소요 됨.
-
-
- 제대로 만들려면 많은 시간이 필요함 → 일단 CreateReactAdmin Framework를 사용해서 전반적인 기술을 익히면서 개발 진행
-
빠르게 만들수 있어서 적용해보았음!
지금은 전체가 보이는데 다음 단계로 네이버 로그인을 해서 해당 로그인 업체가 자기 상품들이 보이도록 해야 한다.
상품은..배치가 필요해보인다. 발주기능을 처리할 때마다 상품 업데이트를 하려고 보니..정합성이 깨진다.
배치가 처리 할 때 업데이트 된 친구들만 처리해야한다.
즉, 체크 후에 상품 업데이트를 해야하는 것들만 처리!
Next Step으로 네이버 로그인 기능이 필요하다.
풀 스택 가즈아~~~
반응형
'Front > React.js' 카테고리의 다른 글
11) ENS Project - Naver 로그인을 구현해보자! (0) | 2024.11.08 |
---|---|
9) ENS Project - 프론트엔드 후딱 학습하기(React Deep Dive!!) (1) | 2024.10.31 |
8) ENS Project - 프론트엔드 후딱 학습하기(리액트 컴포넌트, JSX, 속성, 상태) (1) | 2024.10.15 |