์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ตํ๋ฉฐ
์ฃผ๋์ ์ธ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๊ธฐ โจ
'๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ' ์ ์ ์ง๊ฐ!
ํ์คํ ์น ๊ฐ๋ฐ์ ๋ก๋๋งต ๐ฅ๏ธ
- ๋ณธ ๊ฐ์๋ ํ์คํ ์น ๊ฐ๋ฐ์ ์์ฑ์ ์ํ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] ๊ฐ์ ์๋ฆฌ์ฆ ์ค ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํด ๋ค๋ฃจ๋ ๊ฐ์์
๋๋ค.
- ์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค๋ HTML&CSS โ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ โ ๋ถํธ์คํธ๋ฉ โ Vue.js โ ๋ฐ์ดํฐ๋ฒ ์ด์ค โ Node.js โ ํฌํธํด๋ฆฌ์ค๊น์ง ํ์คํ ์น ๊ฐ๋ฐ์ ์ํ ์ ๊ณผ์ ์ ํฌํจํ๊ณ ์์ต๋๋ค.
- ์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค๋ฅผ ๋ชจ๋ ์๊ฐํ๋ฉด ์ฌ๋ฌ๋ถ์ ์น ๊ฐ๋ฐ์ ๋ํ ๊ธฐ์ด๋ฟ๋ง ์๋๋ผ ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ๊ธฐ์ ์ ์ตํ๊ฒ ๋ฉ๋๋ค.
What is ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ?

์๋ฐ์คํฌ๋ฆฝํธ๋ง ์ ๋๋ก ๋ฐฐ์ฐ๋ฉด
ํ๋ฐํธ์๋์์ ๋ฐฑ์๋๊น์ง
๋ชจ๋ ํ๋ก๊ทธ๋จ์ ๊ตฌํํ ์ ์๊ฒ ๋ฉ๋๋ค.
์ต๊ทผ์๋ ๋๋ค์์ ์น์ด ํ๋ก ํธ์๋ ๋ฆฌ์กํธ, ๋ทฐ, ์ต๊ทค๋ฌ์ ๊ฐ์ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํด์ ๊ฐ๋ฐ๋๊ณ ์์ต๋๋ค. ์ด๋ฌํ ํ๋ก ํธ์ํธ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ง ์๋๋ผ๋ ์ต์ํ jQuery ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด์ ๊ฐ๋ฐ์ ํธ์์ฑ์ ๊ฐ์ ธ๊ฐ๊ณ ์์ต๋๋ค.
์ ๋์ด ์๋ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฅ์ํ ์ ์๊ณ , ์ผ์ ์์ค์ ์ฝ๋ ํ์ง์ ๋ณด์ฅ๋ฐ์ ์ ์์ต๋๋ค. ํ์ง๋ง ์น ๊ฐ๋ฐ์๊ฐ ์ด๋ฐ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์ ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ง ์์งํด์ ๊ฐ๋ฐํ๋ค ๋ณด๋ฉด, ์ด๋ ์๊ฐ ์ธ๋ถ ๋์ ์์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋ฐํ ์ ์๋ ์ํ์ ์ด๋ฅด๊ฒ ๋๊ธฐ๋ ํฉ๋๋ค.
์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๊ณ ์๋ ์๋ง์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋๊ตฐ๊ฐ๊ฐ ๊ฐ๋ฐํด ๋์ ๊ฒ์
๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ง๊ธ ๋น์ฅ ๋์ธ์ด๊ณ ์์ํ ๊ฒ ๊ฐ์ ๋ฆฌ์กํธ๋ ๋ทฐ ๊ฐ์ ํ๋ ์์ํฌ๋ ์ธ์ ์ธ๋ฉด๋ฐ์์ง ๋ชจ๋ฅด๊ณ , ์น์ ๊ทธ ์ด๋ค ํ๊ฒฝ ๋ณด๋ค ๋น ๋ฅด๊ฒ ๋ฐ์ ํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์์ผ๋ก๋ ๋ฌด์ํ ๋ง์ ํ๋ ์์ํฌ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ง์์ ์ผ๋ก ๋์ฌ ๊ฒ์
๋๋ค.
์ด๋ฐ ํ๋ฆ ์์์ ์ฐ๋ฆฌ ๊ฐ๋ฐ์๋ ๋ฌด์์ ์ง์คํด์ผ ํ ๊น์? ๊ทธ๊ฑด ๋ฐ๋ก ์์ ์๋ฐ์คํฌ๋ฆฝํธ, ์ฆ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์
๋๋ค. ์ด๋ ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ๋ฅผ ์ฐ์ง ์๋ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ '๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ'๋ผ๊ณ ๋ถ๋ฆ
๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ, ์ ๋ฐฐ์์ผ ํ ๊น์?
JavaScript is Everywhere.
Node.js๊ฐ ๋์ค๋ฉด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ ์ด์ ์น ๋ธ๋ผ์ฐ์ ์ ์ข
์๋ ์ธ์ด๊ฐ ์๋๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฌผ๋ก ์ด๊ณ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์
, ๋ชจ๋ฐ์ผ ์ฑ, ํค์ค์คํฌ, ๊ฒ์, ์๋์ด๋
ธ ๊ฐ์ ๋ง์ดํฌ๋ก ์ปจํธ๋กค๋ฌ๊น์ง ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ถ์ผ๋ ์ ์ ๋ค์ํด์ง๊ณ ์์ด์.
์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด ํ๋๋ฅผ ์ ์ตํ๋ ๊ฒ๋ง์ผ๋ก๋ ํ ์ ์๋ ๊ฒ ์ ์ ๋์ด๋๊ณ ์์ด์. ๊ทธ๋ฐ๋ฐ, ์ด ๋ง์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์์ ์ ์น ๋ธ๋ผ์ฐ์ ์์ HTML DOM์ ํธ๋ค๋งํ๋ ์ ๋์ ์์ค์ด ์๋ ์ข ๋ ๊ณ ์ฐจ์์ ์ธ ์ฝ๋ฉ์ ํด์ผ ํ๋ค๋ ๋ป์ด๊ธฐ๋ ํด์. ๊ทธ๋์, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋๋ก ๋ฐฐ์ฐ๊ณ ์ ๋๋ก ์ฌ์ฉํ ์ ์์ด์ผ ํด์.
์๋ฐ์คํฌ๋ฆฝํธ๋ก ํ ์ ์๋ ๋ค์ํ ๊ฐ๋ฐ ๋ถ์ผ
์ด ๊ฐ์์ ํน์ง!
์ฝ๊ณ ์์ธํ๊ฒ
์ค๋ฌด ์์ฉ ์ค์ฌ
์์ ์ฝ๋๊น์ง!
- ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์ฐจ๊ทผ์ฐจ๊ทผ ์๋ ค๋๋ ค์.
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ด์ฅ ํจ์์ ๊ธฐ๋ฅ๋ฟ๋ง ์๋๋ผ, ์ค์ ๊ฐ๋ฐ ์ค๋ฌด์์ ์ด๋ป๊ฒ ์ ์ฉ๋๋์ง ์๋ ค๋๋ ค์.
- ๊ธฐ๋ฅ ์ค์ฌ์ ๊ฐ์๊ฐ ์๋๋ผ, ์ฉ๋ ์ค์ฌ์ผ๋ก ์งํ๋ผ ์ ํํ ์ฌ์ฉ๋ฒ์ ์ตํ ์ ์์ด์.
- ES ์ต์ ๊ตฌ๋ฌธ์ ๋ค๋ฃน๋๋ค.
- ์๋ฒ ํต์ ์ ์ํ XMLHttpRequest, Fecth API๋ฅผ ๋ฐฐ์๋๋ค.
- DOM์ ์ง์ ์ ์ดํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
- CRUD ํจํด์ ๊ฐ๋ฐํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
- ๋ชจ๋ ์์ ์ฝ๋๋ ๊นํ๋ธ๋ฅผ ํตํด ์ ๊ณต๋ฉ๋๋ค.
๋ฌด์์ ๋ฐฐ์ฐ๋์?
- ๊ฐ๋ฐ IDE ํด๋ก๋ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋น์ฃผ์ผ์คํ๋์ค์ฝ๋๋ฅผ ์ด์ฉํ ๊ฐ๋ฐ ๋ฐฉ๋ฒ ๋ฐ ์ ์ฉํ ํ์ฅ ํ๋ก๊ทธ๋จ์ ์๊ฒ ๋ฉ๋๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด ๋ฌธ๋ฒ์ ๋ํด ํ์คํ ์ดํดํ๊ฒ ๋ฉ๋๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์๊ฐ ๊ผญ ์์์ผ ํ ES6 ๋ฌธ๋ฒ๊น์ง ์ตํ ์ ์์ด์.
- HTML DOM์ ํธ๋ค๋งํ๊ธฐ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฌ์ฉ๋ฒ์ ์ ์ ์์ต๋๋ค.
์ ์ ์ง์์ ํ์ธํ์ธ์!
- HTML์ ๋ํ ๊ธฐ๋ณธ ์ง์์ด ์์ด์ผ ํด์.
- CSS๋ฅผ ์์์ผ ํด์.
- ๋ณธ ๊ฐ์๋ฅผ ์๊ฐํ๊ธฐ ์ ์ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - HTML&CSS] ๊ฐ์๋ฅผ ์๊ฐํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค.
์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค,
๋ค๋ฅธ ๊ฐ์๋ ํจ๊ป ๋ง๋๋ณด์ธ์!
1. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - HTML&CSS ๊ธฐ์ด]
- ์น์ ๊ธฐ์ด ์ธ์ด์ธ HTML๊ณผ CSS๋ฅผ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฐฐ์์.
2. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ] ํ์ฌ ๊ฐ์
- ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋๋ก ์ตํ์ผ ๋ฆฌ๋ํ๋ ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ด์.
3. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - ๋ถํธ์คํธ๋ฉ ๊ธฐ์ด]
- ๋๊ตฌ๋ ์ฝ๊ฒ ๋ฉ์ง ๋์์ธ์ ๊ฐ๋ ๋ฐ์ํ ์น์ ๋ง๋ค ์ ์์ด์.
4. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - Vue.js ํ๋ก์ ํธ ํฌ์
์ผ์ฃผ์ผ ์ - ๊ธฐ์ด์์ ์ค๋ฌด๊น์ง]
- ๊ฐ์ฅ ์ฝ๊ณ ๋ง๊ฐํ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์ธ Vue.js๋ฅผ ์ตํ์.
5. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - ๋ทํ๋ฆญ์ค์ ๋น๊ทผ๋ง์ผ ๋ถ์์ ํตํด ๋ฐฐ์ฐ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ดํด]
- ๋ทํ๋ฆญ์ค, ๋น๊ทผ๋ง์ผ์ ๋ถ์ํ๋ฉด์ ์์ฐ์ค๋ฝ๊ฒ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ค๊ณํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ๊ฒ ๋ผ์.
6. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - Node.js ํ๋ก์ ํธ ํฌ์
์ผ์ฃผ์ผ ์ - ๊ธฐ์ด์์ ์ค๋ฌด๊น์ง]
- ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ก ๋ฐฑ์๋๊น์ง ๊ตฌํํ ์ ์์ต๋๋ค. Node.js๋ฉด ๊ฐ๋ฅํฉ๋๋ค.
7. [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค - ํฌํธํด๋ฆฌ์ค]
- ์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค๋ฅผ ํตํด ๋ฐฐ์ด ๋ชจ๋ ๊ธฐ์ ์ ๋ฐํ์ผ๋ก ์ ํ ํ๋งค ๋ฏธ๋ ์น์ ๊ฐ๋ฐํฉ๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ง๋ ์ฌ๋์
๋๊ตฌ์ผ๊น์?
๊ฐ๋ฐ์์ ํ๊ฒฉ
์ํํธ์จ์ด ๊ธฐ์ ์ ํตํด ์ธ์์ ์ ํ ์ํฅ๋ ฅ์ ์ฃผ๊ณ ์ถ์ 24๋
์ฐจ ์ํํธ์จ์ด ๊ฐ๋ฐ์.
์ง์์ ๋๋๋ ๊ฒ์ ์ข์ํ๊ณ , ํญ์ ์๋ก์ด ๊ธฐ์ ์ ์ตํ๋ ๊ฒ์ ์ฆ๊ฒจ์.
๊ตญ๋ด์ธ 60๊ฐ๊ฐ ๋๋ ๊ธ๋ก๋ฒ ๊ธฐ์
ERP ์์คํ
์ ๊ตฌ์ถํ๋ ์ปจ์คํดํธ ๋ฐ ๊ฐ๋ฐ์๋ก ํ๋ํ์๊ณ , ์ง์ ๊ฐ๋ฐํ ์ํํธ์จ์ด๋ฅผ ๊ตญ๋ด๋ ๋ฌผ๋ก ํด์ธ ์ ์์ ๊ธฐ์
์ ํ๋งคํ ๊ฒฝํ ๋ํ ๊ฐ์ง๊ณ ์์ด์. IT ์คํํธ์
๋ํ์ด์ฌ์ด๊ธฐ๋ ํด์.
๊ฐ๋ฐ์๋ฟ๋ง ์๋๋ผ UX ์ปจ์คํดํธ๋ก, ๋๋ก๋ ๋น์ฆ๋์ค ์ปจ์คํดํธ๋ก ์ผํ๋ฉด์ ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ์๋น์ค ๊ฐ๋ฐ ์ ๊ธฐํ์์ ๊ฐ๋ฐ๊น์ง ์ ๊ณผ์ ์ ๋ํ ์๋ง์ ๊ฒฝํ์ ์์์ต๋๋ค. ์ด์ ๋ 20๋
์ด ๋๋ ์ค๋ฌด ๊ฒฝํ์ ๋ฐํ์ผ๋ก ํ๋ฐฐ๋ค์๊ฒ ์ ๋ง ํ์ํ ๊ธฐ์ , ์ ๋ง ์ ๋๋ก ๋ ์ง์์ ์ ๋ฌํ๋ ์ฌ๋ช
๊ฐ์ผ๋ก ์ง์์ ๋๋๋ ์ผ์ ํ๊ณ ์์ด์.
๋ ์์๋ณผ๊น์?
[์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] ์๋ฆฌ์ฆ ๋ชจ์๋ณด๊ธฐ