๋ฐ˜์‘ํ˜•

DOM ์ ‘๊ทผ 1
[JavaScript] DOM ์ ‘๊ทผ์„ ํ†ตํ•ด CSS Module์˜ className ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ• (react.js, next.js)

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” DOM ์ ‘๊ทผ์„ ํ†ตํ•ด CSS Module์˜ classname์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค . How to solve the problem ์ €๋Š” next.js ์—์„œ ํŠน์ • className ์„ ๊ฐ€์ ธ์™€์„œ ์ œ๊ฑฐํ•ด์ค˜์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. CSS Module์„ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ๋งˆ๋‹ค ์•„๋ž˜์˜ ํ˜•์‹์œผ๋กœ styles์„ ๊ฐ€์ ธ์™€์„œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด์คฌ์Šต๋‹ˆ๋‹ค. import styles from './styles.module.css' ์ฐธ๊ณ ๋กœ css module ๋‚ด๋ถ€ ํ”„๋กœ์„ธ์Šค๋Š” css ํด๋ž˜์Šค๋‚˜ css ํŒŒ์ผ์„ ํ†ตํ•ด ๊ทธ ํด๋ž˜์Šค์˜ ์ด๋ฆ„์„ ๊ณ ์œ ํ•˜๊ฒŒ ๋ฐ”๊ฟ”์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ importํ•˜๋Š” ๋ชจ๋“  css ํŒŒ์ผ์„ ๊ณ ์œ ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ์ด ๊ธ€ [React ..
Programming/JavaScript 2023.02.14
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”