01์ฅ ํ๋ก๊ทธ๋๋ฐ
ํ๋ก๊ทธ๋๋ฐ์ด๋?
์ปดํจํฐ์๊ฒ ์คํ์ ์๊ตฌํ๋ ์ผ์ข ์ ์ปค๋ฎค๋์ผ์ด์ ์ด๋ค. ์ด ๋ ์๊ตฌ๋๋ ๊ฒ์ด ๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ์ด๋ค.
ํ๋ก๊ทธ๋๋ฐ์ด๋ 0๊ณผ 1๋ฐ์ ์์ง ๋ชปํ๋ ๊ธฐ๊ณ๊ฐ ์คํํ ์ ์์ ์ ๋๋ก ์ ํํ๊ณ ์์ธํ๊ฒ ์๊ตฌ์ฌํญ์ ์ค๋ช ํ๋ ์์ ์ด๋ฉฐ, ๊ทธ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ฐ๋ก ์ฝ๋๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
์ฌ๋์ด ์ดํดํ ์ ์๋ ์ฝ์๋ ๊ตฌ๋ฌธ์ผ๋ก ๊ตฌ์ฑ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ์ฌ์ฉํด ํ๋ก๊ทธ๋จ์ ์์ฑํ ํ, ๊ทธ๊ฒ์ ์ปดํจํฐ๊ฐ ์ดํดํ ์ ์๋ ๊ธฐ๊ณ์ด๋ก ๋ณํํ๋ ๋ณ์ญ๊ธฐ์ธ ์ปดํ์ผ๋ฌ ํน์ ์ธํ๋ฆฌํฐ๋ฅผ ์ด์ฉํด ์ปดํจํฐ์ ๋ช ๋ น์ ์ ๋ฌํ๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ ๊ตฌ๋ฌธ๊ณผ ์๋ฏธ์ ์กฐํฉ์ผ๋ก ํํ๋๋ค.
๊ตฌ๋ฌธ๊ณผ ์๋ฏธ
ํ๋ก๊ทธ๋๋ฐ์ ๋ชฉ์ ์ ๋ฌธ์ ํด๊ฒฐ์ด๊ณ ์์ฑ๋ ์ฝ๋๋ ํด๊ฒฐ ๋ฐฉ์์ ๊ตฌ์ฒด์ ๊ตฌํ๋ฌผ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ฌธ๋ฒ์ ๋ถํฉํ๋ ๊ฒ์ ๋ฌผ๋ก ์ด๊ณ ์๊ตฌ์ฌํญ์ด ์คํ(๋ฌธ์ ๊ฐ ํด๊ฒฐ)๋์ด์ผ ์๋ฏธ๊ฐ ์๋ค.
๊ฒฐ๊ตญ ํ๋ก๊ทธ๋๋ฐ์ ์๊ตฌ์ฌํญ์ ์งํฉ์ ๋ถ์ํด์ ์ ์ ํ ์๋ฃ๊ตฌ์กฐ์ ํจ์์ ์งํฉ์ผ๋ก ๋ณํํ ํ, ๊ทธ ํ๋ฆ์ ์ ์ดํ๋ ๊ฒ์ด๋ค.
02์ฅ ์๋ฐ์คํฌ๋ฆฝํธ๋?
์๋ฐ์คํฌ๋ฆฝํธ์ ํ์
์๋ฐ์คํฌ๋ฆฝํธ๋ 1996๋ 3์ ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ์ ์น ๋ธ๋ผ์ฐ์ ์ธ ๋ท์ค์ผ์ดํ ๋ด๋น๊ฒ์ดํฐ2 ์ ํ์ฌ๋์๊ณ ‘๋ชจ์นด’๋ก ๋ช ๋ช ๋์๋ค. ๊ทธ๋ฌ๋ค ๊ทธํด 9์ ‘๋ผ์ด๋ธ์คํฌ๋ฆฝํธ’๋ก ์ด๋ฆ์ด ๋ฐ๋์๋ค๊ฐ 12์์ ‘์๋ฐ์คํฌ๋ฆฝํธ’๋ผ๋ ์ด๋ฆ์ผ๋ก ์ต์ข ๋ช ๋ช ๋์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ
์๋ฐ์คํฌ๋ฆฝํธ์ ํ์๋ฒ์ ์ธ ๋ง์ดํฌ๋ก์ํํธ์ ‘JSscript’๊ฐ IE์ ํ์ฌ๋๋ฉด์ ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ์นํ์ด์ง๊ฐ ์ ์์ ์ผ๋ก ๋์ํ์ง ์๋ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๊ฐ ๋ฐ์ํ๊ธฐ ์์ํ๋ค. 1996๋ 11์, ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ๋ ์ปดํจํฐ ์์คํ ์ ํ์ค์ ๊ด๋ฆฌํ๋ ๋น์๋ฆฌ ํ์คํ ๊ธฐ๊ตฌ์ธ ECMA ์ธํฐ๋ค์ ๋์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ๋ฅผ ์์ฒญํ๋ค. 1997๋ 7์ ECMA-262๋ผ ๋ถ๋ฆฌ๋ ํ์คํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฐ ์ฌ์(ECMAScript 1)์ด ์์ฑ๋์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ์ฅ์ ์ญ์ฌ
- Ajax :1999๋ , ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ ํต์ ๊ธฐ๋ฅ์ธ Ajax๊ฐ XMLHttpRequest๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฑ์ฅํ๋ค.
- jQuery : 2006๋ jQuery์ ๋ฑ์ฅ์ผ๋ก ๋ค์ ๋ฒ๊ฑฐ๋กญ๊ณ ๋ ผ๋์ด ์๋ DOM์ ๋์ฑ ์ฝ๊ฒ ์ ์ดํ ์ ์๊ฒ ๋์๊ณ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๋ ์ด๋ ์ ๋ ํด๊ฒฐ๋์๋ค.
- V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง : ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ค๋ ์๋๊ฐ ๋๋ฉด์ ๋์ฑ ๋น ๋ฅด๊ฒ ๋์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํ์์ฑ์ด ๋๋๋์๋ค. 2008๋ ๊ตฌ๊ธ์ V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ๋ฑ์ฅํ๋ค.
- Node.js : 2009๋ ๋ผ์ด์ธ ๋ฌ์ด ๋ฐํํ Node.js๋ ๊ตฌ๊ธ V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ๋น๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ์ด๋ค. Node.js๋ ๋ธ๋ผ์ฐ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์์๋ง ๋์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ธ๋ผ์ฐ์ ์ด์ธ์ ํ๊ฒฝ์์๋ ๋์ํ ์ ์๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋ฆฝ์ํจ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ์ด๋ค.
- SPA ํ๋ ์์ํฌ : CBD(Component based development) ๋ฐฉ๋ฒ๋ก ์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ SPA๊ฐ ๋์คํ ๋๋ฉด์ Angular, React, Vue.js, Svelte ๋ฑ ๋ค์ํ SPA ํ๋ ์์ํฌ / ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฑ์ฅํ๊ฒ ๋์๋ค.
๋ ๋๋ง์ด๋ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํด์ํด์ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ฒ์ ๋งํ๋ค. ๋๋ก๋ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ HTML๋ก ๋ณํํด์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๋ ๊ณผ์ (Server Side Rendering)์ ๊ฐ๋ฆฌํค๊ธฐ๋ ํ๋ค.
๋ฐํ์ ํ๊ฒฝ์ด๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ๊ตฌ๋ ๋๋ ํ๊ฒฝ์ ๋งํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ECMAScript
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ผ๋ฐ์ ์ผ๋ก ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก์ ๊ธฐ๋ณธ ๋ผ๋๋ฅผ ์ด๋ฃจ๋ ECMAScript ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ณ๋ ์ง์ํ๋ ํด๋ผ์ด์ธํธ ์ฌ์ดํธ Web API ์ฆ DOM, BOM, XMLHttpRequest ๋ฑ์ ์์ฐ๋ฅด๋ ๊ฐ๋ ์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ํน์ง
- ์๋ฐ์คํฌ๋ฆฝํธ๋ HTML, CSS ์ ํจ๊ป ์น์ ๊ตฌ์ฑํ๋ ์์ ์ค ํ๋๋ก ์น ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ ์ผํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ๋ฐ์๊ฐ ๋ณ๋์ ์ปดํ์ผ ์์ ์ ์ํํ์ง ์๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ช ๋ นํ, ํจ์ํ, ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํ๋ ๋ฉํฐ ํจ๋ฌ๋ค์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ํด๋์ค ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ณด๋ค ํจ์จ์ ์ด๋ฉด์ ๊ฐ๋ ฅํ ํ๋กํ ํ์ ๊ธฐ๋ฐ์ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ค.
ES6 ๋ธ๋ผ์ฐ์ ์ง์ ํํฉ
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ ES6๋ฅผ ๋๋ถ๋ถ ์ง์ํ์ง ์๋๋ค.
03์ฅ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ์คํ ๋ฐฉ๋ฒ
์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ
๋ชจ๋ ๋ธ๋ผ์ฐ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํด์ํ๊ณ ์คํํ ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ด์ฅํ๊ณ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ ๋๋ Node.js ํ๊ฒฝ์์ ์คํํ ์ ์๋ค.
์๋ฒ์์ ์น์ฌ์ดํธ์ ์ฝํ ์ธ ๋ฅผ ์์งํ๊ธฐ ์ํด ์น์ฌ์ดํธ์์ HTML ๋ฌธ์๋ฅผ ๊ฐ์ ธ์จ ๋ค์. ์ด๋ฅผ ๊ฐ๊ณตํด์ ํ์ํ ๋ฐ์ดํฐ๋ง ์ถ์ถํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค. ์ด๋ฅผ ์น ํฌ๋กค๋ง์ด๋ผ ํ๋ค.
Node.js
npm์ ์๋ฐ์คํฌ๋ฆฝํธ ํจํค์ง ๋งค๋์ ๋ค. Node.js ์์ ์ฌ์ฉํ ์ ์๋ ๋ชจ๋์ ํจํค์งํํด์ ๋ชจ์๋ ์ ์ฅ์ ์ญํ ๊ณผ ํจํค์ง ์ค์น ๋ฐ ๊ด๋ฆฌ๋ฅผ ์ํ CLI๋ฅผ ์ ๊ณตํ๋ค.