반응형 📍 Front-End/🜸 React.js17 MUI DatePicker 사용하기 (v6) DatePicker를 사용하기 위해서 필요한 패키지를 설치해 준다. 날짜 라이브러리로 moment를 흔하게 사용하지만 MUI에서는 dayjs를 추천하고 있으며 momentjs에 비해 용량이 수십 배나 가볍다! (moment로도 이용가능하긴 하다) yarn add @mui/x-date-pickers // Install date library (if not already installed) yarn add dayjs 1. 기본 사용법 import * as React from 'react'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/Adapt.. 2023. 5. 24. react-cookie :: 서브 도메인이 다를 때, 같은 쿠키 값 공유하기 문제 react-cookie를 이용해서 여러 프로젝트에서 공유되는 쿠키값을 설정했다 개발할 때 local에서는 문제없었는데 개발 서버에 배포하고 나니 페이지 단위로 쿠키값이 다르게 설정되는 것을 발견했다 원인 도메인이 abc.com이라면 aaa.abc.com / bbb.abc.com / ccc.abc.com 이런 식으로 페이지마다 서브도메인이 달라지면서 발생한 이슈 local에서는 모든 도메인이 당연히 localhost로 시작하기 때문에 배포 전까지 발견하지 못했다 - 처음 작성한 코드 import { useCookies } from 'react-cookie'; const Test = () => { // cookie_test라는 키를 가지는 쿠키값 설정 const [cookies, setCookie] =.. 2023. 3. 3. React :: MUI v4 에서 v5로 버전 업그레이드 하기 (+styled-components) - 2/2 MUI v4에서 v5로 버전 업그레이드 하면서 주의할점! 1. styled-components 사용하는 경우 app.jsx import { ThemeProvider as StyledThemeProvider } from "styled-components"; import { ThemeProvider as MuiThemeProvider, CssBaseline } from "@mui/material"; import { StylesProvider } from "@mui/styles"; styled-components와 MUI에서 제공하는 ThemeProvider를 import 해오는 경로 수정이 선행되어야 한다 (경로 수정 후 에러창 마주할텐데 이건 당연한 것입니다,,,) 2. App.jsx에서 import 경로.. 2023. 2. 15. React :: MUI v4 에서 v5로 버전 업그레이드 하기 (+styled-components) - 1/2 옛날 옛적,,, 프로젝트를 다시 꺼내서 작업하려 보니 MUI 4 버전을 사용하고 있다 스토리북에서 쓰는 MUI가 5버전이다보니,,, 버전 업그레이드가 필요한 상황~~ MUI 문서를 뒤져보면 친절하게 스텝 바이 스텝 설명되어 있다 Migrating to v5: getting started - Material UI This guide explains how and why to migrate from Material UI v4 to v5. mui.com v4에서 v5로 업그레이드 되면서 가장 큰 변화는 JSS기반에서 emotion(CSS-in-js)으로 대체되었다는 것~ (One of the biggest changes in v5 is the replacement of JSS for Emotion as a d.. 2023. 2. 14. 이전 1 2 3 4 5 다음 반응형
