✅ Clipping 현상이란?쉽게 말해 부모 영역 밖으로 나가는 부분이 잘려 보이는 것.(어떤 영역이 잘려서 안 보이는 현상) 위 사진의 Card component의 border를 자세히 보면 그려지다만 부분들이 보인다. 현재 Provider에 overflow-hidden 속성이 존재하기 때문에 자식 요소가 Provider의 영역을 넘어가거나 경계에 존재할 시 보이지 않게 한다. 그래서 이럴 때는 온전히 border가 보이기 위해 자식 요소에 padding을 주면 border가 잘 보이게 된다.export default function MessagesLayout() { return ( {Array.from({..

⚫ Styled-jsx- Next.js 고유의 style 방법(격리된 범위 css에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공한다) 25.03.02 기준 next.js "12.0.7" 버전으로 설치하여 진행하면 unknown property jsx found 에러가 발생한다. ⚫ Unknown property jsx found 해결 방법해결법1. npm install styled-jsx 로 styled-jsx를 명시적으로 설치해준다. (사실 이것만 해도 동작은 잘 될 것이다)2. vscode extension인 styled-jsx, styled-jsx Language Server를 설치해준다. (css 자동완성 기능과 syntax highlighting 기능)3. .eslintrc.j..