โ๏ธ ์ฃผ๋ง์ ์ ์ ์์ฃผ ํน ๋ณด์ถฉ ํด์ฃผ์๋๋ ์ผ์ด๋๋ ๊ฒ ๊ฐ์ดํ๋ค.
์ด๋ฐ ๊ฐ์ดํ ๊ธฐ์ ์ผ๋ง๋ง์ธ์ง?
์ค๋์ ์์ฝ๋์์์ 3์ฃผ์ฐจ ์ฒซ ๋ ! ๋๋์ด ๋๋ง์ Foundation course๊ฐ ์์๋์๋ค.
์ด์ ๊น์ง์ Pre-course๋ ์ฝ๊ฐ ์๋ฐ ์
๊ณผ ๊ฐ์ ์ฝ์ค๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค. ๋ฉํ ๋๋ค๊ป์๋ ์ง๊ธ๋ถํฐ๊ฐ ์ง์ ํ ์์์ด๋ผ๊ณ ํ์
จ๋ค. ํ๋ค์ด์ง ๊ฑฐ๋ผ๊ณ ์ธ๊ธํ์
จ๋๋ฐ.. ๋ฒ์จ ๋๋ ต๋ค โ ๏ธ
์ด์ ๊ณง React ์ธ์ ๋ ์์๋ ํ ๋ฐ, ๊ฑฑ์ ์ด ํฌ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๊น์ง๋ ๊ทธ๋๋ ์์ต์ ํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๋ฐ๋ผ๊ฐ๋ ๊ฒ ํฐ ์ด๋ ค์์ ์์๋๋ฐ, ๋ฆฌ์กํธ๋ถํฐ๋ ์์ ์ด๋ฉด์ด๋ค. ๋ฏธ๋ฆฌ ๋ง์์ ์ค๋น๋ฅผ ํด์ผ๊ฒ ๋ค.
๐ ์ํ๋๊ณผ ํจ๊ปํ foundation ์ฝ์ค์ ์์์ ์๋ฆฌ๋ Kick off๋ฅผ ํตํด ๋ค ๊ฐ์ด ํ์ดํ ์ธ์ณค๋ค. ์์ผ๋ก์ ์ผ์ ์ด ์ด๋ป๊ฒ ๋๋ ์ง, ์ด๋ค ๊ณผ์ ์ด ์งํ ๋ ๊ฒ์ธ์ง์ ๋ํด ๊ฐ๋จํ ์ค๋ฆฌ์ํ ์ด์ ์ ์งํ ํ๋ค.
๐ ์ฅํ๋๊ณผ ํจ๊ป ๋๊ธฐ๋ค์ PR์ ํ๋ฐฉํ๋ค. ์ฅํ๋์ด ์ง์ ์ฝ๋๋ค์ ์ดํด์ฃผ์๋ฉด์ ์์ ํด์ผ ํ ์ , ์ฃผ์ ํด์ผ ํ ์ ๋ค์ ๋ํด ์ธ์ธํ ์๋ ค ์ฃผ์ จ๋ค. ์๋ฅผ ๋ค๋ฉด ์คํ์ด ๋์ง ์๋ ์ฝ๋๋ push ํ์ง ๋ง ๊ฒ, HTML์์ indentation์ 2์นธ ์ ๋๋ก ์กฐ์ ํ ๊ฒ (๊ฐ๋ ์ฑ์ ์ํด), CSS Convention ์งํฌ ๊ฒ ๋ฑ ์์ฃผ ๊ธฐ๋ณธ์ ์ด์ง๋ง ์์นซ ๊ทธ๋ฅ ์ง๋์น ์ ์๋ ๋ถ๋ถ๋ค์ ๋ํด์ ์ธ๊ธ ํด์ฃผ์ จ๋๋ฐ, ์ด ์ธ์ ์ ํตํด ๋ค์ ํ ๋ฒ ์ ๋ฆฌํ ์ ์์๋ค.
๋ด ์ฝ๋์ ๋ํด์๋ ์ง์ด์ฃผ์ ๋ถ๋ถ์ด ์์๋๋ฐ, ๋ฐ๋ก HTML indentation์ ๊ด๋ จ๋ ๋ถ๋ถ์ด์๋ค. ๋์ด์ผ๋ณด๋ ๊ต์ฅํ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ์๋ค๋ ๊ฑธ ์๊ฒ ๋์๋ค. ์ฅํ๋์ ๋ง์๋๋ก, ์ฝ๋ ํ๋ ํ๋๋ฅผ ์กฐ๊ธ์ฉ ๊ณ ์ณ ๋๊ฐ๋ค. ๋ถ๋ชจ ์์ ์์๊ฐ ํ ๋์ ๋ด๋ ๊ตฌ๋ถ ๋ ์ ์๊ฒ, ๊ทธ๋ฆฌ๊ณ div ์์ ๋ค์ด ์๋ ์์๊ฐ ๋ฌด์์ธ์ง ๋ฐ๋ก ์์๋ณผ ์ ์๊ฒ ๊ณ ์น๋ ๊ฒ์ด ํต์ฌ์ด์๋ค!
์ ์ฌ์ ์๋งํ ๋ฐ์ฐฌ๋ค๊ณผ ๋ฐ์ ๊ณ๋ ์ฌ๋ฆฐ ๋น๋น๋ฐฅ์ผ๋ก ๋๋ฑ ํด๊ฒฐ!
๋ฐฅ ๋จน๊ณ ์๊ฐ์ด 30๋ถ ์ ๋ ๋จ์์ ์๋ง๋ ๊ฐ๋จํ๊ฒ ์ปคํผ ํ ์ ํ๋ฉด์ ์ด์ผ๊ธฐ ๋๋ด๋ค.
์์ฆ ๋๋ฌด ๋ฐ์ ํ๋ฃจ ํ๋ฃจ๋ฅผ ๋ณด๋ด๋ค ๋ณด๋, ๊ฐ์กฑ๋ค๊ณผ ํจ๊ปํ๋ ์์ํ ์๊ฐ๋ค์ด ์ฌ๋ผ์ก๋ค. ํํ์ด ์กฐ๊ธ์ฉ ํ์ฉํด์ผ์ง.. ๐ฅบ
์ญ์๋ ๐ฅ ๋ถ์ฝ๋ฉ ์๊ฐ์ด์๋ค.
ํด๋ก ์ฝ๋ฉ์ ์งํํ๋ฉด์, ์ค๊ฐ์ ์ฅํ๋์ด ๋ฌ์์ฃผ์ ๋ฆฌ๋ทฐ ์ฌํญ๋ค์ ์ฐธ๊ณ ํด์ ์ฝ๋ ์์ ์ ํํ์ด ํ๋ค. ์ด์ฌํ ๊ณ ์ณค๋ค๊ณ ๊ณ ์ณ์ push ํ๋ ์ฝ๋๋ค์ธ๋ฐ, ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ๋ถ์กฑํ ๋ถ๋ถ๋ค์ด ๋ง์๋ค. ๊ทธ๋๋ ์ฒซ ๋ฒ์งธ ๋ฆฌ๋ทฐ ๋ณด๋ค๋ ํจ์ฌ! ํจ์ฌ ์์ ์ฌํญ์ด ์ค์๋ค. ์ฌ์ง์ด, ์นญ์ฐฌ๋ ๋ฐ์๋ค. ( ๋ฐ๋ด ์ธ ๊ฐ๋!) ์ฒ์์ผ๋ก ๋ฐ์๋ณด๋ ์ฝ๋ ์นญ์ฐฌ์ ๊ธฐ๋ถ์ด ๋๋ฌด ์ข์๋ค. ๊ทธ ์ฝ๋๋ ๋ด๊ฐ ์์ฒญ๋๊ฒ ๋ง์ ์๊ฐ์ ํฌ์ํด์ ๊ฒจ์ฐ ๊ตฌํํ๋ ์ฝ๋๋ผ, ๋ญ๊ฐ ๋ด ๋ ธ๋ ฅ์ ์ธ์ ๋ฐ์ ๊ธฐ๋ถ์ด์ด์ ๋ ๋ฟ๋ฏํ๋ค.. ์ด๋์ ์ฝ๋ฉํ๋ ์ถ์ ์๊ฐ์ด์๋ค.. ๐
์์ ์์ฒญ ์ฌํญ์ ๋ฐ์ํ ๋ค, ์๋ ํ๋ ํด๋ก ์ฝ๋ฉ์ ๊ณ์ ์งํํ๋ค.
๊ทธ๋ฐ๋ฐ, ์ด์ ์ ๋ ๊ดด๋กญํ๋ ํ ๊ธ ๊ธฐ๋ฅ์ฒ๋ผ ๋ ํ ๊ฐ์ง๊ฐ ๋๋ฌด ๋ ๊ดด๋กญํ๋ค.
๋ฐ๋ก ์ํฐ ํค ์
๋ ฅ ์, ๋๊ธ์ด ์ถ๊ฐ๋๋ ๊ธฐ๋ฅ! ์ด๋ป๊ฒ ์ง์ผํ ์ง ๋์ถฉ ๋จธ๋ฆฟ ์์ผ๋ก๋ ๊ทธ๋ ค์ง๋ ๋ฐ ์ด๊ฒ ์ญ์ ๊ตฌํ์ด ์ ๋๋ค..^^ ๐ ๋ ํ๋ฆฟ์ ํ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๊ฐ ์ ์ ํ๋๋ฐ.. ์ค์ ์์์ ๋๋ ๋๋ฌด ๋ถ์กฑํ ์ฌ๋์ด์๋ค. ์ญ์๋ ํ์ฐธ ๋์์ด๋ ๋จธ๋ฆฌ๋ฅผ ์ธ๋งค๊ณ ์์๋ค. ๊ฒฐ๊ตญ, ๊ตฌํ์ ์ฑ๊ณตํ์ง ๋ชปํ๋ค.
ํ์ง๋ง ํ ๊ธ ๊ธฐ๋ฅ๋ ๊ฒฐ๊ตญ์ ์ฑ๊ณตํ ๊ฒ์ฒ๋ผ, ์ด๋ฒ์๋ ์ฑ๊ณตํ ๊ฒ์ด๋ผ๊ณ ๋ฏฟ๋๋ค..?
๐ ์ค๋๋ถํฐ ์ฝ๋ ์นดํ๊ฐ ์งํ๋๋ค. ์ฝ๋ ์นดํ๋ผ ํจ์, ๋ ๋ช ์ด์ ์ง์ด ๋์ด ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ฅผ ํ์ด๋๊ฐ๋ ์๊ฐ. ํ ๋ช ์ driver, ๋ค๋ฅธ ํ ๋ช ์ navigator์ ์ญํ ์ ๋งก์ ํจ๊ป ์ฝ๋๋ฅผ ํ์ด๋๊ฐ์ผ ํ๋ค. ์ฝ๋ ์นดํ๋ฅผ ๋ณธ๊ฒฉ์ ์ผ๋ก ์งํํ๊ธฐ ์ , ์ํ๋๊ณผ ์ฅํ๋๊ป์ ๋ ๋ถ์ด ์ฝ๋ ์นดํ ํ์๋ ๋ชจ์ต์ ๋ณด์ฌ์ฃผ์ จ๋ค. ์๊ฐ์ด ์ง๋ ๋ค ๊ฐ๋ฐ์๋ก์ ํ์ฌ ๋ฉด์ ์ ๋ณด๋ฌ ๊ฐ๊ฒ ๋๋ฉด, ์ง์ ์ฝ๋๋ฅผ ํ์ด๋ณด๋ผ๊ณ ํ๋ ๊ฒฝ์ฐ๋ ๋ง๋ค๊ณ ํ๋ค. ๊ทธ๋ด ๊ฒฝ์ฐ๋ฅผ ๋๋นํ๋ ๊ฒธ, ๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ ๋ฐ ํ์ ๋ฅ๋ ฅ๊น์ง ๋ชจ๋ ๊ธฐ๋ฅด๋ ์ ์ตํ ์๊ฐ์ด ๋ ๊ฒ ๊ฐ๋ค.
๐ ์ฝ๋ ์นดํ ์งํ.
์ง์ด ๋์ ์ง๊ทผ๋์ด ๊ธํ ์ผ๋ก ์ธํด ์ ์ ๋ถ์ฌ์ค์ด์
์, ์ค๋์ ์ํ๋๊ณผ ์ฝ๋ ์นดํ๋ฅผ ์งํํ๋ค. ์ํ๋์ด ์๊ฐํ์ ๋ฐฉ๋ฒ ๋๋ก ํ ๋ฒ, ๋ด๊ฐ ์๊ฐํ ๋ฐฉ๋ฒ ๋๋ก ํ ๋ฒ ์ฝ๋๋ฅผ ์ง์ ๊ตฌํํด๋ณด์๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก๋ ๋ชจ๋ ์ฑ๊ณต, ํ
์คํธ๋ ํต๊ณผ! ์ฝ๋ ์นดํ์ ๊ฐ์.. ๋๊ตฐ๊ฐ์ ํจ๊ป ์ฝ๋๋ฅผ ์ง๋ณด๋ ์ด๋ฐ ๊ฒฝํ์ ๋์ ์ฒ์์ด์๋๋ฐ ์๊ฐ๋ณด๋ค ์ฆ๊ฑฐ์ ๋ค. ๋น์ํ๋๊ณผ ํจ๊ป ํด์ ๊ทธ๋ด ์ง๋? ๐
์๊ฐ๋ณด๋ค ์ฝ๋ ์นดํ ๋ฌธ์ ๋ ์ฌ์ด ํธ์ ์๋์๋ค. ์ฒซ ๋ฌธ์ ๋ถํฐ ์ํ ๋ฌธ์ (?) ์ฐ์ ๋ฌธ์ (?)๊ฐ ๋ฑ....! ๊ทธ๋ ์ง๋ง ๋ง์ ๊น๋๊ณ ๋ณด๋ฉด ๋จ์กฐ๋ก์ด ๋ก์ง์ด์๋ค. ๋ค๋ง ๋ฌธ์ ์์ฒด๊ฐ ๋๋ฌด ์ด๋ ต๊ฒ ์ค๋ช ๋์ด ์์ด์, ํ ๋ ์ธ๋ฒ ์ฝ๊ณ ์์ผ ์ ๋๋ก ํ์ ํ๊ณ ์ฝ๋ ์์ฑ์ ํ ์ ์์๋ค. ๐
์ฝ๋ ์นดํ๋ ํ๋ฃจ์ ๋ฑ ํ ์๊ฐ์ฉ๋ง ์งํ๋๋ค. ๋ง์ฝ 1์๊ฐ์ด ๋์ด๊ฐ๋ฉด, ๋ชป ํ์๋ค๊ณ ํ๋๋ผ๋ ๋ง๋ฌด๋ฆฌํ๊ณ ์๋ ํ๋ ์์ ์ ์งํํ๋ ๊ฒ์ด ์ข๋ค. ๋ฉํ ๋๋ค๋ ๊ทธ๊ฒ์ ๊ถ์ฅํ์ จ๋ค. ์ค๋์ ๋น ๋ฅด๊ฒ ๋๋ฌ์ง๋ง, ๋ค๋ฅธ ๋ ์ ์ด์ฐ๋ ์ง ๋ชจ๋ฅด๋.. ๋ฏธ๋ฆฌ ๋ง์์ ์ค๋น, ๋จธ๋ฆฌ ์ธ ์ค๋น๋ฅผ ํด์ผ ๊ฒ ๋ค.
์ดํ ์๊ฐ์ ์๋ ํ๋ ํด๋ก ์ฝ๋ฉ ์งํ.
ํ๋ฃจ๋ฅผ ๋ง๋ฌด๋ฆฌํ๋ Wrap-up ์๊ฐ ํ, ์ ๋ ์ ๋จน์๋ค. ์ ๋ ์ ๋จน๊ณ ํด์์ ์ทจํ ํ, ๋ค์ ๊ธฐ๋ฅ ๊ตฌํ ๋ก์ง์ ํ์ฌ๊น์ง๋ ๋ฉ์ฌ ์๋ค. ๋ ๊ตฌํํ ์ ์๋ ๊ฑฐ๋.....๐คฏ ์๋ฌด๋๋ MDN๊ณผ Stackoverflow๋ฅผ ๋ค์ ๊ฑฐ๋ ค ๋ด์ผ๊ฒ ๋ค.
โจ ์๊ฐ์ ๋ฆฌ
์ฃผ๋ง์ ์ ์ฌ๊ณ , ์ ๋จน๊ณ , ์ ํ์ตํ๊ธฐ ๋๋ฌธ์ ๊ธฐ๋ถ ์ข๊ฒ ์์์ผ์ ๋ง์ดํ๋ค. ๋ค๋ง, ๋ด ๋ง๋๋ก ๋์ง ์๋ ์ฝ๋๋ค ๋๋ฌธ์ ๋จธ๋ฆฌ๊ฐ ๋งค์ฐ ์ํ๋ค. ์์ TIL๋ค์์ ํญ์ ์ธ๊ธํ์ง๋ง, ๋ด ๋ง๋๋ก ์ฝ๋๊ฐ ์งํ๋์ง ์๊ณ , ์คํ๋์ง ์์ผ๋ฉด ์คํธ๋ ์ค๊ฐ ์์ฐฝ ์จ๋ค. ์ด๋ฌ๋ฉด ์๋๋๋ฐ.. ๐ฟ ์์ผ๋ก ์ด๋ฐ ์ํฉ์ ์์ฒญ๋๊ฒ ๋ง์ด ๋ถ๋ชํ ํ
๋ฐ, ๊ทธ๋ด ๋๋ง๋ค ์ค์ค๋ก ์ ๋ค์ค๋ ค์ผ ํ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ ๋ค.
๋จธ๋ฆฌ๋ฅผ refresh ์ํจ ๋ค์, ๋ค์ ํ ๋ฒ ์ ๋๋ก ํ๊ณ ๋ค์ด์ผ๊ฒ ๋ค. ํฌ๊ธฐ๋ ์ด๋ฅด๋ค. ๋ ๋๊น์ง ํด๋ณด์! ํ์ดํ
๐ช
๊ถ๊ธํ ์ ์ด ์๋๋ฐ ํน์ ์คํ์นดํก์ผ๋ก ์ง๋ฌธ๋๋ ค๋ ๊ด์ฐฎ์ผ์ค๊น์?ใ ใ ์์ฝ๋ ํ์คํ ๊ณ ๋ฏผ์ค์ด๋ผ ๊ผญ ๋ถํ๋๋ฆด๊ป์ฉ..!!ใ ใ https://open.kakao.com/o/sErBOwld
์งํ๋ ์ ๊ฐ ์ธ์ ๋ ๋ค์์ ์์ํ๊ณ ์์ต๋๋ค โฃ๏ธ