์ฌ์ฉ์ ์ง์ ์ปดํฌ๋ํธ์์ ref ํ๋กญ์ ๋ฐ๋ก ์ฌ์ฉํ๊ธฐ(์๋๋ ์๋ฐ), ref๋ฅผ ๋ฐ๊ณ ์ถ์ ์ปดํฌ๋ํธ(Input์ปดํฌ๋ํธ)๋ก ๊ฐ์ ์ปดํฌ๋ํธ ํจ์๋ฅผ React.forwardRef๋ก ๊ฐ์ธ๊ณ ๋งค๊ฐ๋ณ์ ์ถ๊ฐ. ๊ทธ๋ฌ๋ฉด Input ์ปดํฌ๋ํธ๋ forwardRef์ ์ธ์๊ฐ ๋๋ ๊ฒ์ด๊ณ , ๊ทธ
5000ํฌํธ๋ก ์๋ฒ์ฐ๊ฒฐ์ ์ ๋์ง๋ง ์๋ ๋ชฝ๊ณ ๋๋น ์๋ฌ๊ฐ ๋ฌ๋ค!๋น๋ฐ๋ฒํธ์ '@'๊ฐ ๋ค์ด๊ฐ ๊ฒฝ์ฐ๋ก %40์ผ๋ก ์์ ํ๋ฉด ์คํ๋จ!!ํธ์~
1. ์๋ฐ์คํฌ๋ฆฝํธ ์ ์ด ํ๋ฆ โข ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ค๋ฅธ ๋ฉํฐ์ค๋ ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ค๋ฅธ ๋ฐฉ์์ผ๋ก ๋น๋๊ธฐ ๋์์ ์ฒ๋ฆฌํ๋ค. โข ์ฒ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ํ๋ ๊ฒฝ์ฐ, ๋์์ ๋ํ ์ ํํ ์ดํด๊ฐ ์์ผ๋ฉด ์ฝ๋์ ํ๋ฆ์ ๋ฐ๋ผ๊ฐ๊ธฐ ์ด๋ ต๋ค. โข ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ์ ๋น๋๊ธฐ ๋์์ ์ดํดํ๊ธฐ
//ts๋ js์ ๋ณ์, ๋งค๊ฐ๋ณ์, ๋ฆฌํฐ๊ฐ์ ํ์ ์ ๋ถ์ด๋ ๊ฒ์ด๋ค//์ฃผ ๋ชฉ์ ์ any๋ฅผ ์์ ๋ ๊ฒ!const a: string = "5";const b: number = 5;const c: boolean = true;const d: undefined = undefine
3๊ฐ์ง data api : ์๋ฒ์ ์์ ๋ค์ ํด๋ผ์ด์ธํธ ์ธก์ผ๋ก ์ฎ๊ฒจ์๋ค๊ณ ์๊ฐํ๋ฉด ๋๋ค์ปดํฌ๋ํธ ์์ฑ ์ ์ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ ์ ๋ฌloader์ ํธ์ถ ์์ ์ ์ปดํฌ๋ํธ๊ฐ ๋๋๋ง ๋๊ธฐ ์ ์ฆ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋๊ธฐ ์ ์ api์ ํต์ ํ ์๋ต์ ๋ฐ๊ณ ๋์ ๋ ๋๋ง์ ๋ค์ด๊ฐ\-> ์ด๋ฅผ
๋ถ์ํ๋ ค๋ ๋ฐ์ดํฐ๋ ์ด๋ค ์ข ๋ฅ์ ๋ฐ์ดํฐ ํ์ ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์๊น?๋ฐ์ดํฐ์ ํฌํจ๋ ๋ณ์(์ปฌ๋ผ)์ ๋ถํฌ๋ ์ด๋ ํ๊ฐ? (ํ๊ท , ๋ถ์ฐ, ์ต๋, ์ต์, ์ด์์น, ๋ถํฌ์ ํํ ๋ฑ๋ฑ)๊ฒฐ์ธก์น๊ฐ ์๋๊ฐ? ์๋ค๋ฉด ์ผ๋ง๋ ๋น๋ฒํ๊ณ ์ด๋ ๋ณ์์ ์ฃผ๋ก ํฌํจ๋์ด ์์๊น?์ผ๋ถ ๋ณ์ ๊ฐ ์ ํ๊ด๊ณ(
๋ฐ์ดํฐ ์ฒ๋ฆฌ์ ๋ถ์์ ์ฌ์ฉ๋๋ ํ์ด์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ํ ๋ฐ์ดํฐ ํฌ๋งท์ ๋ค๋ฃฐ ์ ์์๋ฐ์ดํฐํ๋ ์ ๊ฐ์ฒด๋ก ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌโข ๋ฐ์ดํฐ๊ฐ ์ฌ๋ฌ ์ถ์ฒ์์ ์์ง๋์ด ํํ๋ ์์ฑ์ด ๋ค์ํ ๊ฒฝ์ฐ, ์ปดํจํฐ๊ฐ ์ดํดํ ์ ์๋๋ก ๋์ผํ ๊ตฌ์กฐ๋ก ํตํฉ๋์ด์ผ ํ๋ค.โข ํ๋ค์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์๋ฆฌ์ฆ
โข ํค(Key)์ ๊ฐ(Value)์ ์์์์ผ๋ก ๊ตฌ์ฑ๋ ์๋ฃ ๊ตฌ์กฐโข ์์๋ค์ ์ ์ฅ ์์๊ฐ ์์ด์ ๋ ๋น ๋ฅด๊ฒ ๋ฐ์ดํฐ์ ์ ๊ทผ ๊ฐ๋ฅโข ํค(Key)๋ ์ค๋ณต๋์ง ์๊ณ , ํค๊ฐ์ผ๋ก ์ธ๋ฑ์ฑ๋์ด ํด๋น๊ฐ์ ์ ๊ทผ โข ์ค๋ณต๋๋ ๊ฒฝ์ฐ, โ์์์โ ํ๋๋ฅผ ์ ์ธํ ๋๋จธ์ง๋ ๋ฌด์โข n๊ฐ์ ์์(el
: ๋ํ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ธ๊ฐ์ ์ฌ๊ณ ๋ฐฉ์์ฒ๋ผ ํํํ๋ ๋ฌธ๋ฒ ๊ตฌ์กฐ๋น์ ๊ณต์๋ฅผ ์ํ ํ๋ก๊ทธ๋๋ฐ ๊ต์ก, ์ค๋ฌด์ ๋ง์ด ์ฌ์ฉC์ธ์ด๋ก ๊ตฌํ๋ ๋ฒ์ฉ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์น ํ๋ก๊ทธ๋๋ฐ, DB, ์ธ๊ณต์ง๋ฅ ๋ฑ ๋ค์ํ ๋ถ์ผ์ ํ๋ก๊ทธ๋จ ์์ฑGoogle ColabPychamํด๋์ค์์ ์ ์ํ ๊ฐ์ฒด๋ฅผ
๊ฒฐ๊ณผ๊ฒฐ๊ณผ๊ฒฐ๊ณผ๊ฒฐ๊ณผ: ์ผ์ชฝ ํ ์ด๋ธ์ ์ถ๊ฐ ์ ๋ณด ๋ถ์ด๊ธฐ : ์กฐ์ธ ์ปฌ๋ผ์ด ๊ฐ์ ๊ฑด ๋ง ๋ถ์ฌ์ ์กฐํ (๊ต์งํฉ)โข ๋ฉ์ธ์ฟผ๋ฆฌ ์์ ์๋ ๋ ๋ค๋ฅธ SELECT ๋ฌธ์ฅโข ์๊ดํธ๋ก ๋๋ฌ์ผ ํํ๋ก ์์ฑ: (SELECT\*FROMtable....)โข ๋ฉ์ธ์ฟผ๋ฆฌ์ SELECT์ ์์ ์ปฌ๋ผ์ด๋ ํํ
brew install mysql ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด MySQL ์ค์นmysql.server start ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด ์๋ฒ ์คํmysql โu root ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด ์๋ฒ ์ ์\\q ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด ์๋ฒ ์ ์ ์ข ๋ฃmysql.server stop ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด ์๋ฒ ์ข ๋ฃ
: ์๋ชป๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ค๊ณ๋ก ๋ฐ์ํ๋ ์ค๋ฅโข ์ฝ์ ์ด์: ๋ฐ์ดํฐ๋ฅผ ์ฝ์ ํ ๋ ๋ถํ์ํ ๋ด์ฉ๊น์ง ์ฝ์ ํด์ผ ํ๋ ๋ฌธ์ โข ๊ฐฑ์ ์ด์: ์ค๋ณต๋ ๋ฐ์ดํฐ ์ค ์ผ๋ถ๋ง ๊ฐฑ์ ๋์ด ๋ฐ์ํ๋ ๋ฌธ์ โข ์ญ์ ์ด์: ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ ๋ ๋ค๋ฅธ ์ ์ฉํ ์ ๋ณด๋ ํจ๊ป ์ญ์ ๋๋ ๋ฌธ์ : ์์ฑ๋ค
์ ์ฝ ์กฐ๊ฑด์ด๋?ํ ์ด๋ธ์ ์๋ชป๋ ๋ฐ์ดํฐ๊ฐ ์ ๋ ฅ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํ ๊ท์น ์ ์ฝ ์กฐ๊ฑด์ ํตํด ๋ฌด๊ฒฐ์ฑ์ ์งํฌ ์ ์์๋(NULL) ๊ฐ ๋นํ์ฉ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ์ง ์์ผ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํจ ์๋ฌด๊ฒ๋ ๋ช ์ํ์ง ์๋ ๊ฒฝ์ฐ ๊ธฐ๋ณธ ๊ฐ์ ๋ ๊ฐ ํ์ฉ์ค๋ณต๋๋ ๊ฐ์ ๋นํ์ฉ๋๊ฐ์ ๊ฐ์ด ์์ผ๋ฉด ์๋ฌ
๋ฐ์ดํฐ๋ ํ์ค ์ธ๊ณ์์ ์์ง๋ ๋จ์ํ ์ฌ์ค๊ณผ ๊ฐ๋ค์ ๋ชจ์ ๋์ ๊ฒ์ ๋ณด๋ ๋ฐ์ดํฐ๋ฅผ ํน์ ๋ชฉ์ ์ ์ํด ํด์ํ๊ฑฐ๋ ๊ฐ๊ณตํ ํํ: ๋ฐ์ดํฐ๋ค์ ์งํฉํ ์กฐ์ง ์์์ ์ฌ๋ฌ ์ฌ์ฉ์์ ์์ฉ ํ๋ก๊ทธ๋จ์ด ๊ณต๋์ผ๋ก ์ฌ์ฉํ๋ ๋ฐ์ดํฐ๋ค์ ํตํฉํ์ฌ ์ ์ฅํ๊ณ ์ด์ํ๋ ๋ฐ์ดํฐํ์ผ์ฒ๋ฆฌ ์์คํ ์ ํ๊ณโข
๋งค๊ฐ๋ณ์์ ์ฐ์ฐ๊ฒฐ๊ณผ๊ฐ ๋ชจ๋ ์ซ์์ธ ํจ์๋งค๊ฐ๋ณ์์ ์ฐ์ฐ๊ฒฐ๊ณผ๊ฐ ๋ชจ๋ ๋ฌธ์์ธ ํจ์ํน์ ๋ฐ์ดํฐ ํ์ ๋ค๋ฅธ ๋ฐ์ดํฐํ์ผ๋ก ๋ณํํ๋ ํจ์โข ๋ณ์์ ํน์ ์กฐ๊ฑด์ ๋ฐ๋ผ ์๋ก์ด ๋ณ์๋ฅผ ์์ฑํ๋ ์กฐ๊ฑด๋ฌธ
: ๊ตฌ์กฐํ ๋ ๋ฐ์ดํฐ์ ์งํฉ์ฌ๋ฌ ์ฌ๋๋ค๊ณผ ์ค์๊ฐ์ผ๋ก ๊ณต์ ํ์ฌ ์ฌ์ฉ ๊ฐ๋ฅํจ์จ์ ์ธ ๋ฐ์ดํฐ ๊ด๋ฆฌํจ์จ์ ์ธ ๋ฐ์ดํฐ ๊ฒ์์ผ๊ด์ฑ ์๋ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ ๊ด๋ฆฌ ๊ฐ๋ฅ๋ฐ์ดํฐ ๋๋ฝ ๋ฐ ์ค๋ณต ์ ๊ฑฐ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ดํฐ ์กฐ์๊ณผ ๊ด๋ฆฌ๋ฅผ ๊ทน๋ํํ ์์คํ ์ํํธ์จ์ด 2. ์ฌ๋ฌ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํ ๋ฐ์ดํฐ์
์นด์นด์ค ์ธ๊ฐ์ฝ๋ ํ์ธํ๋ ๋ฐฉ๋ฒ
์ด์ ๊น๋ฉ/๊นํ๋ธ ๋ค์ด๊ฐ์ create merge request๋๋ฌ์ ์๋ณธ ๋ธ๋์น๋ก mergeํ๋ ๊ฒ์ ์น์ธํ๊ธฐ(๊ธฐ์กด์ ๋ด ๋ธ๋์น ์์ด์ง์ง ์๊ฒ ์ฒดํฌ ํด์ ์ฃผ์)
๐ป components > AppLayour.jsTypeError: Cannot read properties of undefined (reading 'user') ๋ผ๋ ์๋ฌ๋ฉ์ธ์ง๊ฐ ๋ฌ๋ค!!state๋ฅผ ์ฝ์๋ก ์ฐ์ผ๋ undefined๊ฐ ๋ ์ ๋ค์ reducer ํจ์๋ก
value๊ฐ id๊ฐ ๋๋ ๊ฒ์ด๊ณ handler๊ฐ onChangeId๊ฐ ๋๋ค