Dev Diary 💻

Intro안녕하세요. 이번시간에는 React MUI에서 anchorEl 란 무엇이며 사용 이유에 대해 알아보겠습니다.  anchorEl ?Material-UI (MUI)에서 팝오버(Popover)나 메뉴(Menu)와 같은 컴포넌트에서 사용되는 속성으로, 팝업의 위치를 지정하는 역할을 합니다. 이 속성은 팝업이 열릴 위치의 기준이 되는 요소(Element)를 지정합니다. 주요 컴포넌트에서의 anchorEl 사용1. PopoverPopover 컴포넌트는 기준 요소인 anchorEl의 위치를 기준으로 화면에 표시됩니다. The content of the Popover. 2. MenuMenu 컴포넌트는 주로 네비게이션 또는 드롭다운 메뉴를 만들 때 사용됩니다. anchorEl을 통해 메뉴가 나타날 위치를 지정..

Intro안녕하세요. React에서 MUI의 TextField를 사용하던 도중 아래와 같은 에러가 발생하였습니다.   Input elements should have autocomplete attributes (suggested: "current-password")   How to solve problem해당 에러가 발생한 이유는 autocomplete 속성을 명시하지 않아서입니다.  autoComplete 속성이란  폼 필드에 브라우저의 자동 완성 기능을 사용할지 여부를 지정합니다. 브라우저는 종종 사용자가 이전에 입력한 데이터를 기억하고, 유사한 입력 필드가 나타날 때 이를 자동으로 완성합니다. 예를 들어, 사용자가 이전에 입력한 이메일 주소나 사용자 이름을 기억하여 다음에 해당 필드에 다시 입력할..

Intro안녕하세요. 이번 시간에는 MUI Dialog Component 에서 화살표 키 (PgUp, PgDn) Internal scroll 을 추가하는 방법에 대해 알아보겠습니다. Mui Dialog Component Open full-screen dialog Sound save  MUI Full Dialog 예시는 다음과 같습니다. 위 코드 활용 시에 기본적으로 화살표 방향키 스크롤이 작동하지 않습니다. PgUp, Pg..

Intro 안녕하세요. 이번 시간에는 MUI Typography Component 에서 variant 속성을 커스텀 하는 방법에 대해 알아보겠습니다. MUI Typography variant Typography 의 기본 variant 속성은 다음과 같습니다. h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2 가 있습니다. 이 외에도 직접 커스텀하여 variant를 추가하고 싶을 때가 있을 겁니다. const theme = createTheme({ components: { MuiTypography: { defaultProps: { variantMapping: { h1: 'h2', h2: 'h2', h3: 'h2', h4: 'h2', h5: 'h2', ..

Intro 안녕하세요. 이번에 MUI 기반 회사 홈페이지 개발 업무를 지원하여 맡게 되었습니다. mui 를 사용하다보면 아래와 같은 소스코드를 많이 볼 수 있습니다. theme.spacing(1) 처음에는 2px인가 싶었는데, 2px이 아니더라고요. theme.spacing(2) 의미 Material-UI (mui) 에서 1은 theme.spacing(1)과 같은 의미를 갖습니다. 보통 theme.spacing()은 테마 설정에 따라 다르지만, 기본적으로 8px을 반환합니다. 1은 기본적으로 8px을 나타내며, 2는 16px, 3은 24px, ... 와 같이 8px 간격으로 증가합니다. 그렇다면 픽셀 커스텀이 불가능한가? 커스텀도 가능합니다. createTheme() 함수를 사용하여 수정할 수 있습니다...

Intro 안녕하세요. 이번시간에는 Next의 Link와 MUI(Material-UI)의 Link 차이점에 대해 알아보겠습니다. Next의 Link와 MUI(Material-UI)의 Link Next.js + React + MUI 조합으로 개발경험이 있으신 분들이 꽤 있으실 텐데요, 개발하다보면 Link 컴포넌트를 거의 필수로 사용하게 됩니다. Next.js와 MUI 에는 공통으로 Link 컴포넌트가 들어있습니다. 보통 자동 IDE 툴을 사용하면 자동으로 import 하는 경우가 많은데요, 꼭 확인하고 import를 하셔야 합니다. Next.js의 Link와 MUI(Material-UI)의 Link는 목적이 다른 요소이기 때문입니다. Why? Next.js의 Link 컴포넌트 Next.js의 Link 는..