> ์ฌ์๊ฐ ์๋์..? ๐ฅบ ## ๋๋ ์ด๋ป๊ฒ ๋ฒํ ผ, ์๋ ์ด๋ป๊ฒ ๊ณต๋ถํ์์ง? ๐ฅต ๊ณผ์ ์ ์๊ฐํ๋ ๊ฒ๋งํผ ๋นก์๋ค.. ๊ณผ์ ์์ ์ป์ ์ ์๋๊ฒ ๋ง์ ๋งํผ ์ด๋ฐ์ ์์ง๋๋ก๋ง ์ด์ฌํ ํ๋๊ฒ ์ ์ผ!! ์ ๋ง! ์ค์ํ์๋ ๊ฒ ๊ฐ๋ค. ### 1. ๋ฐ๋ธ์ฝ์ค์๋ง ์ง์คํ๊ธฐ ๐ (
Demo Github - Frontend GitHub - Backend ๐ธ ๊ธฐํ ๋ฐฐ๊ฒฝ ๊ตญ๋ด ํ๋ฐํ๊ฒ ์ด์๋๊ณ ์๋ ์ค๊ณ ๊ฑฐ๋ ํ๋ซํผ์ด ๋ง์ต๋๋ค. ํ์ง๋ง ๋ง์ ์ฌ๋๋ค์ด ์์ ์ด ํ๋งคํ๊ณ ์ถ์ ๋ฌผํ์ ๋ํ ์ ์ ํ ๊ฐ๊ฒฉ์ ๋ชจ๋ฅธ ์ฑ, ์ํ์ ๋ฑ๋กํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ด๋ฌํ
ํด๋น ํ์ด์ง์ ๋ด์ฉ์ผ๋ก 08์ 29์ผ TIL์ ๋ด์ฉ ์ค ์ผ๋ถ๋ฅผ ๊ฐ์ ธ์๋ค.์ด ๋๋ ์ด ์ ์ ์งํํ๋ ํฌ๋๋ฆฌ์คํธ ์ ๋์ ์คํ๋ง ์๊ฐ์ ํ๊ณ CSS๋ฅผ ์ ๊ฒฝ ์ฐ์ง ์๊ณ ๊ธฐ๋ฅ ๊ตฌํ์๋ง ์ด์ ์ ๋๊ณ ๊ตฌํ์ ์์ํ์๋ค!์ค์ ๋ก ๊ตฌํ์ ๋ง์ด ํ๋ค๊ณ ํ์ง๋ง.. API ์์ฒญ ๋ถ๋ถ ๊ณผ ํธ
9์์ด ์์๋๋ค!! ํ๋ก์ ํธ๋ก ์๊ฐ์ด ๋ฉํ ๋์๋ค... ๊ทธ๋๋ ํ๊ณ ๋ ์ ์ด๋ณด์...๋ฌด๋ ค 6์๊ฐ์ด๋ ๊ฑธ๋ฆฐ ํ์๋ค์ ์ฝ๋ ๋ฆฌ๋ทฐ..๐ง์ด ๋ฌ์ ๋ฐฐ์ ๊ธฐ๋ก ์ ์ ์ !!!!! ๐ฅณํ์๋ค์๊ฒ์ ๋ฐ์ ์ฌ๋์ ํธ์ง ๐ฅฐnotion ํด๋ก ํ๋ก์ ํธ ์์ฑ ๐์ด๋ฒ์ฃผ๋ ํธ๊ธฐ๋กญ๊ฒ ๋ชจ๋ ํ์๋ค์
๋ฒ์จ ์ฝ ํ๋ฌ์ด ์ง๋ฌ๋ค.. ์๊ฐ ์์ด๋ฆฌ ๋นจ๋ผ..ใ \_ใ ์ด๋ฒ์ฃผ์๋ ๋ค์ํ ์ผ๋ค์ด ๋ง์๋๋ฐ ๊ธฐ์ต์ ๋จ๋ ์ผ๋ค์ ํค์๋๋ก ์์ฝํ์๋ฉด..์ด ์ ๋..?ใ (์์ฝ X, ์ด๋ฒ์ฃผ ์์๋ ์ผ ๋์ด O) ๊ณผ์ ๊ตฌํ๋กํ ๋์ ์จ๋ผ์ธ ์ธ์ ๊ต์ก ๋งค๋์ ๋์ ์ง์ง๊ฑฐ๊ต์ก๋งค๋์ ๋๊ณผ์ ๋ฉด๋ด์๊ธฐ๋ค๋ฆฌ๊ณ ๊ธฐ
์ค๋ ๋ฐ๋ธ์ฝ์ค์์ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง์ ๋ํ ์ข์ ์ง๋ฌธ ์ฃผ์ ๊ฐ ๋์๋ค!์ง๋ฌธ์ ๋ํ ๋ฐฐ๊ฒฝ์ ๊ฑฐ์ณ ์์ ๊ฐ์ ์ง๋ฌธ์ด ๋์๊ณ , ๊ฒฐ๊ณผ์ ์ผ๋ก๋ "๋ ๋๋ง"์ด๋ผ๋ ์ฉ์ด๊ฐ ํฐ ํผ๋์ ์ฃผ์ด ์๊ธด ์ง๋ฌธ์ด์๋ค! ๋ ๋๋ง์ด ์๋ชปํ๋ค..์ง๋ฌธ์ ๋ํ ๊ถ๊ธ์ฆ์ ํด์๋์์ง๋ง, ํด๋ต์ ์ป๋ ๊ณผ์ ์์ ์ค
๋ ๊ฐ์๋ค ๋จ๋ ๋ฒ์จ 3์ฃผ์ฐจ๋คโฆ ์๊ฐ์ด ์์ด๋ฆฌ ๋ฐ์๊ฒ ํ๋ฌ๊ฐ๋์ง,,์ง๋์ฃผ ์๊ฐ์ ์ซ๊ฒจ ๋์ณค๋ ์ธ๋ ๊ฐ์ฌ๋์ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ๋ฒ์ค๋ ๊ฒจ์ฐ ์ซ์๊ฐ์ ํ์๋ง์ ๋ด๋ ค์ก๋คโฆ ์ด์ ์ดํดํ๋๋ฐ ๋๋๊ฑฐ๋๊ณ ..์ด๋ฒ์ฃผ๋ ์ฌํ๋ฉด์๋ ๋๋ฌด ์๊ธฐ๊ณ ์ฌ๋ฐ๋ ์ผ์ด ๋ง์๋๋ฐ ๊ทธ ์ค์ ํ๋๋ก๋ ๋
2์ฃผ์ฐจ๋ ํนํ๋ ํ์ฌ์์ ์ธ์์ธ๊ณ๋ก ๋ง์ด ํ๋ค์๊ณ ..(ใ ใทใ ใท) ํํ ๋ฐฐ์ฐ๋ ๊ฐ๋ ๋ ๋์ด๋๊ฐ ๊ทน!์ !์ธ ๊ฐ๋ (ํจ์ํ ํ๋ก๊ทธ๋๋ฐ)์ ๋ฐฐ์์ ์ ๋ง ์ ๋ง ํ๋ค์์ง๋ง.. ์ง๊ธ์ ์๋ฌด๊ฒ๋ ์ํด๋ ๊ธฐ๋ถ์ด ์ข์์ ์ ๊ผฌ๋ฆฌ๊ฐ ์ฐ๋ฃฉ ์๋ฃฉโฆโฆ\*v\*๋ด ๋ง๋๋ก ์์ฑํ๋ ํ๊ณ ์ผ๊ธฐ! 1์ฃผ์ฐจ์
๋น๋ก ์์ฑ์ 2์ฃผ์ฐจ์ ํ์ง๋ง..ใ ใ ๋น๋ฐ์ธ๊ฑธ๋ก ๐คซ (ํ๊ณ๋ฅผ ๋๋ณด์๋ฉด ์ ๋ฌด + ํ์ต + ๊ณผ์ + ์คํฐ๋ ๋ณํ..์ด๋๊น) "๋๋ฆ.. ๋ธ๋ก๊ทธ๋ ์ ์ฐ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ด์ฌํ ๊ณต๋ถํด์ง๋! ์ ๋ฌด๋ ๋ณํํด๋ ์ ํ ์ ์์๊ฑฐ์ผ!"๋ผ๋ ๊ทผ์๊ฐ์ ๋น ์ ธ์์๋ค..ํด๋ก์ ์ ์ค์ฝํ ๊ด๋ จ
ํต์ โก๏ธ ๋ ๋๋ง โก๏ธ ์คํฌ๋ฆฝํธ ์คํ๋ธ๋ผ์ฐ์ ์ ๋์ ๋จ๊ณ๋ ํฌ๊ฒ 3๋จ๊ณ๋ก ๋๋์ด์ง๋ค.์๋ฒ์์ ํต์ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋์๋ฒ๋ ์์ฒญ์ ๋ฐ๋ฅธ ํน์ ๊ฐ์ ์๋ตํ๋ฒ์ ํ๋์ฉ || ๋์์ ํต์ ๊ฐ๋ฅ์น ๋ ๋๋ง ์์ง ์ฒ๋ฆฌ๊ณผ์ ์์ธํ๋ณด๊ธฐDOM์ด๋ผ ๋ถ๋ฆฌ์ฐ๋ ๊ฐ์ฒด๋ฅผ ํ๋ฉด์ ๊ทธ๋ฆผDO
DOM ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑํ๊ธฐ ์ํด HTML์ ํ์ฑHTML์ ๊ตฌ์กฐํ๋ ์ ๋ณด์ด๊ธฐ ๋๋ฌธ์ DOM(Document Object Model), ์ผ์ข ์ ํธ๋ฆฌ ๊ตฌ์กฐ ํํ๋ก HTML ํ๊ทธ๋ค์ ๋ฐ์ดํฐ๋ก ํด์ํด์ ๋ค์ ๊ฐ์ง๊ณ ์๊ฒ ๋จํ์ฑ? ๋ฌธ์ ๋จ์๋ก ํ๋ํ๋ ํด์์ ํด์ ํด๋น ๋ด์ฉ์ด ๊ฐ์ง
ํ ๋ฒ๋์ค๋ฆฌ๊ฐ ์ต์ด์ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ฐ๋ฐ๋ท ์ค์ผ์ดํ๊ฐ ๋ค๋น๊ฒ์ดํฐ๋ฅผ ์ถ์ํ๋ฉด์ ์ต์ด์ ์์ฉ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฑ์ฅ1995๋ ์ฆ์, ๋ค๋น๊ฒ์ดํฐ๋ ํฐ ์ธ๊ธฐ๋ฅผ ์ป์ด ๋น ๋ฅด๊ฒ ์์ฅ ์ ์ ์จ 90%๋ฅผ ์ฐจ์ง์ด๋์ ์น์ HTML๋ก๋ง ์ด๋ฃจ์ด์ ธ ์ ์ ์ธ ๊ธฐ๋ฅ๋ง ์ ๊ณตํ์ฌ ๋งํฌ๋ง ์กด์ฌํ๋ ์๋ ๋ฌธ์์ ๋ณ
ํ๋ก๊ทธ๋๋จธ์ค๊ฐ ๊ณผ์ ์ ๊ธฐํํ 100% ์ ๋ถ์ง์ ๊ตญ๋น ๊ต์ก ํ๋ก๊ทธ๋จ๋ค์์ ํ๋ก ํธ์๋ ํ์ ๊ฐ๋ฐ์๋ก ๊ตฌ์ฑ๋ ๊ฐ์ฌ์ง๊ณผ ๋ฉํ ๊ธฐ์ด ์ง์๋ถํฐ ํํํ๊ฒ ๋ฐฐ์ธ ์ ์๋ ์์ง๋ฐฐ๊ธฐ ์ปค๋ฆฌํ๋ผ5๊ฐ์๋์ ๋๋ฃ๋ค๊ณผ ํจ๊ปํ๋ฉฐ ๋ค์ํ ์คํฐ๋๋ฅผ ํตํ ์ฃผ๋์ ์ธ ์ฑ์ฅ ๊ธฐํ๋ฐ์ฐฉ ๋ฉด๋ด์ ํตํ ์ปค๋ฆฌ์ด ๋ก๋๋งต