고물상 지식

https://www.jetbrains.com/ko-kr/webstorm/ WebStorm: JetBrains가 만든 JavaScript 및 TypeScript IDE www.jetbrains.com

https://mui.com/material-ui/customization/theme-components/ Themed components - Material UI You can customize a component's styles, default props, and more by using its component key inside the theme. mui.com 1. 기본값 재설정 const theme = createTheme({ components: { // Name of the component MuiButtonBase: { defaultProps: { // The props to change the default for. disableRipple: true, // No more ripple..

https://mui.com/material-ui/customization/transitions/ Transitions - Material UI These theme helpers allow you to create custom CSS transitions, you can customize the durations, easings and more. mui.com 1. 테마 설정 createTheme({ transitions: { duration: { shortest: 150, shorter: 200, short: 250, // most basic recommended timing standard: 300, // this is to be used in complex animations complex: 37..

https://mui.com/material-ui/customization/z-index/ z-index - Material UI z-index is the CSS property that helps control layout by providing a third axis to arrange content. mui.com 1. 테마 설정 createTheme({ zIndex: { mobileStepper: 1000, fab: 1050, speedDial: 1050, appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 } }); 2. 적용 ...

https://mui.com/material-ui/customization/breakpoints/ Breakpoints - Material UI API that enables the use of breakpoints in a wide variety of contexts. mui.com 1. 테마 설정 createTheme({ breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, }, }, }); 2. 임의 명칭 사용 createTheme({ breakpoints: { values: { mobile: 0, tablet: 640, laptop: 1024, desktop: 1200, }, }, }); ... ... declare modul..

https://mui.com/material-ui/customization/palette/ Palette - Material UI The palette enables you to modify the color of the components to suit your brand. mui.com 1. 테마 색상 설정 createTheme({ palette: { primary: lime, secondary: purple, contrastThreshold: 4.5, // 접근성 배경, 텍스트 명도대비 4.5 :1 자동계산 }, });

https://mui.com/material-ui/customization/typography/ Typography - Material UI The theme provides a set of type sizes that work well together, and also with the layout grid. mui.com 1. 전역 설정 createTheme({ typography: { fontFamily: [ '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbo..

https://mui.com/material-ui/customization/theming/ Theming - Material UI Customize Material UI with your theme. You can change the colors, the typography and much more. mui.com 1. 생성 import { createTheme } from "@mui/material/styles"; const theme = createTheme({ ... }); 2. 임의 값 추가 const theme = createTheme({ constant: { gnbHeight: 100, footerHeight : 100, }, }); // use typescript declare module ..

https://mui.com/material-ui/react-css-baseline/ CSS Baseline - Material UI The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon. mui.com 용도 : CSS리셋 전역설정 import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; export default function MyApp() { return ( {/* The rest of your application */} ); } 지역설정 import * as React fr..

pnpm 설치 https://pnpm.io/ko/installation 설치하기 | pnpm 필수 구성 요소 pnpm.io $ npm install -g pnpm vite + react + typscript 설치 https://ko.vitejs.dev/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev $ pnpm create vite --template react-ts // Project name 생략시 해당폴더로 설치 ./ $ pnpm i mui 설치 https://mui.com/material-ui/getting-started/installation/ Installation - Material UI Install Material UI, the world's most ..