반응형 📍 Front-End72 rem과 em의 차이 1. rem 기준값의 배수로 표현한 크기. 기준값은 최상위 요소에 지정된 font-size이다 대체로 html, body에 기준값이 선언된다 html { font-size : 16px } div.container{ font-size : 2rem // 32px } div.container > div.contents { font-size : 2rem // 32px } 최상위 요소인 html에 font-size 기준값이 16px로 선언되어 있고 하위 요소에 선언된 2rem은 16px * 2 = 32px의 폰트 사이즈를 가지게 된다 2. em em도 rem과 동일하게 기준값의 배수로 표현하는 단위이다. rem과 차이점은 기준값이 최상위 요소가 아닌 현재 요소에 선언된다는 점이다. div { font-size: .. 2023. 5. 8. 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 6 ··· 18 다음 반응형
