-
์ํฐ๋ ํ๋ฆฌ์จ๋ณด๋ฉ ํ๋ก ํธ์๋ ์ฝ์ค 1์ฃผ์ฐจ ํ๊ณ (3)ETC 2022. 2. 20. 19:40
์ด๋ฐ๋งํผ ๋ฐ๋ฆฐ ํ๊ณ ๋ฅผ ์ด์ฌํ ์ ์ด ๋ณด์!- ๋ผ๋์ค ๋ฒํผ์ผ๋ก ๊ธฐํ ์ค์ ํ์ฑํ
- ์นดํ ๊ณ ๋ฆฌ ์ ํ
- ํํฐ ํ๊ทธ
- ์ด๋ฏธ์ง ์ฒจ๋ถ
- ์ต์ ์ธํธ ๊ธฐ๋ฅ
- ์ํ ์ ๋ณด ๊ณ ์ ๊ธฐ๋ฅ
๋ฑ ๋ณด๊ธฐ์๋ ๊ตฌํํด์ผ ํ ๊ธฐ๋ฅ์ด ์ด~ ๋งํผ ๋ง์ด ์๋ค.
์ฌ๊ธฐ์ ๋ด๊ฐ ๋งก์ ๋ถ๋ถ์ ์นดํ ๊ณ ๋ฆฌ ์ ํ, ํํฐ ํ๊ทธ, ์ด๋ฏธ์ง ์ฒจ๋ถ ๊ธฐ๋ฅ์ด๋ค.
1. ์นดํ ๊ณ ๋ฆฌ ์ ํ
์นดํ ๊ณ ๋ฆฌ ์ ํ ๋ถ๋ถ์ ๋ธ๋ก๊ทธ ํฌ์คํ ์ผ๋ก๋ ์ฌ๋ ธ์ง๋ง, ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์ ํํ๊ณ ๋ฒํผ์ผ๋ก ์นดํ ๊ณ ๋ฆฌ๋ฅผ ํด์ ํ๋ ๋ถ๋ถ์์ ์ด๋ป๊ฒ ๊ตฌํํ๋ฉด ์ข์์ง ๋ง์ด ๊ณ ๋ฏผํ๋ค. ์ง๊ธ ์๊ฐํด ๋ณด๋ ๊ด๊ฑด์ ์ฒดํฌ ๋ฐ์ค์ checked ์์ฑ์ด์๋๋ฐ, ์ด ๊ณผ์ ์์๋ ์ฒดํฌ ๋ฐ์ค์ value์ checked ์ํ๋ฅผ ๋ฌถ์ด ๊ฐ์ฒด๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ์์ ์ ํํ๋ค.
์ด ๊ณผ์ ์ ์์ ํ์๋ค๋ผ๋ฆฌ Context API๋ฅผ ๊ณต๋ถํ๊ณ ๊ณผ์ ์ ๋์ ํ๋๋ฐ, ์ํ ๊ด๋ฆฌ ํด์ ์จ ๋ณด์ง ์์ ๋๋ก์จ๋ ๊ต์ฅํ ์ ์ธ๊ณ์๋ค. ๐คฉ
props๋ฅผ ์์ ์ปดํฌ๋ํธ๋ก ๋ณด๋ด๊ณ ๋ ๋ณด๋ด๊ณ ํ๋ ๊ฒ์ด ๊ต์ฅํ ์ฝ๋๊ฐ ๋๋ฌ์์ง๋ค ์๊ฐ์ ํ๋ฉด์๋(...) ๋ฆฌ๋์ค ๊ฐ์ ์ํ ๊ด๋ฆฌ ๋๊ตฌ๋ฅผ ๊ณต๋ถํด ๋ณด์ง ์์์ผ๋ ์ธ ์๊ฐ ์์๋๋ฐ, Context API๋ก ๊ด๋ฆฌํ๋ ์ฝ๋๋ฅผ ์ง๊ธฐ์๋ ํจ! ์ฌ! ๊ฐ๊ฒฐํด์ง๋๋ผ.
์๋ฌดํผ ๊ทธ๋์ ์ด ๋ถ๋ถ์ ์ฒซ์งธ ๋ ํ๋ฃจ๋ฅผ ๊ผฌ๋ฐ ๋ถ์ก๊ณ ์์๋๋ฐ๋ ๋ชจ๋ฅด๊ฒ ๊ธธ๋ ๋ค์ ๋ ํด๊ฒฐํ ๋ถ๋ถ์ธ๋ฐ, ์ฑ๊ณตํ๊ณ ๋๋ ์์ ๊ฐ์ด ํ์ด๋ธ๋ฆฌ๋ ์์ด์์ ๋ฆฌ์ค๋ ์ด๋น.... ๐
2. ํํฐ ํ๊ทธ
ํ ๋ฒ๋ ๊ตฌํํด ๋ณด์ง ์์ ๊ธฐ๋ฅ์ด๋ผ ๋๊ฒ ์ด๋ ค์ธ ๊ฒ ๊ฐ์์ง๋ง ๋ง์ ๊ฒ์ํด ๋ณด๋ ์๋ฃ๋ ๋ง๊ณ ์ผ๋ง ๊ฑธ๋ฆฌ์ง ์์๋ ํํฐ ํ๊ทธ.
๊ฒ์ ์กฐ๊ฑด์ ๋ง๋๋ก ํํฐ ํ๊ทธ๋ฅผ ๋์ฐ๋ ๊ธฐ๋ฅ์
Array.filter()
๋ฉ์๋๋ก ์์ฝ๊ฒ ํด๊ฒฐํ๋ค.์๋ฌดํผ๊ฐ์ Array ๋ฉ์๋๋ค์ map์ด๋ filter๋ reduce๋ ...... ์ ๋ง ์ ์ฉํ๋ค. ๋ฆฌ์กํธ๋ก ๊ฐ๋ฐํ๋ฉด์ ์ ๋ง ์ ์ฐ๊ณ ์์.
๊ทธ๋ฆฌ๊ณ ๊ณ ๋ฏผํ๋ ๋ถ๋ถ์ ๊ฒ์์ฐฝ์ ๋๋ฅด๋ฉด ํํฐ ํ๊ทธ ๋ชฉ๋ก์ด ์ข๋ผ๋ฝ ๋จ๊ณ , ํ๊ทธ ํ ๊ฐ๋ฅผ ํด๋ฆญํ๋ฉด ๋ซํ์ผ ํ๋๋ฐ ๋ฒํผ์ ํด๋ฆญํ๊ธฐ๋ ์ ์ ์ฐฝ์ด ๋ซํ ๋ฒ๋ฆฌ๋ ๋ฌธ์ ๊ฐ ์์๋ค. ์ด ๋ถ๋ถ์ ๋ฒํผ์
onClick
์ด ์๋onMouseDown
์ด๋ฒคํธ๋ฅผ ์ค์ ํด๊ฒฐํ ์ ์์๋ค.3. ์ด๋ฏธ์ง ์ฒจ๋ถ ๊ธฐ๋ฅ
ํ์ ์ ํ๋ฉด์ ๊ฐ์ ๊ตฌํํ ๊ธฐ๋ฅ์ ๊ธฐ๊ฐ ์ค์ / ๊ธฐ๋ณธ ์ ๋ณด ๋ฑ๋ก / ์ต์ ์ธํธ ๋ฑ๋ก์ฒ๋ผ ํฐ~ ํ๋ก ๋๋๊ณ ์์ ํ๋๋ฐ, ์ด๋ฏธ์ง ์ ๋ก๋ ๊ธฐ๋ฅ์ด ์ฌ๊ธฐ๋ ๋ค์ด๊ฐ๊ณ ์ ๊ธฐ๋ ๋ค์ด๊ฐ๋ฉด์ ๊ฒน์น๋ ์ํฉ์ด ๋ฐ์ํ๋ค!
๊ทธ๋์ ๊ฐ๊ฐ์ ์ฝ๋๋ฅผ ํฉ์น๋ ๊ณผ์ ์์ ์ฝ๋ ์๋์ด ์กฐ๊ธ ๊ผฌ์ธ ๊ฒ ๊ฐ๋ค...... ๐ข
๋ง์ง๋ง๊น์ง ๋ถ์ก๊ณ ์์์ผ๋ ์๋ค์ํผ ์๊ฐ์ด ๋ชจ์๋ผ๋ฉด ์นจ์ฐฉํ์ง ๋ชปํ๋ ๋ณธ๋ฅ์ด ์๊ธฐ์ ๊ฒฐ๊ตญ ๊ธฐ๋ฅ์ ์์ฑํ์ง ๋ชปํ๊ณ ์ ์ถํ๋ค.
- ๋ฑ๋ก๋ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ๊ณ ์ญ์ ํ๋ ๋ฐฉ์
- ์ด๋ฏธ์ง ๋ค์ค ๋ฑ๋ก ์ ๋ฆ๊ฒ ๋ฑ๋กํ ์์ผ๋ก ์ถ๋ ฅ
๋ฌธ์ ๊ฐ ๋๋ ๋ถ๋ถ์ ํฌ๊ฒ ์ด ๋ ๊ฐ์ง๋ก ๋๋ ์ ์์ ๊ฒ ๊ฐ๋ค.
์ฒซ ๋ฒ์งธ ๋ฑ๋ก๋ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ๊ณ ์ญ์ ํ๋ ๋ฐฉ์์, ๋ ๊ฐ์ ๊ฒฝ์ฐ์๋ ์ด์ฐจํผ ์ด๋ฏธ์ง์ ์ด๋ฆ๋ง ๋์ด๋ค!์ ์ง์คํด ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ์ ์ฅ์ ์ด๋ฏธ์ง์ ์ ๋ชฉ๋ง ๋ฐฐ์ด์ ์ ์ฅํ๊ณ , ์ญ์ ๋ ์ด๋ฆ์ ๋ฐ์์์ ์ญ์ ํ๋ ๋ฐฉ์์ ํํ๋ค.
๊ทธ๋ ์ง๋ง ๋ค๋ฅธ ํ์ ๋ถ์ ๊ฒฝ์ฐ ์ญ์ ํ๋ ๋ฐฉ์์์ ์ด๋ฆ์ด ๋ค๋ฅด๋๋ผ๋ ํ์ผ์ด ๋ค๋ฅผ ์ ์์ผ๋ ๊ณ ์ ํ id๊ฐ ๊ฐ์์ผ ์ญ์ ํ๋ค! ๋ ๋ฐฉ์์ผ๋ก ๊ฐ๋ฐํ์ จ๊ธฐ ๋๋ฌธ์ imageHandler ์ฝ๋๋ฅผ ์์ ํด์ผ ํ๋ค.
๊ทธ์น๋ง ์ฌ๊ธฐ๊น์ง๋ ๊ด์ฐฎ์์.
์ง์ง ๋ฌธ์ ๋ 2๋ฒ์ด๋ค.
์ฌ์ค ์ ์์์ ์ฒจ๋ถํ ์ธ๋ค์ผ ์น๊ตฌ๋ ํ๋๋ง ๋ฑ๋ก๋์ด์ผ ํ๊ณ , ๋ํ ์ด๋ฏธ์ง๋ ์ฌ๋ฌ ๊ฐ๋ฅผ ๋ฑ๋กํ ์ ์์ด์ผ ํ๋ค.
๊ทธ๋์ ์ด๋ฏธ์ง๋ฅผ ์ฒจ๋ถํ ๋๋ ์ฌ๋ฌ ๊ฐ๊ฐ ํ ๋ฐฉ์ ๋ค์ด๊ฐ ์ ์๋๋ก multiple ์์ฑ์ ์ถ๊ฐํ๋๋ฐ......
์ด๋ ๊ฒ ํ๋ค ๋ณด๋ ์ต์ ์์ผ๋ก ์ถ๋ ฅํ๋ ๋ฐ ์ ๋ฅผ ๋จน์๋ค.
setState์ ์๋ฌด๋ฆฌ ์คํ๋ ๋ ๋ฐฐ์ด๋ก ํผ์ณ ๋ฃ์ด๋ ์ด์ํ๊ณ ...... ์ ๋๋ค์ ๋ค์ ๋ฃ์ด๋ ์์ ๋ฃ์ด๋ ์ ๋ถ ๋ค ๋จนํต์ด์๋ค.
์๊ฐํด ๋ณด๋ ์ธ๋ค์ผ์ ์ด์ฐจํผ ํ๋๊ฐ ๋ฑ๋ก๋์ด ์์ ๋ ๋ค๋ฅธ ์ฌ์ง์ ๋ฑ๋กํ๋ฉด ์ด๊ธฐํํ๋ ๋ฐฉ์์ด๊ณ , ๋ํ ์ด๋ฏธ์ง๋ ์ฃผ๋ฅด๋ฅต ์ฐ์ํด ์ถ๋ ฅํ๋ ๋ฐฉ์์ด๋ multiple ์์ฑ์ ์ถ๊ฐํ๋ค๊ณ ์ฌ๋ฌ ๊ฐ๊ฐ ์ฒจ๋ถ๋๋ ๊ฒ๋ ์๋๋ค. ๋ฌผ๋ก multiple ์์ฑ์ ๋ฃ๊ณ ๋ ์ต์ ์์ผ๋ก ์ถ๋ ฅํ๋ ๋ฐฉ๋ฒ์ด์ผ ์๊ฒ ์ง๋ง์ ์๊ฐ๋ ์ด๋ฐํ๊ธฐ ๋๋ฌธ์ ์ฝ๊ฐ ๋ฌด๋ฆฌ์๋ ๊ฒ์ด ์๋๊น...... ์๊ฐํด ๋ณธ๋ค.
์๋ฌดํผ ๋ฆฌํฉํ ๋ง ํ ๊ฑฐ์ ใ ใ 4. git์ ์ค์์ฑ
git์ ํ์ ํ ๋ ๊ต์ฅํ ์ ์ฉํ ํด์ด๊ณ ์ค์ํ๋ค๋ ๊ฑธ ์๊ณ ์์์ง๋ง ์ด๋ฒ์ ํนํ ์ค์์ฑ์ ๋ ์ ์คํ ๊นจ๋ฌ์๋ค.
ํผ์ ํ ๋๋ ๋ฌผ๋ก add, commit, push๋ง ์ํ๋ฉด ๋๊ณ ~ ๋ญ ๋ ํฌ์งํ ๋ฆฌ์ ์ ๋ค์ด๊ฐ๋ฉด -f ์ข ์จ ๋ณด๊ณ ~ ์ปค๋ฐ ์ด์ํ๋ฉด reset์ด๋ revert๋ ์ ๋๊ฒ ํด๋ณด๊ณ ~ ํ๋ฉด ๋์ง๋ง ํ์ ํ ๋๋ ๊ทธ๋ฌ๋ฉด ์ง์ง ์ ๋๋ค. ์ด ์ฌ๋ ์ฝ๋๋ฅผ ๋ด๊ฐ ์์ ๋ฒ๋ฆด ์๋ ์๊ณ ์๋ฌดํผ ์ ๋๋ค.
ํ์ ํ ๋ ๊ฐ์ ๋ก ํธ์ํ๋ค๋ฉด ์ด ์ฌ์ง์ ์ฐธ๊ณ ํ๋ผ๋ ๊ธ์ ๋ดค๋๋ฐ ๋ฐฐ๊ผฝ์ ์ ๋น ์ก์ง๋ง ์๊ฒผ๋ค.
์๋๋ฉด~ ์ฐ๋ฆฌ๋ ์ฝ๋๊ฐ ๊ผฌ์ฌ ๋ฒ๋ ค ์ด๋ค ์ฝ๋๊ฐ ์ญ์ ๋๊ณ , revert๋ฅผ ํ๊ณ , ๋ฌด์จ ์ง์ ํด๋ ์ฝ๋ ๋ ๊ฐ๊ฐ ์ ํฉ์ณ์ง๋ ๊ธฐ์ดํ ํ์(๊ทธ๋ฅ git ๋ชจ๋ฅด๋ ๊ฑฐ๊ฒ ์ง๋ง...)์ ๊ฒช์๊ธฐ ๋๋ฌธ์ด๋ค.
์ง๊ธ ์๊ฐํด ๋ณด๋ ๋น์ฐํ๋ค. ํน์ ์ปค๋ฐ์ผ๋ก revert๋ฅผ ํ๊ณ ๋ค์ pull์ ํ๋ฉด ์ต์ ์ปค๋ฐ์ด ๋ฐ์์์ง ๊ฑฐ๋ผ๊ณ ์๊ฐํ๋๋ฐ revert๋ ํน์ ์ปค๋ฐ๊ณผ ๋๊ฐ์ ์ฝ๋๋ค์ ๋ค์! ์๋ก์ด ์ปค๋ฐ์ผ๋ก! ๋ณด๋ด๋ ๊ฒ์ด ์๋๊ฐ. ๊ทธ๋ฌ๋๊น pull์ ํ๋ฉด revert๋ก ๋๋๋ฆฐ ์ปค๋ฐ์ผ ๊ฒ์ด๋ ์ง๊ธ์ด ๊ฐ์ฅ ์ต์ ์ํ๋ผ๊ณ ๋ฐ ์๋ฐ์......
๋๊ตฐ๋ค๋ ์ด ์ผ์ ๊ณผ์ ์ ์ถ ๋ ์๊ฐ ์ ์ ๊ฒช์ด ๋๊ฐ ๋ฉ์ท๋ค. ๊ทธ๋์ git์ผ๋ก๋ ๋์ ํ ํด๊ฒฐ์ ๋ชป ํ๊ณ ์ฝ๋๋ฅผ ์์์ ์ผ๋ก ๋ถ์ฌ ๋ฃ๋ ๋ฐฉ์์ ํํ๋๋ฐ ๋น์ฐํ ํจ์จ์ฑ๋ ๋จ์ด์ก๊ณ ๋ถ์กฑํ ๋์ git ์ง์์ ๋ํด์๋ ๋ค์ ๋๋์๋ดค๋ค.
์ฌ๊ธฐ์ ์๊ฐํด ๋ณธ ๋์ git ์ฌ์ฉ ๋ฌธ์ ์ ์
merge๊ฐ ํ์ํ ์ํฉ์ git merge ๋ช ๋ น์ด๋ฅผ ์ฐ์ง ์๊ณ ๋ธ๋์น๋ง ๋ ๋ค~ ๋ฐ๊ฟ์ pull ํด ์ค๊ธฐ
git:(item) $ git pull upstream item-list
git:(item-list) $ git pull upstream item-list git:(item-list) $ git checkout item git:(item) $ git merge item-list
๊ทธ๋ฌ๋๊น ๋ ๋ฒ์งธ ๋ฐฉ์์ผ๋ก merge ํ์ง ์๊ณ ์ฒซ ๋ฒ์งธ ๋ฐฉ์์ผ๋ก ๊ฐ์ ธ์จ ๊ฒ์ด๋ค.
๋ฌผ๋ก ... ์ถฉ๋์ด ๋๊ณ ์ ํด๊ฒฐ๋ง ํ๋ฉด ์ฝ๋๋ฅผ ์ ๋ฐ์์ฌ ์๋ ์๋ค.
๊ทธ์น๋ง git merge ๋ช ๋ น์ด๊ฐ ๋ฉ์ฉกํ ์๋๋ฐ ์ ๋ฐ ๋ฐฉ์์ผ๋ก ํ๋ ๊ฒ ์ณ์ ๊ฒ ๊ฐ์ง๋ ์๋ค.
๋ฌด์๋ณด๋ค git reset๊ณผ revert๋ ๋ธ๋ก๊ทธ ๋ฐฑ ๋ฒ ๋ด๋ ์ ์ดํด๊ฐ ์ ๊ฐ๋๋ฐ, ์ง์ ์จ๋ณด๊ณ ๋ฌธ์ ๋ฅผ ์ง๋ฉดํ๊ณ ๋์ ์ฐจ์ฐจ ์๊ฐํด ๋ณด๋ ์ด์ ์ผ ์กฐ๊ธ์ฉ ์ดํด๊ฐ ๊ฐ๊ธฐ ์์ํ๋ค.
๋ ๋ฒ์งธ ๊ณผ์ ๋ถํฐ ์ด์ฐ ์ด๋ฐ ๋๊ด์ ์๊ฒจ ์ฃผ์๋? ์๊ฐํ์ง๋ง ์ฌ์ค ์ฌ๋ฏธ์์๋ค.
๊ทธ๋ฆฌ๊ณ ์ด๋ฒ ๊ณผ์ ๊ฐ ์ ์ผ ๋นก์ผ ๋๊ด๋ ์๋์์์์ ์ถํ๊ณ ๋ ๋๋ฌด ์์ฌ์์ ํ ์๊ฐ ๋์์ ๊ณ์ ํธ๋ฌ๋ธ ์ํ ์ ํ์๋ค.
ํ๋ฃจ ์ข ์ผ ๋์ ๋น ์ง๊ฒ ๋ชจ๋ํฐ ์ณ๋ค๋ณด๊ณ ๋ชฉ๋ ๊ฑฐ๋ถ์ด ๋๊ณ ๋ฐฅ ๋จน๋ ์๊ฐ๋ ์๊น์์ ๋ชจ๋ํฐ ์์์ ๋ฐฅ๋ ๋์ถฉ ๋จน๊ณ ๊ฐ๋ฐํ๋ฉด์๋ ๋งก์ ๊ธฐ๋ฅ์ ์ฑ๊ณต์ ์ผ๋ก ๊ตฌํํ์ ๋์ ๋ฟ๋ฏํจ์ ์ด๋ฃจ ๋งํ ์ ์๋ค.
๋ ๊ฐ๋ฐ์ ์ ๋ง๋ก ์ฌ๋ํ๊ฒ ๋๋ ๋ด......
'ETC' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ