์๋ ํ์ธ์ ๐๐ป 16๊ธฐ ํ๋ก ํธ์๋ ์ด์์ง ์ ์ธ์์ ๋๋ค.
๋ค๋ค 1์ฃผ์ฐจ ๋ฏธ์ Vanilla Todo ๋ง๋์๋๋ผ ์๊ณ ๋ง์ผ์ จ์ต๋๋ค! 1์ฃผ์ฐจ ๋ฏธ์ ์ ํตํด ์ฌ๋ฌ๋ถ๋ค๊ป์ ๋ณธ๊ฒฉ์ ์ธ React ์ฌ์ฉ์ ์์ Vanilla JS๋ก SPA๋ฅผ ๋ง๋ค๋์ ๋ถํธํ ์ ์ ๋๋ผ์ จ์ ๊ฒ ์ด๋ผ ์๊ฐํฉ๋๋ค.
๊ทธ๋ฆฌํ์ฌ ์ด๋ฒ ๋ฏธ์ ์, 1์ฃผ์ฐจ ์คํฐ์ ๋ฏธ์ ์ผ๋ก ์ฃผ์ด์ง Todo list ๋ง๋ค๊ธฐ๋ฅผ React๋ก ๋ฆฌํฉํ ๋งํ๋ ๊ฒ ์ ๋๋ค! ๊ธฐ์กด์ ๋ฆฌ์กํธ๋ฅผ ์ ์์๋ ๋ถ๋ค๊ป๋, ์กฐ๊ธ ๋ ํจ์ธ์ ์ธ ๋์์ธ ํจํด์ ๋ํด ๊ณ ๋ฏผํ ์ ์๋ ์ฃผ์ฐจ๊ฐ ๋ ๊ฒ์ด๊ณ , ๋ฆฌ์กํธ๋ฅผ ์ ํด๋ณด์ง ๋ชปํ์ ๋ถ๋ค๊ป๋ ๊ธฐ์กด์ ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ฆฌ์กํธ๋ก ํฌํ ํ๋ ๊ณผ์ ์ ํตํด ์ ํ๋ก ํธ์๋ ์์ฅ์ ๋ฆฌ์กํธ๊ฐ ๋ฑ์ฅํ๊ฒ ๋์๊ณ , ๋ฆฌ์กํธ์์ ์ฌ์ฉํ๋ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ์๋ค์ด ์ ๋ฐ๋๋ผ์ ๋นํด ํจ์จ์ ์ธ์ง ๊บ ๋ซ๋ ์ฃผ์ฐจ๊ฐ ๋ ๊ฒ์ด๋ผ ์๊ฐํฉ๋๋ค.
๋น๊ต์ ๊ฐ๋ฒผ์ด ๋ฏธ์ ์ธ ๋งํผ ์ฝ๋๋ฅผ ์ง๋ ๋ฐ ์์ด ์ฌ๋ฌ๋ถ์ ์ฐฝ์์ฑ์ ์ถฉ๋ถํ ๋ฐํํด๋ณด์๊ธฐ ๋ฐ๋๋๋ค. ์๋ํ๊ธฐ๋ง ํ๋ฉด ๋๋ ๊ฒ๋ณด๋ค ๊ฐ์ ์ฝ๋๋ฅผ ์ง๋ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ์๊ณผ ํจํด์ ๋ํด ๋ง์ด ๊ณ ๋ฏผํด๋ณด์๊ณ , ๋ณธ์ธ์ด ์์ฑํ ์ ์๋ ๊ฐ์ฅ ์ฐฝ์์ ์ธ ๋ฐฉ๋ฒ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํด์ฃผ์ จ์ผ๋ฉด ํฉ๋๋ค. ์ฌ๋ฌ๋ถ์ด ๋ฏธ์ ์ํ์ ํ๋ ๊ณผ์ ์์ ํ ์๊ฐ๊ณผ ๊ณ ๋ฏผ๋งํผ ์คํฐ๋์์ ๋ ๋ง์ ๊ฒ์ ์ป์ด๊ฐ์ค ์ ์์ ๊ฒ์ ๋๋ค.
๋งํ๋ ๋ถ๋ถ์ด ์๋๋ผ๋ ์ฐ์ ์ค์ค๋ก ๊ณต๋ถํ๊ณ ์ฐพ์๋ณด๋ฉด์ ๋ฏธ์ ์ ์งํํ๋ ๋ฐฉ์์ ๊ถ๊ณ ๋๋ฆฌ์ง๋ง, ๋ฏธ์ ๊ณผ ๊ด๋ จํ์ฌ ์ด์์ง์ ๋์์ด ํ์ํ์๋ค๋ฉด ์ผ๋ง๋ ์ง ์ฌ๋ Q&A ์ฑ๋์ด๋ ํ๋ก ํธ์๋ ์นดํก๋ฐฉ์ ์ง๋ฌธ์ ๋จ๊ฒจ ์ฃผ์ธ์!
- VSCode, Prettier๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๋ฐํ๊ฒฝ์ ๊ด๋ฆฌํฉ๋๋ค.
- React์ ๊ธฐ์ด๋ฅผ ์ดํดํฉ๋๋ค.
- React๋ฅผ ํตํ ์ดํ๋ฆฌ์ผ์ด์ ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ์ ์ดํดํฉ๋๋ค.
- React Hooks์ ๋ํ ๊ธฐ์ด๋ฅผ ์ดํดํฉ๋๋ค.
- Styled-Components๋ฅผ ํตํ CSS-in-JS ๋ฐ CSS Preprocessor์ ์ฌ์ฉ๋ฒ์ ์ตํ๋๋ค.
- 2022๋ 9์ 23์ผ ๊ธ์์ผ
- Virtual-DOM์ ๋ฌด์์ด๊ณ , ์ด๋ฅผ ์ฌ์ฉํจ์ผ๋ก์ ์ป๋ ์ด์ ์ ๋ฌด์์ธ๊ฐ์?
- ๋ฏธ์ ์ ์งํํ๋ฉด์ ๋๋, React๋ฅผ ์ฌ์ฉํจ์ผ๋ก์ ์ป์์ ์๋ ์ฅ์ ์ ๋ฌด์์ด์๋์?
- React์์ ์ํ๋ ๋ฌด์์ด๊ณ ์ด๋ป๊ฒ ๊ด๋ฆฌํ ์ ์์๊น์?
- Styled-Components ์ฌ์ฉ ํ๊ธฐ (CSS์ ๋น๊ต)
- 1์ฃผ์ฐจ ๋ฏธ์ ์ ๊ฒฐ๊ณผ๋ฌผ์ ๊ทธ๋๋ก React๋ก ๊ตฌํํฉ๋๋ค
- Functional Components๋ฅผ ์ฌ์ฉํฉ๋๋ค
- React Hooks๋ง์ ์ฌ์ฉํด ์ํ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค
- (์ด๋ฒ์ฃผ๋ Redux, MobX, Recoil, SWR๋ฑ์ ์ธ๋ถ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๋ฏธ์ ์ํ์ ์ง์ฅ์ด ์์ต๋๋ค.)
- ๊ธฐ์กด Todo-list์ ์ฌ๋ฌ๋ถ๋ค์ด ์ถ๊ฐํ๊ณ ์ถ์ ๊ธฐ๋ฅ๊ณผ ๋์์ธ์ ์์ ๋กญ๊ฒ ์ถ๊ฐํด๋ณด์ธ์.
npm start
: ๋ก์ปฌ์์ react application์ ์๋์ผ๋ก ๋ฆฌ๋ก๋ํ์ฌ ์คํ์์ผ์ค๋๋ค.