์์ฑ ์ฐธ๊ณ ์ฌํญ
- ๊ณํ ๊ณต์ ๋ฅผ ํตํด ์ค์ค๋ก ํ๋ฃจ๋ฅผ ์ ๋ฆฌํ๋ ์๊ฐ ๊ฐ๊ธฐ
- ์๋ฏธ ์๋ ๋ด์ฉ ๋ณด๋ค๋ ๋ฐ์ฑ๊ณผ ํผ๋๋ฐฑ ์์ฒญ ์์ฃผ๋ก ์์ฑํ๊ธฐ
- ์ต์ง๋ก ๋ด์ฉ ์ฑ์ ๋ฃ์ ํ์ x
์ค๋์ ๊ณํ
- ๊ถ๊ธฐ๋ฒ
- ํ ์ฝ๋๋ฆฌ๋ทฐ
- ๊ฐ์
- mui ํํค์น๊ธฐ..
- ํด์ปคํค
- ๊นํจ์ค
- ๋ค๋ฅธ ํ ๋ถ์ ์ฝ๋๋ฆฌ๋ทฐ(X)
- ๊ฐ์ ๋ฃ๊ธฐ(X)
- ์ฝํ ํ ๋ฌธ์
- ์ฝ๋๋ฆฌ๋ทฐ ๋ฐ์๊ฑฐ ํ ๋๋ก ์กฐ๊ธ์ด๋ผ๋ ๊ฐ์ ํด๋ณด๊ธฐ(X)
- ์ด๋ฏผํฌ
- ๋ค๋ฅธ ํ ์ฝ๋๋ฆฌ๋ทฐ
- ๊ฐ์
- ์ฝํ 1๋ฌธ์
- ํ๋ก์ ํธ
- ์์ง์
- ๋ค๋ฅธ ํ ์ฝ๋ ๋ฆฌ๋ทฐ
- react ๊ฐ์ ์๊ฐ
- ์๊ณ ๋ฆฌ์ฆ 1๊ฐ ํ์ด
- ํ๋ก์ ํธ - ํ์๊ฐ์ ํ์ด์ง ๊ตฌํ ๋ฐ api ์ฐ๋
- til ์์ฑํ๊ธฐ
- ์ ์ฌํฌ
๊ฐ์
๋ค๋ฅธ ํ ์ฝ๋๋ฆฌ๋ทฐ, ๋ต๋ณ
์ฝ๋ฉํ
์คํธ 1๋ฌธ์
์ดํํฐ๋ธ ํ์
์คํฌ๋ฆฝํธ ์ ๋ฆฌ ๋จ์๊ฑฐ
์ฌ์ด๋ ํ๋ก์ ํธ
์ด์ ์ ๋ฐ์ฑ
- ๊ถ๊ธฐ๋ฒ
- ๊ฐ๋ฐ๋ธ๋ก๊ทธ๋ฅผ ๋จผ์ ์ฐ๊ณ ์ผ์๋ธ๋ก๊ทธ ์ธ์ง๋ง์ง๋ฅผ ๊ณ ๋ฏผํด์ผํ๋๋ฐ ์ผ์๋ง ์ฐ๊ณ ๊ฐ๋ฐ์ ์์จ๋ฒ๋ฆผ..
- ๊นํจ์ค
- ์ฝ์ดํ์ ๋๋๊ณ ๋๋ฌด ์ค๋ ์ฌ๋ ๊ฒ ๊ฐ์.,.,,,(ํ๋ฒ ๋์ผ๋ฉด ์ผ์ด๋ ์ ์๋ ๋ณ์ ๊ฑธ๋ฆฐ ๊ฑฐ ๊ฐ๊ธฐ๋ ..?) ์กฐ๊ธ์ด๋ผ๋ ๋๋๊ตฌ ๋์๋ ๊ณต๋ถํ๊ธฐ..!
- ์ด๋ฏผํฌ
- ์ฝ์ดํ์ ๋๋๊ณ ๋๋ฌด ์ค๋ ์ฌ๊ฒ ๋๋๋ผ๊ตฌ์.. ์ค๋์ ์ ๋ ๋จน๊ณ ์ฐ์ฑ ํ์ ๋ค์ ์ง์คํด์ ๋๋ด๊ณ ์ผ์ฐ ์๋ ค๊ตฌ์!
- ์์ง์
- ์ฝ์ดํ์ ๋๋๋ฉด ์๋ฌด๊ฒ๋ ์ํด์โฆ ์กฐ๊ธ ๋ฐ์ฑํฉ๋๋ค์์โฆ
- ๊ธฐ๋ก ์ฑ๋ฆฐ์ง๋ฅผ ๋๋ฌด ์ํด์โฆ ๊ธฐ๋ก์ ์กฐ๊ธ์ด๋๋ง ํ ์ ์๋๋ก ๋ถ๋ฐํด์ผ๊ฒ ์ต๋๋ค..
- ์ ์ฌํฌ
- ๋์ถฉ ๊ณต๋ถํ๊ณ ์ฝ๋๋ฆฌ๋ทฐ ํ๋ ค๋๊น ํผ์์ ์ธ ๋ถ๋ถ๋ง ๋ฆฌ๋ทฐํ๊ฒ ๋๋ค์โฆ ๋์์ด ๋์ง ๋ชปํ๋ ๊ฒ ๊ฐ์ ๋ฐ์ฑ๋ฉ๋๋ค.
- ์ด์ ๋ ์ง์ค์ด ์กฐ๊ธ ํ๋ ธ์ต๋๋ค. ์ค๋์ ์ค๊ฐ์ ์นดํ๋ก ์๋ฆฌ๋ฅผ ์ฎ๊ธธ ์์
๊ณ ๋ฏผ ๋ฐ ํผ๋๋ฐฑ ์์ฒญ
- ๊ถ๊ธฐ๋ฒ
- ๊นํจ์ค
- ์ด๋ฏผํฌ
- ์์ง์
- button, input, form ๋ฑ์ ์ปดํฌ๋ํธ๋ค์ ์ด๋์ ์ํ ๊น์? (element? function? ๋ฑ)
- ์ ์ฌํฌ
๊ธฐํ ์ก๋ด ๋ฐ ๊ณต์ ์ฌํญ
- ํ๋ก์ ํธ ๊ธฐ์ ์คํ?
react ts // ๊ฒ์ ์น์ฌ์ดํธ ์ ์ ํ๋ก์ ํธ
๋ฐฐํฌํ๊ฒฝ
- ๋ฏผํฌ: ec2, vercel
- ๊ธฐ๋ฒ: ghpage, netlify
- ํจ์ค: vercel,netlify,๊นํํ์ด์ง
- ์ฌํฌ: aws ์ฐ๋จน, vercel
- ์ง์ : aws๋ฅผ ๋ฐฑ์๋ ๋ถ๊ป์ ํด์ฃผ์ จ์ด์ฌโฆ?
react, next
- ๋ฏผํฌ: next๋
๋ง๋ณด๊ธฐ๋ง ํด๋ดค์ต๋๋ค!์ ๋๋ก ์ดํด๋ฅผ ๋ชปํ๊ณ ์ผ๋จ ์จ๋ณด๊ธฐ๋ง ํ๋ ๊ฒ ๊ฐ์์..
- ๊ธฐ๋ฒ: next ์ฐ๋จน๋ง ํด๋ดค์ต๋๋ค.(๊ณต์๋ฌธ์ ๋ฐ๋ผํ๊ธฐ)
- ํจ์ค : next ์ฐ๋จผ๋ง ํด๋ดค์ต๋๋ค.. ์์ธํ๋ ์ ๋ชจ๋ฅด๋ ๋๋
- ์ฌํฌ: nextjs 13 ์์ฆ ํด๋ณด๋ ์ค์ ๋๋ค
- ์ง์ : next ์ ํด๋ด์โฆ ๋ฐฐ์ฐ๊ฒ ์ต๋๋ค!
์ ์ญ์ํ๊ด๋ฆฌ
- ๋ฏผํฌ: recoil
- ๊ธฐ๋ฒ: redux toolkit , recoil์ ํ์ฌ ํด์ปคํค์์ ์ฌ์ฉ์์
- ํจ์ค : recoil,redux
- ์ฌํฌ: redux ๋ค ๊น๋จน์โฆ , recoil
- ์ง์ : ์คโฆ ๋ฐฐ์ฐ๊ฒ ์ต๋๋ค
css / scss tailwind emotion ๋ฑโฆ
- ๋ฏผํฌ: ์ฃผ๋ก styled-component ์จ์์ต๋๋ค.
- ๊ธฐ๋ฒ: ์ฃผ๋ก styled-component์ฌ์ฉ, tailwind์ฐ๋จน๋ง ํด๋ดค์ต๋๋ค
- ํจ์ค : ์ ๋ ์ฃผ๋ก styled-component..์ผ์ต๋๋ค.
- ์ฌํฌ: styled-component, tailwind
- ์ง์ : styled-component
ui ๋ผ์ด๋ธ๋ฌ๋ฆฌ - MUI, antd, radix ๋ฑโฆ
- ๋ฏผํฌ: ํผ๊ทธ๋ง๋ฅผ ๋ค๋ค๋ณธ ์ ์ ์์ง๋ง,, ์ ๋ฌธ์ ์ด์ง๋ ๋ชปํด์
- ๊ธฐ๋ฒ: mui ๊ณต๋ถ์ค์ ๋๋ค
- ์ฌํฌ: antd, radix๋ tailwind ๊ธฐ๋ฐ headless ui ํด๋ณด๋ ์คโฆ
- ์ง์ : ํผ๊ทธ๋ง๋ฅผ ๋ค๋ค๋ดค์ต๋๋ค(์ด๋ณด?)
- ํผ๊ทธ๋ง๋ฅผ ์ ๋ง ์ด์ง ์์ค์ผ๋ก ์ธ ์ ์์ต๋๋ค.
TS
- ๋ฏผํฌ: ํ๋ก์ ํธ ํ๋ ts๋ก ์งํํ์์ต๋๋ค
- ๊ธฐ๋ฒ: ๋ฐ๋ก ts๋ก ์์ ์ ๋ชปํด๋ดค์ง๋ง reactjs๋ฅผ ts๋ก ์ด์ฃผํ๋ ์์ ์ ๋์ธ๋ฒ ํด๋ดค์ต๋๋ค.
- ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋ค๋ฃจ์ง ๋ชปํ๋ ๋๋ - ํจ์ค
- ์ฌํฌ: ์ต์ํ์ง ์์ต๋๋ค
- ์ง์ : ๋ถํธ์บ ํ์์ ์ฒจ ๋ฐฐ์๋ดค์ต๋๋คโฆ
storybook ์ฌ์ฉ์ฌ๋ถ
- ๊ธฐ๋ฒ: ์ฌ์ฉํด๋ณธ์ ์์ต๋๋ค..
- ๋ฏผํฌ: ์ ๋ ์ด๋ฒ ๊ฐ์์์ ์ฒ์ ๋ดค์ต๋๋ค..
- ํจ์ค : ์ฌ์ฉํด๋ณด์ง ์์์ต๋๋ค,
- ์ฌํฌ: ์ฌ์ฉ ๊ฒฝํ ์์ต๋๋ค.
- ์ง์ : react ๊ฐ์์์ ์ฒ์ ์ ํด ๋ฐฐ์ฐ๊ณ ์์ต๋๋ค.
ํ ์คํธ ์ฝ๋ ์์ฑ์ฌ๋ถ - ๋จ์ํ ์คํธ, E2E ์ฌ์ฉํ ์ง
- ๋ฏผํฌ: ์ ๋ ํ ์คํธ์ฝ๋๋ฅผ ํ ๋ฒ๋ ์์ฑํด ๋ณธ ์ ์ด ์์ด์.. ๐
- ๊ธฐ๋ฒ: ์ ๋ ์์ต๋๋คโฆ.
- ํจ์ค : ๋จ์ํ ์คํธ ์กฐ์ฐจ ์ ๋๋ก ์์ฑํด๋ณธ ์ ์๋ ๊ฑฐ ๊ฐ์์.
- ์ฌํฌ: ๋จ์ํ ์คํธ ์์ฑ์ ํด ๋ดค๋๋ฐ ํ์ฉ์ ๋ชป ํด๋ดค์ต๋๋ค
- ์ง์ : ์์ต๋๋นโฆ ใ ใ
๋น๋ํด์ด๋ ํ๊ฒฝ - webpack, vite, parcel ๋ฑ
- ๊ธฐ๋ฒ: webpack, vite ์ฌ์ฉ์ ํด๋ดค๋๋ฐ ๊ทธ๋ ๊ฒ ์ ๋ฌธ์ ์ด์ง ๋ชปํ ๋๋
- ๋ฏผํฌ: ๋ณดํต cra๋ก ์์ํ์ด์ ์นํฉ์ด๋ vite parcel์ ์ด๋ฒ ๊ฐ์ ๋ค์ผ๋ฉด์ ์ฒ์ ๋ค๋ค๋ ๊ฒ ๊ฐ์์
- ํจ์ค : ์ ๋ ๊ธฐ๋ฒ๋๊ณผ ๋น์ทํฉ๋๋น.
- ์ฌํฌ: webpack, vite
- ์ง์ : ์โฆ ์ด์ฌํ ๋ฐฐ์ฐ๊ฒ ์ต๋๋ค.
๊ธฐํ
- ๐ธ