์ฝ์๋ชป๋ ๋ฐ๋ผ์ฌ ์ ์๋ ์น์ ํ ๊ฐ์ข! ํ์ ๊ฐ๋ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ์ฌ๋ก ๋ค์ด์ฃผ๋ ๋ํ์ ๊ฐ์ข!
์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด๋ถํฐ ์์ธ ๋ฌธ๋ฒ๊ณผ ๊ณ ๊ธ ์ฌ์ฉ๋ฒ
์ต์ ๋ฌธ๋ฒ๊ณผ ํ๋์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฉ๋ฒ
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํ ๊น์ด ์๋ ์ด๋ก , ์ค์ ์ง์
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํ ๊ฐ์ฒด์งํฅ๊ณผ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ
๋ ์์ปฌ ์ค์ฝํ, ํด๋ก์ ธ ๋์ ๋ฐ์ธ๋ฉ ๋ฑ์ ๊ณ ๊ธ ๊ฐ๋ ๋ค
ํ๋ก๋ฏธ์ค์ async ๋ฑ์ ํตํ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ
๋ชจ๋, ๋ฒ๋ค๋ง, ์ปดํ์ผ, ๋ฌธ์ํ ๋ฑ ์ ์ฉํ ์ค์ ํ์ฉ๋ฒ
DOM์ ํตํด ์น ๊ฐ๋ฐ์ ํ์ฉํ๊ธฐ
ํ ๋ฒ ์๊ฐํ๋ฉด ๋ค๋ฅธ ๊ฐ์๊ฐ ํ์ ์๋๋ก
์ ๋๋ก JS์ ํ๊ณ ๋ค์ด ๋ด์ ๐ ๏ธ
ํ ๋ฒ ์๊ฐํ๊ณ ๋๋ฉด ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ค์ ํ์๊ฐ ์๋ ๊ฐ์๋ฅผ ๋ง๋ค๊ณ ์ถ์์ต๋๋ค. ์ด๋ณด์๋ก์ ๊ธฐ์ด ๊ฐ์๋ฅผ ๋ค์ ํ ์ค๋ฌด์ ๋ฐ์ด๋ค์์ ๋ ๋ญ๊ฐ ๋ถ์กฑํ๋ค๋ ๋๋์ ๋ฐ๋ ๋ถ๋ค ๋ง์ผ์์ฃ ? ๊ณ ๊ธ ๊ฐ์์ ์ฝํ ์ธ ๋ค์ ์ฐพ์๋ค๋๋ฉฐ ๊ฐ์ฆ์ ์ฑ์ฐ๋ ์๊ณ ๋ก์์ ๋์ด๋๋ฆฌ๊ณ ์ ๐ผ ์ ๋ฌธ์๋ฅผ ์ํ ์๊ธฐ์ด๋ถํฐ ๐บ ์ค๋ฌด์๋ฅผ ์ํ ๊ณ ๊ธ ๊ฐ๋ ๊ณผ ํ์ฉ๊น์ง ํ ๋ฐฉ์ ์ ๋๋ก ํ๊ณ ๋๋ ๊ฐ์๋ฅผ ๊ธฐํํ๊ณ ์ค๋ ์ค๋น ๋์ ์์ฑํ์ต๋๋ค.
์ด ๊ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ฅผ ์ง์ค์ ์ผ๋ก ๊น์ด ํ๊ณ ๋๋ ๊ฐ์๋ก, ์น ๊ฐ๋ฐ ์ ์ฉ์ ๋ง์ง๋ง ์น์ ์์ ํต์ฌ ๋ถ๋ถ๋ง ๋ค๋ฃน๋๋ค. ์๊ฐ ์ ์ปค๋ฆฌํ๋ผ์ ํ์ธํด์ฃผ์ธ์.
๊ธฐ์ด๋ถํฐ ๊ณ ๊ธ๊น์ง์
๋ฌธ๋ฒ๊ณผ ๊ธฐ๋ฅ์ ์์ธํ
๊ฐ์ฒด์งํฅ, ํจ์ํ ํ๋ก๊ทธ๋๋ฐ
์ข์ ์ฝ๋ ์์ฑ ๋
ธํ์ฐ๊น์ง
๋ ์์ปฌ ์ค์ฝํ, ํด๋ก์ ๋ฑ
๋ํดํ ๊ณ ๊ธ ๊ฐ๋
๋ ์ฝ๊ฒ
๐ผ
๊ฐ๋ฐ์ ์
๋ฌธํด์ ์ด์ ๋ง
์ฝ๋ฉ์ ๋ฐฐ์ฐ๊ธฐ ์์ํ ๋ถ
๐จ
HTML & CSS๋ฅผ ๋ฐฐ์ฐ๊ณ ,
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ๋ ค๋ ๋ถ
๐ชด
๋ฆฌ์กํธ๋ ๋ทฐ ๋ฑ์ ์ฐ์ง๋ง
JS ๊ธฐ์ด๊ฐ ์์ฌ์ด ๊ฐ๋ฐ์
โ๏ธ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋๋ก
ํ๊ณ ๋ค๊ณ ์ถ์ ํ์
๊ฐ๋ฐ์
๐จ
Node.js, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ๋ฑ
JS๋ฅผ ์ฐ๋ ๋ถ์ผ์ ๊ฐ๋ฐ์
๊ตฐ๋๋๊ธฐ ์์ด ์์์์ํ ์งํ์ผ๋ก ์ฌ๋ฌ๋ถ์ ์์คํ ์๊ฐ์ ์ ์ฝํฉ๋๋ค. (์๊ฐ์์ ๋ฐ๋ผ ์๋๊ฐ ๋น ๋ฅด๊ฒ ๋๊ปด์ง ์ ์๋ ์ ์ํด ๋ถํ๋๋ฆฝ๋๋ค. ๊ผญ ๋ฌด๋ฃ ๊ณต๊ฐ ์์๋ค์ ์ดํด๋ณด์๊ณ ์๊ฐํด์ฃผ์ธ์!)
์ ํ๋ฒ ์์ฝ์ ์ฝ๊ณ ๋ช
์พํ ์ค๋ช
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ๊ณผ ๊ทธ ๋จ์ ์ฌ์ฉ๋ฒ๋ฟ๋ง ์๋๋ผ, ๋ธ๋ผ์ฐ์ ์ฝ์์ ํ์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ค ์์ผ๋ก ๋์ํ๋์ง, ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ๋ค์ด ์ด๋ค ๊ตฌ์กฐ๋ก ์ด๋ฃจ์ด์ ธ ์๋์ง ๋ฑ์ ๊น์ด ์๊ฒ ํ๊ณ ๋ญ๋๋ค. ์์ธํ ํ์ต์ ์ํด ์๋ง์ ์์ ์ฝ๋๋ค์ด ์ค๋น๋์ด ์์ต๋๋ค.
์์ ํ๊ณ ๋ง๋ ์์ ๋ค๊ณผ ๋ํ
์ผํ ์ค๋ช
์ ํตํด ์ ๋๋ก ํ๋ ํ์ต
๊ฐ๋ง๋ค ์์์ ์ฃผ์ ํฌ์ธํธ์ ๋ณต๋ถ ๊ฐ๋ฅํ ์ค์ต ๋ช
๋ น์ด์ ์ฝ๋๊ฐ ์นํ์ด์ง์ ์ ๋ฆฌ๋์ด ์์ด์, ์ด๋ฅผ ๋ฐ๋ผ ํ๊ณ ์์ฉํ๋ฉฐ ์์ํ ์ค์ต์ ์งํํ ์ ์์ต๋๋ค. ์๋ํฐ๋ฅผ ๋ฐ๋ก ์ฌ์ฉํ ํ์ ์์ด, ๋ธ๋ผ์ฐ์ ์ ์ฝ์ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ๊ฐํธํ๊ณ ๋ ๋ณด๋ค ํจ๊ณผ์ ์ผ๋ก ์ค์ต์ด ์งํ๋ฉ๋๋ค.
๊ฐ์ ํ์ด์ง์ ๋ธ๋ผ์ฐ์ ์ฝ์์ ํ์ฉํ ํธ๋ฆฌํ๊ณ ํจ์จ์ ์ธ ์ค์ต
ํ์๋ถ๋ค๋ ๋ถ๋ด ์์ด ๊ณต๋ถํ์ค ์ ์๋๋ก, ์ ๋ฐ ๋ถ๋์ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ํตํด ๋ฌด๋ฃ๋ก ๊ณต๊ฐํฉ๋๋ค.
๐ Section 0. ์ธํธ๋ก
๐ฑ Section 1. ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ
๐ฒ Section 2. ์๋ฃํ๊ณผ ์ฐ์ฐ์
๐ฅ Section 3. ์ ์ด๋ฌธ
๐ฆพ Section 4. ํจ์
๐ง Section 5. ๊ฐ์ฒด์ ํด๋์ค
โ๏ธ Section 6. ์ฃผ์ ๋นํธ์ธ ๊ฐ์ฒด
๐ก Section 7. ๋ฐฐ์ด
๐ฉป Section 8. ๊ฐ์ฒด ๊น๊ฒ ๋ค๋ฃจ๊ธฐ
๐งฎ Section 9. ์ถ๊ฐ ์๋ฃํ๋ค
๐ Section 10. ์ดํฐ๋ฌ๋ธ๊ณผ ์ ๋๋ ์ดํฐ
โ๏ธ Section 11. ๋ฌธ์ ๋ค์ ๋๋นํ๊ธฐ
๐ฆ Section 12. ์ค์ฝํ์ ๋ฐ์ธ๋ฉ
๐งฌ Section 13. ํ๋กํ ํ์
๐ฃ๏ธ Section 14. ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ
๐ป Section 15. ์ฝ๋ํ์ผ ๋ค๋ฃจ๊ธฐ
๐ Section 16. ์นํ์ด์ง์ ํ์ฉํ๊ธฐ
Q. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ๋ฉด ๋ฌด์์ ํ ์ ์์๊น์?
A. ์ค๋๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฉ๋๋ ๋ฌด๊ถ๋ฌด์งํฉ๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์์ ๋ฟ ์๋๋ผ, Node.js ๊ธฐ๋ฐ์ ์๋ฒ๋ ๊ตฌ์ถํ ์ ์์ฃ . ๋ชจ๋ฐ์ผ ์ฑ์ด๋ ๋ฐ์คํฌํ ํ๋ก๊ทธ๋จ๋ ๋ง๋ค ์ ์๊ณ ๋จธ์ ๋ฌ๋์๋ ํ์ฉํ ์ ์์ต๋๋ค.
Q. ํ๋ก๊ทธ๋๋ฐ์ ์ฒ์ ์ ํ๋๋ฐ ์์ ์ ๋ค์ ์ ์์๊น์?
A. ์ฝ๋ฉ์ด ์ฒ์์ธ ์ฌ๋๋ค๋ ๋ฐ๋ผ์ฌ ์ ์๋๋ก ๊ฐ์๋ฅผ ๊ธฐํํ๊ณ ์ ์ํ์ต๋๋ค. ๋น์ ๊ณต์๋ ์ด๋ ค์ ์์ด ์์๋ค์ ์ ์๋๋ก ์ฌ์ด ์ฉ์ด๋ค์ ์ฌ์ฉํ๊ณ , ํ๋ก๊ทธ๋๋ฐ ๊ฒฝํ์ด ์๋ ์ฌ๋๋ค์ ์ํด ์ฝ๋์ ๋์ ์๋ฆฌ๋ฅผ ์์ธํ ์ค๋ช ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ฝ์์ ํ์ฉํ๋ฏ๋ก ๋ณต์กํ ์ค์น๊ณผ์ ์์ด๋ ๊ฐ์๋ฅผ ์๊ฐํ ์ ์๊ณ , ๊ฐ์ํ์ด์ง๋ฅผ ๋ณด์กฐ๊ต์ฌ๋ก ํ์ฉํ์ฌ ์ค์ต์ ์ฐจ๋ถํ ๋ฐ๋ผ์ฌ ์ ์์ต๋๋ค. ๋ค๋ง ์๊ฐ์์ ๋ฐ๋ผ ์งํ์ด ๋งค์ฐ ๋น ๋ฅด๊ฒ ๋๊ปด์ง ์ ์์ผ๋, ์์ฝ ๊ฐ์๊ฐ ์ฒ์์ด์๋ผ๋ฉด ๋ฌด๋ฃํํธ๋ฅผ ๊ผญ ๋ฏธ๋ฆฌ ํ์ธํด๋ณด์ธ์.
Q. ์ด๋ฏธ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ค๋ฌด๋ฅผ ํ๊ณ ์๋๋ฐ, ๊ฐ์๊ฐ ์ผ๋ง๋ ๋์์ด ๋ ๊น์?
A. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ '์ ๋นํ'๋ง ์์๋ ๊ฐ๋ฐ์ ํ ์๋ ์์ง๋ง, ์ด๋ฅผ '์ ๋๋ก' ๊น์ด ์๊ฒ ๊ณต๋ถํด ๋ณธ ๊ฒฝํ์ด ์๋ค๋ฉด ์ด ์ธ์ด์ ํน์ฑ๊ณผ ๊ฐ์ ์ ์ค๋ฌด๋ก ๋์ด๋ด๋ ๋ฐ ํ๊ณ๊ฐ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์์ ํ๊ณ ํ๊ณ ๋๋ ์ด ๊ฐ์๋ฅผ ์๊ฐํ๊ณ ๋๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ '์๋ฐ์คํฌ๋ฆฝํธ๋ต๊ฒ' ์ฌ์ฉํ ์ค ์๊ฒ ๋๊ณ , ๊ทธ๋์ ์ฌ์ฉํด ์จ ๊ธฐ๋ฅ๋ค์ ๋ถ์ํ๊ณ ๋ณด๋ค ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๋ ๋ฒ๋ ๋ฐฐ์ฐ๊ฒ ๋ ๊ฒ์ ๋๋ค. ๋ํ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํด ์๋ ๊ฒ๊ณผ ๋ชจ๋ฅด๋ ๊ฒ์ ๋๋ฃจ๋ญ์ ํจ์์ ๋ฒ์ด๋, ์ด ์ธ์ด๋ก ๋ฌด์์ด๋ ํ ์ ์๋ค๋ ์์ ๊ฐ์ ๊ฐ๊ฒ ๋ ๊ฒ์ ๋๋ค.
Q. ์ด ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด ์น ๊ฐ๋ฐ์ ํ ์ ์๊ฒ ๋ ๊น์?
A. ๋ณธ ๊ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ธ์ด ์์ฒด์ ๋ฌธ๋ฒ๊ณผ ์ด๋ก ์ ์ง์, ๊ทธ๋ฆฌ๊ณ ๊ณ ๊ธ ํ์ฉ๋ฒ ๋ฑ์ ๊น์ด ์๊ฒ ํ๊ณ ๋ค๊ธฐ ์ํด ๋ง๋ค์ด์ก์ต๋๋ค. 16๊ฐ ์ค ๋ง์ง๋ง ์น์ ์์ DOM์ ๋ฐฐ์ฐ๊ณ HTML, CSS์ ์ฐ๊ณํ์ฌ ์น์ฌ์ดํธ์ ํ์ฉํ๋ ์ค์ต์ ํ์ง๋ง ์ด๋ค์ ๋ํด์๋ ํต์ฌ์ ์ธ ๋ถ๋ถ๋ค, ๊ทธ๋ฆฌ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ด์ ์์ ์ฌ์ธต์ ์ผ๋ก ๋ถ์ํ๋ ๋ด์ฉ ์์ฃผ๋ก ๋ค๋ฃน๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์ค์ตํ๋ ์น ๊ฐ๋ฐ ๊ฐ์๋ ๊ธฐํ๊ฐ ๋๋ค๋ฉด ๋ฐ๋ก ๋ง๋ค๋๋ก ํ๊ฒ ์ต๋๋ค.
Q. HTML๊ณผ CSS ๊ด๋ จ ์ง์์ด ํ์ํ๊ฑฐ๋ ๋์์ด ๋ ๊น์?
A. (์์ ์ง๋ฌธ๊ณผ ์ฐ๊ฒฐ๋จ) ์นํ์ด์ง์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํ๋ ๋ถ๋ถ์ ๋ง์ง๋ง ์น์ ์์๋ง ๋์ค๊ธฐ ๋๋ฌธ์, ๊ทธ ์ด์ 15๊ฐ ์น์ ๋ค์์๋ HTML๊ณผ CSS์ ๋ํด ๋ชจ๋ฅด์ ๋ ๊ฐ์๋ฅผ ์๊ฐํ์๋ ๋ฐ ์ง์ฅ์ด ์์ต๋๋ค. ๊ธฐ์ด์ ์ธ ์ง์์ ๊ฐ๊ณ ์์ผ์๋ค๋ฉด ์น์ 16๋ ํฐ ๋ฌด๋ฆฌ ์์ด ์๊ฐํ์ค ์ ์์ต๋๋ค.
Q. ๊ฐ์ ์๋๊ฐ ๋นจ๋ผ์ ์ด๋ ต์ง ์์๊น์?
A. ์์์ ์งํ์ ๋น ๋ฅด์ง๋ง, ๊ฐ ๊ฐ๋ง๋ค ๊ฐ์ ํ์ด์ง๊ฐ ๋งํฌ๋์ด ์์ด์ ์์์ ๋ด์ฉ์ ํธํ๊ฒ ๋ณต์ตํ๊ณ ์ค์ตํ ์ ์๋๋ก ํด๋์์ต๋๋ค. ํ์ด์ง ๊ณณ๊ณณ์ ์์ ๋ค๊ณผ ๋ธ๋ผ์ฐ์ ์ฝ์์ ํ์ฉํด์, ์ฌ๋ฌ๋ถ์ ์๊ฐํจ์จ์ ์ต๋ํ๋๋ก ํ์ฉํ๋ ํ์ต์ ์งํํ์ค ์ ์์ ๊ฑฐ์์!
์ ํ๋ธ ์ฑ๋ ์ํํ ์ฝ๋ฉ์ฌ์ ์ ๋ฐฉ์กํ๋ ์ ํ๋ฒ์ด์, IT์์ ๋ค์ ์งํํ๋ ์๊ฐ์ ๋๋ค. ํ์คํ ๊ฐ๋ฐ์๋ก ์ผํด ์จ ๊ฒฝํ์ ์ด๋ ค, ์ด๋ ค์ด ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋ ๋ค์ ์ด๋ณด์๋ค์ด ์ดํดํ๊ธฐ ์ฝ๋๋ก ๋น์ ์ ์ฌ์ด ์์ , ๋๋ก๋ ์ ๋๋ฉ์ด์ ์ผ๋ก ์ค๋ช ํ๋ ์ปจํ ์ธ ๋ค์ ๋ง๋ค๊ณ ์์ต๋๋ค.
๐ฌ YouTube ์ํํ ์ฝ๋ฉ์ฌ์ ์ฑ๋ (ํด๋ฆญ!)
๐ ์์ฝ์ ์ฑ
๋ค ๋ณด๋ฌ๊ฐ๊ธฐ (ํด๋ฆญ!)
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์ฝ๋ฉ์ ๋ฐฐ์ฐ๊ธฐ ์์ํ๋ ์ฌ๋
์น ๊ฐ๋ฐ์ ์์ํ๊ณ ์ถ์ ์ฌ๋
๋ฆฌ์กํธ๋ ๋ทฐ๋ฅผ ๋ค๋ฃจ์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ ์ง์์ ๊น์ด๊ฐ ์์ฌ์ด ๊ฐ๋ฐ์
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ '์ ๋๋ก' ํ๊ณ ๋ค์ด๋ณด๊ณ ์ถ์ ํ์ญ ๊ฐ๋ฐ์
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ณด๋ค ์ ํ์ฉํ๊ณ ์ถ์ ์ฌ๋
26,824
๋ช
์๊ฐ์
1,140
๊ฐ
์๊ฐํ
80
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
14
๊ฐ
๊ฐ์
์ ํ๋ธ ์ฑ๋ ์ํํ ์ฝ๋ฉ์ฌ์ ์ ๋ฐฉ์กํ๋ ์ ํ๋ฒ์ด์, IT์์ ๋ค์ ์งํํ๋ ์๊ฐ์
๋๋ค. ํ์คํ ๊ฐ๋ฐ์๋ก ์ผํด ์จ ๊ฒฝํ์ ์ด๋ ค, ์ด๋ ค์ด ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋
๋ค์ ์ด๋ณด์๋ค์ด ์ดํดํ๊ธฐ ์ฝ๋๋ก ๋น์ ์ ์ฌ์ด ์์ , ๋๋ก๋ ์ ๋๋ฉ์ด์
์ผ๋ก ์ค๋ช
ํ๋ ์ปจํ
์ธ ๋ค์ ๋ง๋ค๊ณ ์์ต๋๋ค.
๐ฌ YouTube ์ํํ ์ฝ๋ฉ์ฌ์ ์ฑ๋ (ํด๋ฆญ!)
๐ ์์ฝ์ ์ฑ
๋ค ๋ณด๋ฌ๊ฐ๊ธฐ (ํด๋ฆญ!)
์ ์ฒด
81๊ฐ โ (13์๊ฐ 3๋ถ)