์๋ฐ์คํฌ๋ฆฝํธ์ CSS ๊ธฐ์ด ๋ฌธ๋ฒ๊ณผ ํจ๊ป ๋ฆฌ์กํธ์ ๊ธฐ์ด๋ฅผ ํํํ๊ฒ ๋ค์ง ์ ์์ต๋๋ค.
์ด๋ฐ ๊ฑธ
๋ฐฐ์์!
์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด ๋ฌธ๋ฒ
CSS ๊ธฐ์ด ๋ฌธ๋ฒ
๋ฆฌ์กํธ ๊ธฐ์ด ํํํ๊ฒ ๋ค์ง๊ธฐ
๋ฏธ๋ ํ๋ก์ ํธ๋ฅผ ํตํ ์น์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ
๊น๋ํ ๊ฐ์์๋ฃ, ๊ผผ๊ผผํ ์ค๋ช
์ผ๋ก
์ฝ๊ฒ ๋ฐฐ์ฐ๋ ๋ฆฌ์กํธ ๊ฐ์์
๋๋ค. ๐จโ๐ซ
๋ฆฌ์กํธ๋ ๋ฉํ์์ ๋ง๋ ์คํ์์ค ์๋ฐ์คํฌ๋ฆฝํธ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
ํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๊ณ ์์ผ๋ฉฐ
๋น ๋ฅธ ์
๋ฐ์ดํธ์ ๋ ๋๋ง ์๋, ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ๊ตฌ์กฐ ๋ฑ ๋ง์ ์ฅ์ ์ ๊ฐ๊ณ ์์ด์.
๊ฐ์๋ฅผ ์ฑ
์ผ๋ก๋ ๋ณผ ์ ์๋๋ก
๊ฐ์ ๋ด์ฉ์ ๊ณ ์ค๋ํ ์ฑ
์ ๋ด์์ต๋๋ค.
๋์์ ๊ฐ์์ ํจ๊ป ์ฑ
์ ๋ณด๋ฉด์
๋ฆฌ์กํธ์ ์ธ๊ณ๋ก ๋น ์ ธ๋ณด์ธ์!
๐ ์๋ฌธ๋ ๋ช ๊ฐ์ ๐
๊ฐ์๋ฅผ ๋ชจ๋ ์๊ฐํ ์ดํ์๋ ๋ฆฌ์กํธ๋ก ๊ฐ๋ฐ์ ํ๋ฉด์ ์๊ธฐ๋ ๊ถ๊ธ์ฆ๋ค์ ๋ชจ๋ ํด๊ฒฐํด๋๋ฆฝ๋๋ค.
์ง์๊ณต์ ์ ์ํ์ด ๋ง๋ ํ๋ก ํธ์๋ ์ง์ ํฌํธ FrontOverflow์ ์ธ์ ๋ ์ง ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์!
๐ FrontOverflow ๋ฐฉ๋ฌธํ๊ธฐ
JS ๊ธฐ์ด ๋ฌธ๋ฒ์ ๋ํด
์ดํดํ ์ ์์ด์!
์์ฃผ ์ฌ์ฉ๋๋ CSS๋ฅผ
์ดํดํ ์ ์์ด์!
๋ฆฌ์กํธ์ ๊ธฐ์ด๋ฅผ
์ ๋ค์ง ์ ์์ด์!
์ค์ ํ๋ก์ ํธ ๊ฒฝํ์
์์ ์ ์์ต๋๋ค.
์น์ 0 [์ค๋นํ๊ธฐ]
์น์ 1, 2 [๋ฆฌ์กํธ ์๊ฐ, ์์ํ๊ธฐ]
์น์ 3 [JSX]
์น์ 4 [Rendering Elements]
์น์ 5 [Components and Props]
์น์ 6 [State and Lifecycle]
์น์ 7 [Hooks]
์น์ 8 [Handling Events]
์น์ 9 [Conditional Rendering]
์น์ 10 [Lists and Keys]
์น์ 11 [Forms]
์น์ 12 [Lifting State Up]
์น์ 13 [Composition vs Inheritance]
์น์ 14 [Context]
์น์ 15 [Styling]
์น์ 16 [๋ฏธ๋ํ๋ก์ ํธ]
Q. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋ชฐ๋ผ๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
๋ค! ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํด ์ ๋ชจ๋ฅด์๋ ๋ถ์ด๋ผ๊ณ ํด๋, ๊ฐ์์์ ๊ธฐ์ด ๋ฌธ๋ฒ์ ํฌํจํ์ฌ ์ค๋ช ๋๋ฆฌ๊ธฐ ๋๋ฌธ์ ์๊ด์์ด ๋ค์ผ์ค ์ ์์ต๋๋ค.
Q. CSS์ ๋ํด ์ ๋ชฐ๋ผ๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
๋ค, CSS์ ๋ํ์ ์ธ ์์ฑ๋ค์ ํจ๊ป ๋ค๋ฃจ๊ธฐ ๋๋ฌธ์ ์ ๋ชฐ๋ผ๋ ๊ฐ์๋ฅผ ์๊ฐํ์ค ์ ์์ต๋๋ค.
Q. ๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์ฐ๋ฉด ๋ญ๊ฐ ์ข์๊ฐ์?
๋ฆฌ์กํธ๋ฅผ ํตํด ๋ด๊ฐ ์ํ๋ ๋๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค.
create-react-app
์ด ์ ๋๋ก ์๋ํ์ง ์์ต๋๋ค.npm install -g yarn
yarn create react-app my-app
3๊ฐ ~ 15๊ฐ. ์ค์ต ์์ค์ฝ๋
๋ฆฌ์กํธ v17 ์์ค์ฝ๋
https://github.com/soaple/first-met-react-practice
๋ฆฌ์กํธ v18 ์์ค์ฝ๋
https://github.com/soaple/first-met-react-practice-v18
16๊ฐ. ๋ฏธ๋ ๋ธ๋ก๊ทธ ์์ค์ฝ๋
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์น์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ๊ด์ฌ์๋ ๋ถ
๋ฆฌ์กํธ๋ฅผ ์ฒ์ ์ ํ์๋ ๋ถ
์๊ฐ์ ์
19,288
์๊ฐํ ์
437
๊ฐ์ ํ์
4.8
๊ฐ์ ์
4
์ด์ธ์ (์ํ)
๊ฐ๋ฐ์ ์ฌ๋ํ๋ ๊ฐ๋ฐ์์ด์ 1์ธ ์คํํธ์
์ ์ฐฝ์
์์
๋๋ค.
์ค๋ ์ ๋ถํฐ ์ํํธ์จ์ด ๊ต์ก์ ๊ด์ฌ์ ๊ฐ์ง๊ณ ๊พธ์คํ ํ๋ํ๊ณ ์์ต๋๋ค ๐
์ํ์ด ๋ง๋ ํ๋ก ํธ์๋ ์ง์ ํฌํธ
์ฌ๋ผ์ด๋ ๋ชจ์
ํํ์ด์ง
๊ฐ์ ์ฝํ ์ธ
์ฒ์ ๋ง๋ ๋ฆฌ์กํธ (๐ ์ธํ๋ฐ 2022์ฐ๋ง ์ด์๋ '์๋์์ด ์ฃผ๋ ๋๋ฌด ์' ์์)
์ ์
์ ์ฒด
62๊ฐ โ (5์๊ฐ 15๋ถ)
๋ฌด๋ฃ