Error - ํด๋ฆฌํ•‘(Clipping) ํ˜„์ƒ
ยท
๐Ÿšซ Error
โœ… Clipping ํ˜„์ƒ์ด๋ž€?์‰ฝ๊ฒŒ ๋งํ•ด ๋ถ€๋ชจ ์˜์—ญ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€๋Š” ๋ถ€๋ถ„์ด ์ž˜๋ ค ๋ณด์ด๋Š” ๊ฒƒ.(์–ด๋–ค ์˜์—ญ์ด ์ž˜๋ ค์„œ ์•ˆ ๋ณด์ด๋Š” ํ˜„์ƒ) ์œ„ ์‚ฌ์ง„์˜ Card component์˜ border๋ฅผ ์ž์„ธํžˆ ๋ณด๋ฉด ๊ทธ๋ ค์ง€๋‹ค๋งŒ ๋ถ€๋ถ„๋“ค์ด ๋ณด์ธ๋‹ค. ํ˜„์žฌ Provider์— overflow-hidden ์†์„ฑ์ด ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž์‹ ์š”์†Œ๊ฐ€ Provider์˜ ์˜์—ญ์„ ๋„˜์–ด๊ฐ€๊ฑฐ๋‚˜ ๊ฒฝ๊ณ„์— ์กด์žฌํ•  ์‹œ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๋Ÿด ๋•Œ๋Š” ์˜จ์ „ํžˆ border๊ฐ€ ๋ณด์ด๊ธฐ ์œ„ํ•ด ์ž์‹ ์š”์†Œ์— padding์„ ์ฃผ๋ฉด border๊ฐ€ ์ž˜ ๋ณด์ด๊ฒŒ ๋œ๋‹ค.export default function MessagesLayout() { return ( {Array.from({..
Next.js 12 - Styled JSX, unknown property jsx found
ยท
♠๏ธ Next.js 12
โšซ 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..