# mui

React Hook Form 이용해서 MUI 컴포넌트 제어하기
오늘은 React Hook Form 라이브러리를 이용해서 MUI와 같은 UI 라이브러리 컴포넌트를 제어하는 방법을 같이 나눠보려고 합니다.우선 React Hook Form 라이브러리에 대한 개념 없이 MUI 컴포넌트를 제어하는 방법을 찾기까지 너무 힘들었습니다.. 💩

React-hook-form + MUI append input focus
React-hook-form + Mui 환경에서 useFieldArray가 제공하는 append 시 자동 focus 구현하기

💻TIL 23.05.22
Theme에는 공통으로 사용하는 스타일 내용을 정의해둔 Object이다. 위와 같이 theme의 palette에 색을 정의를 해두고 mui component를 사용할 때 필요한 color를 palette에서 꺼내 쓰는 것이다.또한 Typography의 스타일을 정의 할

MUI: The value provided to Autocomplete is invalid
MUI AutoComplete에서 발생하는 'The value provided to Autocomplete is invalid. ' 에러 해결 과정
[MUI] DataGrid selectionModel 초기화 설정
MUI의 DataGrid에서 선택된 row를 버튼 클릭이나 기타 이벤트 후에 초기화 하려고 사용하는 코드이다. selectionModel을 설정하면 dataGrid에서 선택된 rows의 상태를 변경하고, 값을 가져올 수 있다.참조https://codesandb

[헬린이 어플리케이션 개발] Mui bottom Navigation에 Link 연결
Mui 공식문서를 찾아보면, 에 component이 있다. 즉, component 속성을 Link로 가져가고, to 속성에 타켓 주소를 입력하면 될 것 이다.

Nextjs Emotion Cmponent Selector ( + SWC, MUI )
현재 Nextjs v13 + Next compiler(SWC)을 사용Emotion을 사용하며, MUI에 추가적인 Style을 Wrapping하여 사용@emotion/babel-plugin의 components as selectors 기능을 사용하기 위해 MUI문서에선

[React] Mui Custom theme
프로젝트에 일관되게 적용시켜줄 색상, 투명도, 그림자 상태 등을 theme로 정의Mui는 light theme type이 기본 값.theme 생성createTheme() - >theme 객체 반환theme 속성palette: 색상 정보PrimarySecondaryErr

💻 TIL 23.03.16
처음으로 진행해보는 migration이라서 어떻게 시작할지 막막해서 계획을 세워보기로 했다.현재 우리 페이지는 auth.xxx.com, learn.xxx.com, main.xxx.com, admin.xxx.com 4개로 이뤄져있다.같은 NavBar를 사용하는 learn
[Mui]Warning: Failed prop type 에러
Warning: Failed prop type: The prop nodeId is marked as required in ForwardRef(TreeItem2), but its value is undefined.treeItem을 클릭하고 nodeId를 받아오기전까지 n

[MUI] Text inside CircularProgress
MUI의 CircularProgress 안에 loading 글자 넣기참조https://stackoverflow.com/questions/43420540/text-inside-circular-progress-of-material-ui

[프로젝트]우산대여 키오스크 - 2 (구현)
막대그래프를 효과적으로 나타내기 위해 d3.js 라이브러리 사용d3 라이브러리란?데이터 기반의 시각화를 도와주는 라이브러리chart.js 와 고민했으나 내가 원하는 디자인과 애니메이션, 자유도를 하기엔 이미 구현되어있는 것을 쓰는 느낌이라 raw data를 다룰 수 있

💻 TIL 23.02.22
✅ 문제 작년 말에 참여했던 KB IT's Your Life에서 만들었던 감성숙소 추천 웹 사이트를 리팩토링 계획을 세우고 진행하려 한다. 리팩토링에서 해야할 과제 코드 개선 1달동안 프로젝트를 하나 진행해야하는데 프론트를 혼자 맡게 되어서 급하게 코

TIL38-01 MUI 사용하기
MUI는 리액트의 라이버리이며 사용법이 비교적 간단하고, 다양한 기능의 UI를 가져다 쓸 수 있다. 아래 설치 페이지 링크로 가면 설치 코드를 확인할 수 있다. MUI 설치 페이지MUI 패키치 설치프로젝트를 통해 switch ui를 사용해보았다.아래 화면처럼 '<

💻 TIL 2023.02.18
✅ 문제 Next Js로 개발하던 중 mui를 사용하자 오류가 발생함 처음 렌더시에만 오류가 뜨고 화면에 UI가 나타난 뒤에는 문제없이 작동함 🔍 원인 파악 크롬의 성능 테스트를 통해 알아 봤을 때 mui의 CSS적인 부분에서 오래 걸린다고 생각했다. ❗️