[React] module css

๊น€์ง€๋ฏผยท2022๋…„ 6์›” 30์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
6/13
post-thumbnail

1. React๋Š” ClassName์„ ๋žœ๋คํ•˜๊ฒŒ ์ง€์ •ํ•ด ์ค€๋‹ค.

์š”์†Œ๋“ค๋งˆ๋‹ค ์ผ์ผ์ด ์ค‘๋ณต ์•ˆ๋˜๋Š” id๋‚˜ class๋ฅผ ์ง€์ • ์•ˆํ•ด๋„ ๋œ๋‹ค.

๐Ÿ‘‡ https://react.vlpt.us/styling/02-css-module.html ์‚ฌ์ดํŠธ์—์„œ ๋žœ๋คํ•œ ํด๋ž˜์Šค ์ด๋ฆ„์˜ ์œ ์šฉ์„ฑ์— ๋Œ€ํ•ด์„œ ์•Œ์•˜์Šต๋‹ˆ๋‹ค.

ํด๋ž˜์Šค ์ด๋ฆ„์— ๋Œ€ํ•˜์—ฌ ๊ณ ์œ ํ•œ ์ด๋ฆ„๋“ค์ด ๋งŒ๋“ค์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์—, ์‹ค์ˆ˜๋กœ CSS ํด๋ž˜์Šค ์ด๋ฆ„์ด ๋‹ค๋ฅธ ๊ด€๊ณ„ ์—†๋Š” ๊ณณ์—์„œ ์‚ฌ์šฉํ•œ CSS ํด๋ž˜์Šค ์ด๋ฆ„๊ณผ ์ค‘๋ณต๋˜๋Š” ์ผ์— ๋Œ€ํ•˜์—ฌ ๊ฑฑ์ • ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๊ธฐ์ˆ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ์— ์‚ฌ์šฉํ•˜๋ฉด ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋ ˆ๊ฑฐ์‹œ ํ”„๋กœ์ ํŠธ์— ๋ฆฌ์•กํŠธ๋ฅผ ๋„์ž…ํ•  ๋•Œ (๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ์žˆ๋˜ CSS ํด๋ž˜์Šค์™€ ์ด๋ฆ„์ด ์ค‘๋ณต๋˜์–ด๋„ ์Šคํƒ€์ผ์ด ๊ผฌ์ด์ง€ ์•Š๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.)
CSS ํด๋ž˜์Šค๋ฅผ ์ค‘๋ณต๋˜์ง€ ์•Š๊ฒŒ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•˜์—ฌ CSS ํด๋ž˜์Šค ๋„ค์ด๋ฐ ๊ทœ์น™์„ ๋งŒ๋“ค๊ธฐ ๊ท€์ฐฎ์„ ๋•Œ
๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์œ„ํ•œ ํด๋ž˜์Šค๋ฅผ ์ž‘์„ฑ ํ•  ๋•Œ ์ œ๊ฐ€ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” CSS ํด๋ž˜์Šค ๋„ค์ด๋ฐ ๊ทœ์น™์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์€ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋ž‘ ์ค‘๋ณต๋˜์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค.
์ปดํฌ๋„ŒํŠธ์˜ ์ตœ์ƒ๋‹จ CSS ํด๋ž˜์Šค๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„๊ณผ ์ผ์น˜์‹œํ‚จ๋‹ค. (์˜ˆ: .Button
์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ๋ณด์—ฌ์ง€๋Š” CSS ํด๋ž˜์Šค๋Š” CSS Selector ๋ฅผ ์ž˜ ํ™œ์šฉํ•œ๋‹ค. (์˜ˆ: .MyForm .my-input)

์ค‘๋ณต ๊ฑฑ์ •์ด ์—†๋‹ค!

2. node.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

ํŒŒ์ผ ๋ณ„๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๊ฒƒ(import, export)๋Š” NodeJS ํ™˜๊ฒฝ์ด๋ผ์„œ ๊ฐ€๋Šฅํ•˜๋‹ค.

profile
๐Ÿ’กHabit is a second nature. [Git] https://github.com/Kimjimin97

0๊ฐœ์˜ ๋Œ“๊ธ€