์ด๋ฒ ์ฑํฐ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ๋ฐ์ ์ธ ์ญ์ฌ์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ๋ํ ๋ด์ฉ์ด์์.
์๋ฐ์คํฌ๋ฆฝํธ์ ์ญ์ฌ
1995๋
90% ์ ์ ์จ์ ๋ธ๋ผ์ฐ์ ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ(Netscape Communications). ๋ธ๋๋ ์์ดํฌ(brendan Eich)๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ฐ๋ฐํจ. ์นํ์ด์ง์ ๋ณด์กฐ์ ์ธ ๊ธฐ๋ฅ ์ํ์ ์ํด ๊ฒฝ๋ ํ๋ก๊ทธ๋๋ฐ์ธ์ด๋ก ๊ฐ๋ฐ.
1996๋
3์
๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ์ ์น ๋ธ๋ผ์ฐ์ ๋ท์ค์ผ์ดํ ๋ค๋น๊ฒ์ดํฐ2์ ํ์ฌ๋จ. ๊ทธ ๋น์์๋ ๋ชจ์นด(Mocha)๋ก ์ด๋ฆ์ด ์ง์ด์ง.
8์
MS์์ ํ์ ๋ฒ์ ์ธ JScript๋ฅผ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ 3.0์ ํ์ฌ. ๋ฌธ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ๋นํ ํธํ๋๊ณ ์๋ก ๋ธ๋ผ์ฐ์ ์ ์ ์ ์จ์ ๋์ด๊ธฐ ์ํด ์์ฌ ๋ธ๋ผ์ฐ์ ์๋ง ๋์ํ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ธฐ ์์ํจ. ์ด๋ก ์ธํด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๊ฐ ๋ฐ์ํ๊ธฐ ์์ํจ. ํ์คํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์์ฑ์ด ๋๋๋จ.
9์
๋ผ์ด๋ธ์คํฌ๋ฆฝํธ(LiveScript)๋ก ์ด๋ฆ์ ๋ณ๊ฒฝํจ.
11์
๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ๋ ์ปดํจํฐ ์์คํ ์ ํ์ค์ ๊ด๋ฆฌํ๋ ๋น์๋ฆฌ ํ์คํ ๊ธฐ๊ตฌ์ธ ECMA ์ธํฐ๋ด์ ๋์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ๋ฅผ ์์ฒญํจ.
12์
๋ผ์ด๋ธ์คํฌ๋ฆฝํธ(LiveScript)์์ ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)๋ผ๋ ์ด๋ฆ์ผ๋ก ์ต์ข ์ ์ผ๋ก ๊ฒฐ์ ๋๋ค.
1997๋
7์
ECMA-262๋ผ ๋ถ๋ฆฌ๋ ํ์คํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ดํ์ด ์์ฑ๋จ. ์ํ๊ถ ๋ฌธ์ ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ECMAScript๋ก ๋ช ๋ช ๋จ.
1999๋
ECMAScript 3(ES3) ๊ณต๊ฐ. ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ Ajax(Asynchronous JavaScript and XML)๊ฐ XMLHttpRequest๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฑ์ฅ. (ex-2005๋ ๊ตฌ๊ธ๋งต์ค)
2006๋
jQuery ๋ฑ์ฅ. DOM(Document Object Model)์ ์ฝ๊ฒ ์ ์ดํ๊ณ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๋ฅผ ์ด๋์ ๋ ํด๊ฒฐ.
2008๋
๊ตฌ๊ธ์ V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง ๋ฑ์ฅ. ๊ตฌ๊ธ ๋งต์ค๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํ์ฅ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ค๋ค๋ณด๋ ๋น ๋ฅธ ์์ง์ด ํ์ํ๊ฒ ๋์๊ณ V8 ์์ง์ ๊ฐ๋ฐ. ์ด๋ก ์ธํ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐ์ ์ผ๋ก ๊ณผ๊ฑฐ ์น ์๋ฒ์์ ์ํ๋๋ ๋ก์ง๋ค์ด ๋๊ฑฐ ํด๋ผ์ด์ธํธ๋ก ์ด๋.
2009๋
NodeJS ๋ฑ์ฅ. ๋ผ์ด์ธ ๋ฌ(Ryan Dahl)์ด ๋ฐํ. V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ๋น๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ. (์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋ฆฝ์ํจ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ). ์๋ฒ ์ฌ์ดํธ ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ฃผ๋ก ์ฌ์ฉ๋จ. ๋ชจ๋, ํ์ผ์์คํ , HTTP ๋ฑ Built-in API ์ ๊ณต. ๊ทธ๋ฌ๋ ์น ๋ธ๋ผ์ฐ์ ์ฒ๋ผ Client side Web API๋ ์ ๊ณต๋์ง ์์. ์๋ฒ๋ฅผ NodeJS๋ก ๊ตฌ์ฑ ์ ์ฅ์ ์ ์๋ฒ-ํด๋ผ์ด์ธํธ์ ๊ฐ๋ฐ์ธ์ด๊ฐ ๋์ผํ๊ธฐ(๋ํ์ฑ) ๋๋ฌธ์ ํ์ชฝ ์ธ์ด๋ง ํ์ตํ๋ฉด ํ๋ก ํธ์ค๋, ๋ฐฑ์ค๋๋ฅผ ๋์์ ๋ค๋ฃฐ ์ ์๊ฒ ๋์ด ๊ตฌ์ฑ์์ ํ์ต ์๊ฐ์ด ์ค์ด๋ค ์ ์์.
ECMAScript 5 ์ถ์. HTML5ํจ๊ป ์ถํ.
2015๋
ECMAScript 6(ECMAScript 2015, ES6) ๊ณต๊ฐ. let/const, ํ์ดํ ํจ์, ํด๋์ค, ๋ชจ๋ ๋ฑ ๊ธฐ๋ฅ ๋๊ฑฐ ๋์ .
ํ๋
๋ชจ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์คํฌํ ์ฑ๊ณผ ๋น๊ตํด๋ ์์์ด ์์ ์ ๋๋ก ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ฑ๋ฅ์ ์ ๊ณตํ๊ฒ ๋์๊ณ ๊ฐ๋ฐ ๊ท๋ชจ์ ๋ณต์ก์ฑ์ด ํจ๊ป ์ฆ๊ฐํจ. ์ด๋ก ์ธํด ํ๋ก ํธ์ค๋ ํ๋ ์์ํฌ๊ฐ ๋ฑ์ฅํ๊ฒ ๋จ. CBD(Component Based Development) ๋ฐฉ๋ฒ๋ก ์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ SPA(Single Page Application)๊ฐ ๋์คํ๋๋ฉด์ Angular, React, Vue.js, Svelte ๋ฑ ๋ค์ํ ํ๋ ์์ํฌ๊ฐ ๋ฑ์ฅํจ.
์๋ฐ์คํฌ๋ฆฝํธ๋?
- ์๋ฐ์คํฌ๋ฆฝํธ ์์ ECMAScript๊ฐ ํฌํจ๋์ด์๊ณ ECMAScript๋ ECMA-262๋ฅผ ์๋ฏธํ๋ฉฐ ๊ทธ ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ Core์ธ ๊ฐ, ํ์ , ๊ฐ์ฒด, ํ๋กํผํฐ, ํจ์, ํ์ค ๋นํธ์ธ ๊ฐ์ฒด ๋ฑ ํต์ฌ ๋ฌธ๋ฒ์ ๊ท์ ํจ. ๋ธ๋ผ์ฐ์ ์ ์กฐ์ฌ๋ ECMAScript๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋๋๋ฐ ์ ์กฐ์ฌ๋ณ๋ก ์ถ๊ฐ ๊ธฐ๋ฅ์ ๋ง๋ถ์ฌ์ ๋ธ๋ผ์ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ตฌ์ฑํจ. ๋ง๋ถ์ฌ์ง๋ ๊ฒ์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ Web API (DOM, BOM, fetch, XMLHttpRequest, Canvas, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker). ํด๋ผ์ด์ธํธ ์ฌ์ด๋ Web API๋ ECMAScript์๋ ๋ณ๊ฐ๋ก ์๋ ์์ด๋ ์น ์ปจ์์์์์ ๋ณ๋์ ์ฌ์์ผ๋ก ๊ด๋ฆฌํจ.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ์ ์ผํ๊ฒ ๋์ํ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด. ์ปดํ์ผ ์์ ์ ์ํํ์ง ์๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด. ๋๋ถ๋ถ์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ปดํ์ผ๋ฌ์ ์ธํฐํ๋ฆฌํฐ ๊ฐ๊ฐ์ ์ฅ์ ์ ๊ฒฐํฉํ์ฌ ์ธํฐํ๋ฆฌํฐ์ ์๋๊ฐ ๋๋ฆฐ ๋จ์ ์ ํด๊ฒฐ.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ช ๋ นํ, ํจ์ํ, ํ๋กํ ํ์ ๊ธฐ๋ฐ, ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํ๋ ๋ฉํฐ ํจ๋ฌ๋ค์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ด๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ ํด๋์ค ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ณด๋ค ํจ์จ์ ์ด๋ฉด์ ๊ฐ๋ ฅํ ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ค.
์ด์์ ๋๋ค!
๊ณ ๋ง์ต๋๋ค. ๐
์ฐธ๊ณ
๋ชจ๋์๋ฐ์คํฌ๋ฆฝํธ Deep Dive