๋ฆฌ์กํธ + ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ์ธํ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ฆฌํด๋ณด์.react + ts + prttier์ eslint ์ค์ , airbnb ๊ท์น ์ ์ฉ(tslint๋์ eslint์ค์น)npm i -D eslint eslint-config-airbnb eslint-config-prett
๊ณ ๊ธ ํ์ ์ธ 'utility type' ๋ช๊ฐ์ง๋ฅผ ์ดํด๋ณด์. ์ ํธ๋ฆฌํฐ ํ์ ์ด๋ฏธ ์ ์ํด ๋์ ํ์ ์ ๋ณํํ ๋ ์ฌ์ฉํ๊ธฐ ์ข์ ๋ฌธ๋ฒ์ด๋ค. ๊ธฐ์กด์ ์ธํฐํ์ด์ค, ์ ๋ค๋ฆญ ๋ฑ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ผ๋ก ์ถฉ๋ถํ ํ์ ์ ๋ณํํ ์ ์์ง๋ง ์ ํธ๋ฆฌํฐ ํ์ ์ ์ฌ์ฉํ๋ฉด ํจ์ฌ ๊ฐ๊ฒฐํ ๋ฌธ๋ฒ์ ํ์ ์ ์
ํ์ ์คํฌ๋ฆฝํธ๊ฐ ํ์ ์ ์ถ๋ก ์ ํด๋๊ฐ๋ ๊ณผ์ ๋ฐ ๋จ์ธ๊ณผ์ ๋ฑ์ ๋ํด ์์๋ณด์.ํ์ ์ถ๋ก ์ด๋ ํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ด ์ง์ ๋์ด ์์ง ์์ ๊ฒฝ์ฐ, ์ฝ๋๋ฅผ ํด์ํ์ฌ ํ์ ์ ์ ์ถํด๋๊ฐ๋ ๋์์ ๋งํ๋ค.์ผ์ผ์ด ๋ณ์๋ฅผ ์ ์ธํ ๋๋ง๋ค ํ์ ์ ์ ์ธํด์ผํ๊ณ ํ์ํ ํ์ ์ ์ ์ํด์ผํ๋ ๋ฒ๊ฑฐ
Cํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ ๋ง์น ํจ์์ ํ๋ผ๋ฏธํฐ์ฒ๋ผ ์ฌ์ฉํ๋ ๊ฒ์ ์๋ฏธํ๋ค.์ ๋ค๋ฆญ์ ์ฌ์ฉํ๋ฉด ํด๋์ค๋ ํจ์์ ๋ชฉ์ ์ค ํ๋์ธ ์ฌ์ฌ์ฉ์ฑ์ด ์ฆ๊ฐํ๋ค. ํ๊ฐ์ง ํ์ ๋ณด๋ค ์ฌ๋ฌ๊ฐ์ง ํ์ ์์ ๋์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋๋ฐ ์ฌ์ฉ๋๋ค.๊ธฐ์กด ํ์ ์ ์๋ฐฉ์์ ๋ฌธ์ ์ ์ด ๋ฌด์์ธ์ง ํ์ ํ๊ณ ,
2์ฐจ ํ๋ก์ ํธ ํ๊ธฐ๋ฅผ ์์ฑํด๋ณด์. .gif) 2์ฐจ ํ๋ก์ ํธ๋ฅผ ๋ง์น๋ฉฐ ์ฐ์ ์กฐ ๋ถ์๊ธฐ๊ฐ ๋๋ฌด ์ข์์ ํญ์ ์์ผ๋ฉด์ ์ฝ๋ฉ์ ํ๋๊ฒ ๊ธฐ์ต์ ๋ง์ด ๋จ๋๋ค. ใ ใ ์ฝ๋ฉ์ ์ํ๋ ์ฌ๋์ด ๋ง๋ค๋ฉด ๋น์ฐํ ์ข๊ฒ ์ง๋ง ๊ฐ์ธ์ ์ผ๋ก๋ ๋ถ์๊ธฐ๊ฐ ํธํ๊ณ , ์๋ก ๊ฒฉ๋ คํด์ฃผ๋ ํ๊ณผ ํจ๊ป ํ๋ก์ ํธ๋ฅผ
๋ฆฌ์กํธ ํ ์ค ๋๋ฒ์งธ ์๊ฐ, useReducer, useMemo, useCallback, useRef์ ๋ํด ์์๋ณด์.useReducer๋ useState๋ณด๋ค ๋ ๋ค์ํ ์ปดํฌ๋ํธ ์ํฉ์ ๋ฐ๋ผ ๋ค์ํ ์ํ๋ฅผ ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ ๋ฐ์ดํธํด์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ hook์ด๋ค. ๋ฆฌ๋์
ํน์ ์ธ์๋ ๋ณ์์ ํ๊ฐ์ง ์ด์์ ํ์ ์ ์ฌ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ OR์ฐ์ฐ์(||)์ ๊ฐ์ด a์ด๊ฑฐ๋ b์ด๋ค ๋ผ๋ ์๋ฏธ์ด๋ค.'MONG'์ด๋ ๋ณ์์๋ string, number, boolean ํ์ ์ ๋ชจ๋ ์ฌ์ฉํ ์ ์๋ค.์ฌ๋ฌ ํ์ ์ ๋ชจ๋ ๋ง์กฑํ๋ ํ๋์
ํจ์ํ ์ปดํฌ๋ํธ์์ react hooks๋ฅผ ์ฌ์ฉํ์ฌ ์ํ ๊ด๋ฆฌ๋ฅผ ํด๋ณด์. React Hooks๋? react Hook๋ฅผ ํ๋ง๋๋ก ์์ฝํ๋ฉด, ํด๋์คํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ง์๊ณ ๋ ํจ์ํ ์ปดํฌ๋ํธ์์๋ state ๋ฅผ ์ด์ฉํ ์ ์๋ ๊ธฐ๋ฅ์ ๋งํ๋ค. ๊ธฐ์กด์ ํจ์ํ ์ปดํฌ๋ํธ๋
'์ธํฐํ์ด์ค'์ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด์. Interface๋? ์ธํฐํ์ด์ค๋ ๊ฐ๋จํ๊ฒ ์ด๋ ํ ๋๊ฐ์ ์์คํ ์ฌ์ด์ ์ํธ์์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ์กฐ๊ฑด, ๊ท์ฝ์ ๋งํ๋ค. interface + ์ํ๋ ์ด๋ฆ, ๊ฐ์ฒด ์์ ํญ๋ชฉ๋ค์ ๋ฃ์ด์ฃผ๊ณ , ํ์ ์ ์ง์ ํด์ค๋ค. Interface
ํ๋กํ ํ์ 2๋ฒ์งธ, 'ํ๋กํ ํ์ ์ฒด์ธ'์ ๋ํด์ ์์๋ณด์."์ค๋ฒ๋ผ์ด๋ = ๋ฎ์ด์ฐ๊ธฐ"์์ฑ์ ํจ์๋ฅผ ์ด์ฉํ์ฌ ์์์ ํ๋ค๋ณด๋ฉด ๋ฌผ๋ ค๋ฐ์ ๋ถ๋ชจ์ ๊ธฐ๋ฅ์ ๊ทธ๋๋ก ์ฌ์ฉํ์ง ์๊ณ ์ฌ์ ์ํด์ผ ํ ๊ฒฝ์ฐ๊ฐ ์๊ธด๋ค. ์ด๋ ์์ํด๋์ค์์ ๋ถ๋ชจํด๋์ค์ ๊ธฐ๋ฅ์ ์ฌ์ ์ํ ๋ ์ฌ์ฉํ๋ ๊ฒ์ด '์ค๋ฒ
'ํ๋กํ ํ์ '์ ๊ฐ๋ ์ ๋ํด ์์๋ณด์.
TypeScript์ ๋ชฉ์ , ์ฌ์ฉ๋ฒ์ ๋ํด์ ์์๋ณด์.์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ ์ ๋ถ์ฌํ ์ธ์ด์ด๋ค. ํ์ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌ๋ฆฌ ๋ธ๋ผ์ฐ์ ์์ ์คํํ๋ ค๋ฉด ํ์ผ์ ๋ณํํด์ฃผ์ด์ผํ๋ค.//ts์ฝ๋function sum(a: number, b: number) { return a
'์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธ' ์ฑ ์ ํตํด ์ฝ๋ฐฑํจ์์ ๋ํด ๊น๊ฒ ์์๋ณด์.(์ฑํฐ4) ์ฝ๋ฐฑ ํจ์ ์ฝ๋ฐฑ ํจ์๋ ๋ค๋ฅธ ์ฝ๋(ํจ์,๋ฉ์๋)์ ์ธ์๋ก ๋๊ฒจ์ค์ผ๋ก์จ ๊ทธ ์ ์ด๊ถ๋ ํจ๊ป ์์ํ ํจ์๋ฅผ ๋งํ๋ค. ๋ฌด์ธ๊ฐ ์ผ์ ๋ค๋ฅธ ๊ฐ์ฒด์๊ฒ ์ํค๊ณ , ๊ทธ ์ผ์ด ๋๋๋ ๊ฒ์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ด ์๋๋ผ ๊ทธ
์ฐ์ ํํ์ด์ง ํ๋ก์ ํธ ํ๊ธฐ๋ฅผ ์์ฑํด๋ณด์.ํ ๋ฌ๋์ ํ์ ์์ ์ํํด๋ณด๋ ์์ฝ๋์์ ๊ณต๋ถํ์ ๋์๋ ๋ง์ด ๋ฌ๋๋ค. ์์ฝ๋์์ ํ๋ก์ ํธ๋ฅผ ํ์ ๋์๋ ๋ฑ๋ฑ ์ ํด์ง๋๋ก ๋ฌผํ๋ฅด๋ฏ์ด ํ๋ฌ๊ฐ๋ ๋๋์ด์๋ค๋ฉด, ์คํํธ์ ์ ์ ํด์ง๊ฒ ์๊ณ , ์ธ์ ๋ ์ง ๊ณํ์ด ๋ฐ๋๋๊ตฌ๋๋ฅผ ๋๊ผ๋ค. ์ ํด์ง
์น์ฌ์ดํธ์์ ๋ง์ด ์ฌ์ฉ๋๊ณ ์๋ 'tabs menu'๋ฅผ ๋ฆฌ์กํธ์ ๋ทฐ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ค์ด๋ณด์.
์ง๊ธ๊น์ง ๋ฐฐ์ด ๋ด์ฉ์ ํ ๋๋ก ๊ฐ๋จํ 'todo-list'๋ฅผ ๋ง๋ค์ด๋ณด์.
์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ์ฃผ๋ 'slot'์ ๋ํด ์์๋ณด์. Slot ์ฌ๋กฏ์ ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ ํจ์ผ๋ก์จ, ํน์ ์ปดํฌ๋ํธ์ ๋ฑ๋ก๋ ํ์ ์ปดํฌ๋ํธ์ ๋งํฌ์ ์ ํ์ ํ๊ฑฐ๋ ์ฌ์ ์ํ ์ ์๋ค. ์๊ฒฉํ ๋ถ๋ชจ-์์ ๊ด๊ณ๊ฐ ์๋
Vue์์ ์์์๊ฒ ๋ถ๋ชจ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋ ๊ฒฝ์ฐ์ ๋ํด ์์๋ณด์.๋ถ๋ชจ์์ ์์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ธฐ ์ํด์ props๋ฅผ ์ฌ์ฉํ๋ค. ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์์ ์ปดํฌ๋ํธ์ props๋ฅผ ์ ์ธํด์ค๋ค.props์ ๋ฐ์ ๊ฐ์ data, methods ๋ค๋ฅธ ๊ณณ์์ ์ง์ ์ ์ผ๋ก ๋ฐ๊ฟ์ฃผ์ด ์ฌ
๋ทฐ ๋ผ์ฐํฐ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ์ด ์์ฑ์ผ๋ก ๋ทฐ ๋ผ์ฐํฐ ๊ฐ์ฒด๋ฅผ ๋๊ฒจ์ค์ผ ํ๋ค.์ด์ ๋ ๋ผ์ฐํฐ๋ฅผ ์ด์ฉํด ์ถ๋ ฅ๋ ๋ถ๋ถ์ ์ ๋ ฅํด์ผํ๋๋ฐ, ๋ฃจํธ ์ปดํฌ๋ํธ์ธ App.vue์ ๋ผ์ฐํฐ ๋ทฐ๋ฅผ ์ถ๊ฐํ๋ฉด ๋๋ค. router-viewํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฒฝ๋ก์ ๋ฐ๋ผ์ ๊ทธ์ ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํด์ค๋ค.
Vue์์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ํ๊ธฐ์ํด์๋ computed์ watch์ ๋ํด์ ์ ์์์ผ ํ๋ค.data๋ฅผ ๊ฐ๊ณตํด์ ๋ณด์ฌ์ค์ผํ๋ ๊ฒฝ์ฐ ์ฌ์ฉ๋๋ค. ์๋์ ๊ฐ์ ํ ํ๋ฆฟ์ ์ฌ์ฉํ๋ฉด ๊ฐ๋จ๋ช ๋ฃํ์ง์๊ธฐ ๋๋ฌธ์ computed๋ฅผ ์ฌ์ฉํ๋ฉด ์ข๋ค. ๊ณ์ฐ๋ ๊ฐ์ ์ฌ๋ฌ๋ฒ ์ฐธ์กฐํด์ผํ ๋ ์ฑ๋ฅํฅ