์ด ๋ฌธ์์ ์๋ณธ์ ์ธ๋ถ ์ํค์์ ๊ฐ์ ธ์์ต๋๋ค.
TIOBE ์ ์ ์ฌํด์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด | ||||
2013๋
Transact-SQL | โ | 2014๋
JavaScript | โ | 2015๋
Java |
1. ๊ฐ์[ํธ์ง]
document.write("Hello, world!"); //HTML ๋ฌธ์์ ์ถ๋ ฅ๋๋ค.
alert("Hello, world!"); //์๋ฆผ์ฐฝ์ผ๋ก ์ถ๋ ฅ๋๋ค.
console.log("Hello, world!"); //๋ณดํต F12(macOS์ ๊ฒฝ์ฐ์๋ โ+โฅ+I)๋ฅผ ๋๋ฅด๋ฉด ๋ณด์ด๋ ์ฝ์ ์ฐฝ์ ์ถ๋ ฅ๋๋ค.ํ๋กํ ํ์
๊ธฐ๋ฐ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก, ์คํฌ๋ฆฝํธ ์ธ์ด์ ํด๋น๋๋ค. ํน์ํ ๋ชฉ์ ์ด ์๋ ์ด์ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์ ์ธํฐํ๋ฆฌํฐ๊ฐ ๋ด์ฅ๋์ด ์๋ค. ์ค๋๋ HTML, CSS์ ํจ๊ป ์น์ ๊ตฌ์ฑํ๋ ์์ ์ค ํ๋๋ค. HTML์ด ์น ํ์ด์ง์ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ๋ด๋นํ๊ณ , CSS๊ฐ ๋์์ธ์ ๋ด๋นํ๋ค๋ฉด JavaScript๋ ํด๋ผ์ด์ธํธ ๋จ์์ ์น ํ์ด์ง๊ฐ ๋์ํ๋ ๊ฒ์ ๋ด๋นํ๋ค.[1] ์น ํ์ด์ง๋ฅผ ์๋์ฐจ์ ๋น์ ํ์๋ฉด, HTML์ ์๋์ฐจ์ ๋ผ๋, CSS๋ ์๋์ฐจ์ ์ธ๊ด, JavaScript๋ ์๋์ฐจ์ ๋๋ ฅ์ด๋ผ๊ณ ๋ณผ ์ ์๋ค.์ฌ ๋ง์ดํฌ๋ก์์คํ ์ฆ(ํ์ฌ ์ค๋ผํด)์์ ๊ฐ๋ฐํ Java์๋ ๋ณ ๊ด๊ณ๊ฐ ์๋ ์ธ์ด์ด๋ค. ์ด๋ฆ์ด ๋น์ทํ๋ค๊ณ ๊ฐ์ ์ธ์ด๊ฐ ์๋๋ค. ์ฌ๋๋ค์ด ํํ ํท๊ฐ๋ฆฌ๋ ๋ถ๋ถ ์ค ํ๋. ์ค์ง์ ์ธ ๊ตฌ๋ ๋ฐฉ์๋ JVM์ ์ด์ฉํด์ ๋๋ฆฌ๋ Java์, ๋ธ๋ผ์ฐ์ ๋ด์ ์คํฌ๋ฆฝํธ ์์ง(์ธํฐํ๋ฆฌํฐ)์ด ์กด์ฌํ๋ JavaScript๋ ์์ ํ ๋ค๋ฅด๋ค.
JavaScript๋ C์์ ์ํฅ์ ๋ฐ์ C-Family ์ธ์ด๋ก ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ์ด ์ ์ฌ ์ค๊ดํธ๋ก ๊ตฌ๋ถํ๋ ๋ธ๋ญ, ์ธ๋ฏธ์ฝ๋ก ์ผ๋ก ์ค์ด ๋๋จ์ ์๋ฆฌ๋ ๊ฒ[2], ๋ณ์ ์ฐ๋ ๋ฒ, ์ฐ์ฐ์ ์ฌ์ฉ๋ฒ ๋ฑ ๊ธฐ์ด์ ์ธ ๋ฌธ๋ฒ์ด C ๋ฌธ๋ฒ๊ณผ ํฌ๊ฒ ๋ค๋ฅด์ง ์๋ค. ํธ์ด์คํ (์ ์ธ๋ฌธ์ ๊ฐ์ ํ ๋นํ๋๊ฒ ์๋์ผ๋ก ์ ์ธ๋ฌธ์ชฝ์ผ๋ก ์ฌ๋ผ๊ฐ๋๊ฒ)๊ฐ์๊ฒ๋ C์ธ์ด์ ์์ฌ์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์๋ ํจ์ํ[3] ์ธ์ด์ ๋ถํธํจ๊ณผ ํธ์ด์คํ ๋ฑ ์ฌ๋ฌ๋ฌธ์ ๋ฅผ ๋ฌด๋งํ๊ธฐ์ํด์ ํด๋์ค ๊ฐ๋ ์ ๋์ ๊ณผ ๋ณ์์ ์ธ์ let[4], const[5]๋ก ํ๋๋ฑ ๋ค๋ฅธ์ธ์ด ์ฐ๋์ฌ๋๋คํํ ์ ์์ ๊ทธ๋๋ง ํ๋๋ก ํ๋ด๋ ๋ด์ฃผ๋ ์ฒํ๋๊ฒ ๋คํ. ๋ฌผ๋ก ์ผ๋ฐ์ ์ธ ๊ฐ์ ์งํฅ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋ฐ์์๊ฒ๋ ์ด๊ฒ๋ง์ ์ดํด๋ฅผ ๋ชป ํ๊ณ Syntatic Sugar์ ๋ถ๊ณผํ ์๋ฐ์คํฌ๋ฆฝํธ์ ํด๋์ค๋ฅผ ๋ถ๋ง์กฑ์ค๋ฌ์ํ๋ค.
์ต๊ทผ ์๋ฐ์คํฌ๋ฆฝํธ ์ธํฐ๋ทฐ์์ ์์ง๋ ์ ํธ์ด์คํ ์ ๋ฌผ์ด ๋ณด๋๋ Dan Abramov์ ํธ์ https://twitter.com/dan_abramov/status/1362530955420987396 ์ด ํ์ ๊ฐ ๋์๋๋ฐ, ๋ฌผ๋ก ํ๋ JS์์ ํธ์ด์คํ ์ ๋ง๋ ์ผ์ ํ์น ์์ง๋ง ํธ์ด์คํ ์ด ์ด๋ค ๋ฌธ์ ๋ฅผ ํ๋ ค๊ณ ํ์ผ๋ฉฐ ๊ทธ ๋ฌธ์ ๋ฅผ ํ๋ JS์์๋ ์ด๋ป๊ฒ ๋ค๋ฃจ๋์ง๋ ์ดํดํ ํ์๊ฐ ์๋ค ๋ณธ๋ค.
2. ์ญ์ฌ[ํธ์ง]
์ฒซ ํ์์ ๋ธ๋๋ ์์ดํฌ๊ฐ 10์ผ๋ง์ ์ค๊ณํ ๊ฒ์ผ๋ก๋ถํฐ ์์ํ๋ค. ์ฒ์์๋ Mocha๋ผ๋ ์ด๋ฆ์ด์์ง๋ง 4๋ฌ ๋ง์ LiveScript๋ผ๋ ์ด๋ฆ์ผ๋ก ๊ฐ๋ช
ํ๊ณ ๋ค์ 3๋ฌ ํ์๋ JavaScript๋ผ๋ ์ด๋ฆ์ด ๋์ด ์ค๋๋ ๊น์ง ์ด์ด์ง๊ณ ์๋ค. Java์ ๊ตฌ๋ฌธ์ด ์ ์ฌํ๊ธฐ๋ ํ๊ณ ํด์ ์ด๋ฆ์ JavaScript๋ก ๋ช
๋ช
ํ๋ค...๋ ํ๋ฉด์์ ์ด์ ๊ณ ๊ทธ ์์ Java์ ์ ๋ช
์ธ๋ฅผ ํ์ ๋ฌป์ด๊ฐ๋ ค๊ณ ์๋์ ์ผ๋ก ๋ง๋ ๊ฒ์ด๋ค.[6]
JS๋ ๋ณธ๋ ๋ท์ค์ผ์ดํ ์๋ฒ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ํ๊ธฐ ์ํ ๊ณ ์์ค ์ถ์ํ ์ธ์ด๋ก ์ค๊ณ๋์ด LiveScript๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ค๋น๊ฒ์ดํฐ์ ํฌํจ๋์๋ค. ๊ทธ๋ฌ๋ JS๋ ๋น์ ๊ธฐ์ค์์ ๋ฌด๋ฆฌํ ์ถ์ํ[7]๋ฅผ ์๋ํ๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ง์๋ค. ๊ฒ๋ค๊ฐ ๋ง์ผํ ์ข ํด๋ณด์๊ณ ๋ถ์ธ ์ด๋ฆ์ธ JS๊ฐ Java์ ์ดํํ์ด๋ผ๋ ๋๋์ด๋ผ์ ๋น์ ๊ฐ๋ฐ์๋ค ์ฌ์ด์์ ์ด๋ฆ์ผ๋ก ๋ฌด์๋นํ๋ค.[8] ์ฌ๊ธฐ์ ๋ํด์ ๊ทธ๋๋ง ํด๋ผ์ด์ธํธ์ฉ JS ์์ง์ ์๋ ์์คํ ์์ ์ ๊ทผ์ฉ API[9]๋ค์ด ๋ณด์์ฌ๊ณ ์ ์์ธ์ด ๋๋ฉด์ ์ญ์ ๋๋ ๊ณผ์ ์์, ๋ณ๋ค๋ฅธ ๋ณด์ ๋ฐฉ๋ฒ์ ์ ์ํ์ง ๋ชปํ๋ ๋ฑ ํ๊ณ๊ฐ ์ฌ์คํ๋ค.
ํ์ง๋ง JavaScript์ ๋ง๊ฐํ ๊ธฐ๋ฅ์ ์น ๋ธ๋ผ์ฐ์ ์ ๊ฐ ๋ฒค๋ ์ฌ์์ ํ์์ ์ผ๋ก ๊ตฌํํ ๋งํผ ์ฑ์ฅํด๊ฐ๋ค. ๋ง์ดํฌ๋ก์ํํธ์์๋ ์ด๋ฅผ ์ฑํํจ๊ณผ ๋์์ ์์ฌ๋ง์ ๋ฌธ๋ฒ์ ๋ผ์ ๋ฃ์ด JScript๋ฅผ ํ์์์ผฐ๋ค. ๋ท์ค์ผ์ดํ๊ฐ ์ฌ๋ฌ ๋ฌธ์ ์๋ ๋ถ๊ตฌํ๊ณ ์ ์ ์จ์ ๋ง๋ํ๊ฒ ์ฐจ์งํด๊ฐ๋ ์ด๋ 95๋ ์ค๋ฐ, MS๊ฐ Windows 95 Plus์์ IE 1.0๋ฅผ ์ ๋ณด์๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ์ 1์ฐจ ๋ธ๋ผ์ฐ์ ์ ์์ด๋ผ ๋ถ๋ฆฌ๋ ์ฌ๊ฑด์ ์์์ด๋ค.[10]
์ 1์ฐจ ๋ธ๋ผ์ฐ์ ์ ์์์ MS๋ OS ์ ์ ์จ์ ๋๋ ค๊ฐ์ ๋ฐ๋ผ ์ฌ์ฉ์๋ค์ IE๋ฅผ ์ฌ์ฉํ๋๋ก ์ง์์ ์ผ๋ก ์ ๋ํ์๊ณ , ์ด์ ๋ฒํฐ์ง ๋ชปํ ๋ท์ค์ผ์ดํ๋ ๊ธฐ์ด์ฝ ๋งํ๊ณ ๋ง๋ค.
MS์์ 1999๋ ์ ๋ณธ๋ ์์๋ฃฉ์์ ์ฐ์๋ IXMLHTTPRequest๋ผ๋ ์ด๋ฆ์ผ๋ก XMLHTTP wrapper๋ก์ xml request ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์์ํ๋ค. ๋ท์ค์ผ์ดํ์ ํ์๋ฅผ ์์ฒํ๋ ๋ชจ์ง๋ผ ์ฌ๋จ์์๋ ์ด๊ฒ์ 2002๋ ์ ๊ตฌํ์์ผฐ๋ค. ์ดํ ์ฃผ๋ชฉ ๋ฐ์ง ๋ชปํ๊ณ ์๋ค๊ฐ ๊ตฌ๊ธ์ ์ํด String ๊ธฐ๋ฐ์ Data ์ ์ก ๋ฐฉ์์ AJAX๋ผ๋ ์ด๋ฆ์ผ๋ก ์กฐํฉํด ์ ๋ณด์ด๋ฉด์ AJAX ์ธํฐ๋ท ์ ์ธ๊ณ๊ฐ ์ด๋ฆฌ๊ณ ๋ง ๊ทธ๋๋ก ๋๋ฐ์ด ๋ฌ๋ค.
์ด๋ ๋ฏ JS๋ ๊ฐ ๋ฒค๋ ์ฌ๋ง๋ค ๋ค๋ฅธ ๊ฒ์ด ๋ฌธ์ ์ธ ๊ฒ์ ๊ธ์ ์ฝ์ผ๋ฉด ์ฝ๊ฒ ์ ์ ์์ ๊ฒ์ด๋ค. ํ์ง๋ง ์ด๋ฅผ ๋จ์ผํํ ์์ง์์ ์ด๋ฏธ 97๋ ECMA TC39๋ผ๋ ๋ฌธ์๋ฅผ ํตํด ์์์ด ๋์์ง๋ง, ๊ฐ ๋ฒค๋(ํนํ MS)์ ๋นํ์กฐ์ ์ธ ํ๋๋ก ์ธํด ๊ธ๋ฌ ๋จน์๋๋ฐ. ๊ทธ๋ฌ๋ค๊ฐ ๋ ๋ฒ์งธ ๋ธ๋ผ์ฐ์ ์ ์์ด ๋ฐ๋ฐํ ํ ๊ตฌ๊ธํํ ์ฒ์ฐธํ๊ฒ ๋ฐ๋ฆฐ MS๊ฐ ๊นฝ๊นฝ ๊ฑฐ๋ฆฌ๊ณ ๋์์ผ ECMAScript(์ดํ ES) 5๊ฐ ์ ์ ๋๊ณ ํ์ค ๋ฌธ์ ๊ฐ ๋ค์ ํด๊ฒฐ๋์๋ค.[11]
ํํธ ๊ทธ๋ ๊ฒ ํ์คํ๋ฅผ ๊ฑฐ์น JS๋ AJAX, jQuery ๋ฑ์ ๋ฑ์ฅ์ผ๋ก ๊ฑฐ์นจ์๋ ๋ฐ์ ์ ๋ณด์๊ณ , ๊ธฐ์ด์ด Node.js์ ๋ฑ์ฅ์ผ๋ก Server side ์ธ์ด๋ก์ ํ๋ฐ๊ฟํ๊ฒ ๋๋ค. JIT ์ปดํ์ผ ๋ฐฉ์์ ๋์ ํ ๊ตฌ๊ธ์ V8์ด๋ผ๋ JavaScript ์์ง์ ๊ฐ๋ฐํ์๊ณ , ES6 ๊ตฌํ์จ์ด ๋น์ 80% ~ ํ์ฌ 99%์ ๋ฌํ๋ฉด์ CommonJS, AMD ์ง์ ๋ฑ์ ๋ฑ์ฅ๋ ๋ํ๋ฌ๋ค. ๊ณผ๊ฑฐ์ JS์ ๋น๊ตํด ๋ณด๋ฉด ๊ฒฉ์ธ์ง๊ฐ๋ง์ ๋ค ์ ๋๋ก ๊ทธ์ผ๋ง๋ก ์ฅ์กฑ์ ๋ฐ์ ์ด๋ค.
์ต๊ทผ ๋ค์ด JavaScript๋ ์น ๋์์ด๋๋ค์๊ฒ๋ ๊ต์ก์ด ๋๊ณ ์๋ ๋งํผ ์ง์ ์ฅ๋ฒฝ์ด ํ ์ธ์ด์ ๋นํด ๋ฎ์ ํธ์ผ๋ก ์ธ์๋๊ณ ์๋ค. ํด์ธ๋ front-end ์ ๋ด ๊ฐ๋ฐ์๊ฐ ์์ ๋งํผ ์ ๋ฌธํ๋์ด์๋ ๋ฐ๋ฉด, ๊ตญ๋ด์์๋ ์์ค์ด ํ๊ฒฉํ ๋ฎ์ ๋งํผ ์ผ๋ฐ์ธ๋ ์ฝ๊ฒ ์ ๊ทผํ๊ณ ๋ฐฐ์ธ ์ ์๋ค. ๊ตฌ๊ธ ๋ฑ์ ๋น๋กฏํ ์ฌ๋ฌ ๋ฒค๋ ์ฌ์์๋ ์ด ์ธ์ด๋ฅผ ํ์ฉํ ๋ค์ํ ํ๋ซํผ ํ๊ฒฝ์ ์ง์ํ๊ณ ์์ผ๋ฉฐ, Chrome Extension์ด๋ App๋ค์ด ๊ทธ ์ข์ ์์ด๋ค. ์์ JS๋ก ์ด๋ฃจ์ด์ ธ ์์ด ์ค๋ ฅ์ด ๋๋ค๋ฉด ์์ ๋ง์ ๊ฒ๋ค์ ๊ตฌํํด ๋ฐฐํฌํ ์๋ ์๊ธฐ ๋๋ฌธ. ํ์ง๋ง ๊ทธ๋ ๋ค๊ณ ํด์ JavaScript๊ฐ ๋ง๋ฅ ์ฌ์ด ์ธ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ์ค์ฐ์ด๋ค. ๋์ ํ์ ์ธ์ด์ธ ๋งํผ ์์๊ณผ ๋ค๋ฅธ ๋์์ ํ๋ ๊ฒฝ์ฐ๋ ๋ง๊ณ , ์ฝ๋ฐฑ๊ณผ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ ์ด๋ณด์ ์ ์ฅ์์ ์ฝ๋ ๋ฆฌ๋ฉ์ด ๊ต์ฅํ ์ด๋ ต๋ค. ์ฆ ์ ๋ฌธ์ ์ฌ์ฐ๋ ๋ฐฐ์ฐ๋ค๋ณด๋ฉด ๋ฒฝ์ ๋งํ๋ ์ธ์ด. ํ์ง๋ง ES6๋ก ๋์ด์์๋ ์ฝ๋ฐฑ์ด ๋น๊ต์ ํธํด์ก๋ค. ํ์ง๋ง ์ผ๋ถ ๊ตฌํ ๋ธ๋ผ์ฐ์ (๋ํ์ ์ผ๋ก IE)๋ ์ง์์ ํ์ง ์๋๋ค!
์๋ JavaScript ์์ง๋ค์ ๋ชจ๋ ์ค์๊ฐ ์ธํฐํ๋ฆฌํ ์ ํ๊ณ ์์๋๋ฐ, ๋ชจ์ง๋ผ์์ SpiderMonkey ์์ง์ JIT ์ปดํ์ผ ๋ฐฉ์์ ๋์ ํ๋ค. ์ด๋ JavaScript ์์ง์ผ๋ก๋ ์ต์ด๋ก ๋์ ํ ๊ฒ์ด๊ณ , ์ด ๋ ์๋ ค์ง ๊ฒ์ผ๋ก๋ ์์ JavaScript ์ฑ๋ฅ๋ง ๊ธฐ์กด ๋ฒ์ ์ 20~40๋ฐฐ์ ๋ฌํ๋ค.[12] ๊ทธ๋ฆฌ๊ณ ๊ตฌ๊ธ ์ญ์ V8์ด๋ผ๋ JavaScript ์์ง์ ๊ฐ๋ฐํ๋ฉด์ JIT ์ปดํ์ผ ๋ฐฉ์์ ๋์ ํ์๊ณ , JavaScript ์ฑ๋ฅ์ด ๋น์ฝ์ ์ผ๋ก ํฅ์ํ์ฌ ์ง๊ธ์ JavaScript 3D๊ฒ์ ์์ง๋ ๊ฐ๋ฐ๋๊ณ ์๋ค.[13]
JS๋ ๋ณธ๋ ๋ท์ค์ผ์ดํ ์๋ฒ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ํ๊ธฐ ์ํ ๊ณ ์์ค ์ถ์ํ ์ธ์ด๋ก ์ค๊ณ๋์ด LiveScript๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ค๋น๊ฒ์ดํฐ์ ํฌํจ๋์๋ค. ๊ทธ๋ฌ๋ JS๋ ๋น์ ๊ธฐ์ค์์ ๋ฌด๋ฆฌํ ์ถ์ํ[7]๋ฅผ ์๋ํ๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ง์๋ค. ๊ฒ๋ค๊ฐ ๋ง์ผํ ์ข ํด๋ณด์๊ณ ๋ถ์ธ ์ด๋ฆ์ธ JS๊ฐ Java์ ์ดํํ์ด๋ผ๋ ๋๋์ด๋ผ์ ๋น์ ๊ฐ๋ฐ์๋ค ์ฌ์ด์์ ์ด๋ฆ์ผ๋ก ๋ฌด์๋นํ๋ค.[8] ์ฌ๊ธฐ์ ๋ํด์ ๊ทธ๋๋ง ํด๋ผ์ด์ธํธ์ฉ JS ์์ง์ ์๋ ์์คํ ์์ ์ ๊ทผ์ฉ API[9]๋ค์ด ๋ณด์์ฌ๊ณ ์ ์์ธ์ด ๋๋ฉด์ ์ญ์ ๋๋ ๊ณผ์ ์์, ๋ณ๋ค๋ฅธ ๋ณด์ ๋ฐฉ๋ฒ์ ์ ์ํ์ง ๋ชปํ๋ ๋ฑ ํ๊ณ๊ฐ ์ฌ์คํ๋ค.
ํ์ง๋ง JavaScript์ ๋ง๊ฐํ ๊ธฐ๋ฅ์ ์น ๋ธ๋ผ์ฐ์ ์ ๊ฐ ๋ฒค๋ ์ฌ์์ ํ์์ ์ผ๋ก ๊ตฌํํ ๋งํผ ์ฑ์ฅํด๊ฐ๋ค. ๋ง์ดํฌ๋ก์ํํธ์์๋ ์ด๋ฅผ ์ฑํํจ๊ณผ ๋์์ ์์ฌ๋ง์ ๋ฌธ๋ฒ์ ๋ผ์ ๋ฃ์ด JScript๋ฅผ ํ์์์ผฐ๋ค. ๋ท์ค์ผ์ดํ๊ฐ ์ฌ๋ฌ ๋ฌธ์ ์๋ ๋ถ๊ตฌํ๊ณ ์ ์ ์จ์ ๋ง๋ํ๊ฒ ์ฐจ์งํด๊ฐ๋ ์ด๋ 95๋ ์ค๋ฐ, MS๊ฐ Windows 95 Plus์์ IE 1.0๋ฅผ ์ ๋ณด์๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ์ 1์ฐจ ๋ธ๋ผ์ฐ์ ์ ์์ด๋ผ ๋ถ๋ฆฌ๋ ์ฌ๊ฑด์ ์์์ด๋ค.[10]
์ 1์ฐจ ๋ธ๋ผ์ฐ์ ์ ์์์ MS๋ OS ์ ์ ์จ์ ๋๋ ค๊ฐ์ ๋ฐ๋ผ ์ฌ์ฉ์๋ค์ IE๋ฅผ ์ฌ์ฉํ๋๋ก ์ง์์ ์ผ๋ก ์ ๋ํ์๊ณ , ์ด์ ๋ฒํฐ์ง ๋ชปํ ๋ท์ค์ผ์ดํ๋ ๊ธฐ์ด์ฝ ๋งํ๊ณ ๋ง๋ค.
MS์์ 1999๋ ์ ๋ณธ๋ ์์๋ฃฉ์์ ์ฐ์๋ IXMLHTTPRequest๋ผ๋ ์ด๋ฆ์ผ๋ก XMLHTTP wrapper๋ก์ xml request ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์์ํ๋ค. ๋ท์ค์ผ์ดํ์ ํ์๋ฅผ ์์ฒํ๋ ๋ชจ์ง๋ผ ์ฌ๋จ์์๋ ์ด๊ฒ์ 2002๋ ์ ๊ตฌํ์์ผฐ๋ค. ์ดํ ์ฃผ๋ชฉ ๋ฐ์ง ๋ชปํ๊ณ ์๋ค๊ฐ ๊ตฌ๊ธ์ ์ํด String ๊ธฐ๋ฐ์ Data ์ ์ก ๋ฐฉ์์ AJAX๋ผ๋ ์ด๋ฆ์ผ๋ก ์กฐํฉํด ์ ๋ณด์ด๋ฉด์ AJAX ์ธํฐ๋ท ์ ์ธ๊ณ๊ฐ ์ด๋ฆฌ๊ณ ๋ง ๊ทธ๋๋ก ๋๋ฐ์ด ๋ฌ๋ค.
์ด๋ ๋ฏ JS๋ ๊ฐ ๋ฒค๋ ์ฌ๋ง๋ค ๋ค๋ฅธ ๊ฒ์ด ๋ฌธ์ ์ธ ๊ฒ์ ๊ธ์ ์ฝ์ผ๋ฉด ์ฝ๊ฒ ์ ์ ์์ ๊ฒ์ด๋ค. ํ์ง๋ง ์ด๋ฅผ ๋จ์ผํํ ์์ง์์ ์ด๋ฏธ 97๋ ECMA TC39๋ผ๋ ๋ฌธ์๋ฅผ ํตํด ์์์ด ๋์์ง๋ง, ๊ฐ ๋ฒค๋(ํนํ MS)์ ๋นํ์กฐ์ ์ธ ํ๋๋ก ์ธํด ๊ธ๋ฌ ๋จน์๋๋ฐ. ๊ทธ๋ฌ๋ค๊ฐ ๋ ๋ฒ์งธ ๋ธ๋ผ์ฐ์ ์ ์์ด ๋ฐ๋ฐํ ํ ๊ตฌ๊ธํํ ์ฒ์ฐธํ๊ฒ ๋ฐ๋ฆฐ MS๊ฐ ๊นฝ๊นฝ ๊ฑฐ๋ฆฌ๊ณ ๋์์ผ ECMAScript(์ดํ ES) 5๊ฐ ์ ์ ๋๊ณ ํ์ค ๋ฌธ์ ๊ฐ ๋ค์ ํด๊ฒฐ๋์๋ค.[11]
ํํธ ๊ทธ๋ ๊ฒ ํ์คํ๋ฅผ ๊ฑฐ์น JS๋ AJAX, jQuery ๋ฑ์ ๋ฑ์ฅ์ผ๋ก ๊ฑฐ์นจ์๋ ๋ฐ์ ์ ๋ณด์๊ณ , ๊ธฐ์ด์ด Node.js์ ๋ฑ์ฅ์ผ๋ก Server side ์ธ์ด๋ก์ ํ๋ฐ๊ฟํ๊ฒ ๋๋ค. JIT ์ปดํ์ผ ๋ฐฉ์์ ๋์ ํ ๊ตฌ๊ธ์ V8์ด๋ผ๋ JavaScript ์์ง์ ๊ฐ๋ฐํ์๊ณ , ES6 ๊ตฌํ์จ์ด ๋น์ 80% ~ ํ์ฌ 99%์ ๋ฌํ๋ฉด์ CommonJS, AMD ์ง์ ๋ฑ์ ๋ฑ์ฅ๋ ๋ํ๋ฌ๋ค. ๊ณผ๊ฑฐ์ JS์ ๋น๊ตํด ๋ณด๋ฉด ๊ฒฉ์ธ์ง๊ฐ๋ง์ ๋ค ์ ๋๋ก ๊ทธ์ผ๋ง๋ก ์ฅ์กฑ์ ๋ฐ์ ์ด๋ค.
์ต๊ทผ ๋ค์ด JavaScript๋ ์น ๋์์ด๋๋ค์๊ฒ๋ ๊ต์ก์ด ๋๊ณ ์๋ ๋งํผ ์ง์ ์ฅ๋ฒฝ์ด ํ ์ธ์ด์ ๋นํด ๋ฎ์ ํธ์ผ๋ก ์ธ์๋๊ณ ์๋ค. ํด์ธ๋ front-end ์ ๋ด ๊ฐ๋ฐ์๊ฐ ์์ ๋งํผ ์ ๋ฌธํ๋์ด์๋ ๋ฐ๋ฉด, ๊ตญ๋ด์์๋ ์์ค์ด ํ๊ฒฉํ ๋ฎ์ ๋งํผ ์ผ๋ฐ์ธ๋ ์ฝ๊ฒ ์ ๊ทผํ๊ณ ๋ฐฐ์ธ ์ ์๋ค. ๊ตฌ๊ธ ๋ฑ์ ๋น๋กฏํ ์ฌ๋ฌ ๋ฒค๋ ์ฌ์์๋ ์ด ์ธ์ด๋ฅผ ํ์ฉํ ๋ค์ํ ํ๋ซํผ ํ๊ฒฝ์ ์ง์ํ๊ณ ์์ผ๋ฉฐ, Chrome Extension์ด๋ App๋ค์ด ๊ทธ ์ข์ ์์ด๋ค. ์์ JS๋ก ์ด๋ฃจ์ด์ ธ ์์ด ์ค๋ ฅ์ด ๋๋ค๋ฉด ์์ ๋ง์ ๊ฒ๋ค์ ๊ตฌํํด ๋ฐฐํฌํ ์๋ ์๊ธฐ ๋๋ฌธ. ํ์ง๋ง ๊ทธ๋ ๋ค๊ณ ํด์ JavaScript๊ฐ ๋ง๋ฅ ์ฌ์ด ์ธ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ์ค์ฐ์ด๋ค. ๋์ ํ์ ์ธ์ด์ธ ๋งํผ ์์๊ณผ ๋ค๋ฅธ ๋์์ ํ๋ ๊ฒฝ์ฐ๋ ๋ง๊ณ , ์ฝ๋ฐฑ๊ณผ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ ์ด๋ณด์ ์ ์ฅ์์ ์ฝ๋ ๋ฆฌ๋ฉ์ด ๊ต์ฅํ ์ด๋ ต๋ค. ์ฆ ์ ๋ฌธ์ ์ฌ์ฐ๋ ๋ฐฐ์ฐ๋ค๋ณด๋ฉด ๋ฒฝ์ ๋งํ๋ ์ธ์ด. ํ์ง๋ง ES6๋ก ๋์ด์์๋ ์ฝ๋ฐฑ์ด ๋น๊ต์ ํธํด์ก๋ค. ํ์ง๋ง ์ผ๋ถ ๊ตฌํ ๋ธ๋ผ์ฐ์ (๋ํ์ ์ผ๋ก IE)๋ ์ง์์ ํ์ง ์๋๋ค!
์๋ JavaScript ์์ง๋ค์ ๋ชจ๋ ์ค์๊ฐ ์ธํฐํ๋ฆฌํ ์ ํ๊ณ ์์๋๋ฐ, ๋ชจ์ง๋ผ์์ SpiderMonkey ์์ง์ JIT ์ปดํ์ผ ๋ฐฉ์์ ๋์ ํ๋ค. ์ด๋ JavaScript ์์ง์ผ๋ก๋ ์ต์ด๋ก ๋์ ํ ๊ฒ์ด๊ณ , ์ด ๋ ์๋ ค์ง ๊ฒ์ผ๋ก๋ ์์ JavaScript ์ฑ๋ฅ๋ง ๊ธฐ์กด ๋ฒ์ ์ 20~40๋ฐฐ์ ๋ฌํ๋ค.[12] ๊ทธ๋ฆฌ๊ณ ๊ตฌ๊ธ ์ญ์ V8์ด๋ผ๋ JavaScript ์์ง์ ๊ฐ๋ฐํ๋ฉด์ JIT ์ปดํ์ผ ๋ฐฉ์์ ๋์ ํ์๊ณ , JavaScript ์ฑ๋ฅ์ด ๋น์ฝ์ ์ผ๋ก ํฅ์ํ์ฌ ์ง๊ธ์ JavaScript 3D๊ฒ์ ์์ง๋ ๊ฐ๋ฐ๋๊ณ ์๋ค.[13]
3. ๊ฐ๋ฐ ๋๊ตฌ[ํธ์ง]
๋ ์ฝ๋ฉ ํญ๋ชฉ์์ ์์ ๋์ด ์๋ฏ, ์น ๊ฐ๋ฐ์๋ค์ ๋ค์ํ ๋งํฌ์
์ธ์ด ๋ฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ํตํฉ ๊ฐ๋ฐ ํ๊ฒฝ๋ณด๋ค๋ ํ
์คํธ ์๋ํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค. ํฌ๋กฌ์ด๋ ํ์ด์ดํญ์ค์์๋ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ง์ํ์ฌ ๋ธ๋ผ์ฐ์ ์์ ๊ฐ๋ฐ์ ๋๊ธฐ๋ ํ๋ค.# ํ
์คํธ ์๋ํฐ๋ก๋ ๊ทธ๋ฅ ๋ฉ๋ชจ์ฅ์ ์ฌ์ฉํ๋ ์ฌ๋๋ค๋ ์์ง๋ง EditPlus, UltraEdit, Notepad++๊ฐ ์ฃผ๋ก ์ฌ์ฉ๋์๋ค. ํตํฉ ๊ฐ๋ฐ ํ๊ฒฝ์ด ํ์ํ๋ค๋ฉด JetBrains์ WebStorm์ด ๊ถ์ฅ๋๋๋ฐ ์ด๋ ์ ๋ฃ์ด๋ค.[14] ์ดํด๋ฆฝ์ค์ JavaScript Development Tools๋ ๋ฌด๋ฃ. ํ๋ ์ดํด๋ฆฝ์ค์ ๋ฌด๊ฑฐ์์ ๊ทธ๋๋ก ๊ฐ์ง๊ณ ์๋ค.
์ต๊ทผ์๋ GitHub์ Atom, MS์ Visual Studio Code, Adobe์ Brackets ๋ฑ์ ์คํ์์ค ์๋ํฐ๋ ์ถ์๋๊ณ ์๋ค.[15] ํด์ธ์ ๊ฒฝ์ฐ 99ํ๋ก ๊ฐ๊น์ด ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ฅผ ์ฐ๋ ๋งํผ ์น ๊ฐ๋ฐ์ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ ์ฌ์ค์ ์ ๊ณ ํ์ค์ด๋ค. ์์ธํ ๋ด์ฉ์ ํ ์คํธ ์๋ํฐ ์ฐธ๊ณ .
์ต๊ทผ์๋ GitHub์ Atom, MS์ Visual Studio Code, Adobe์ Brackets ๋ฑ์ ์คํ์์ค ์๋ํฐ๋ ์ถ์๋๊ณ ์๋ค.[15] ํด์ธ์ ๊ฒฝ์ฐ 99ํ๋ก ๊ฐ๊น์ด ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ฅผ ์ฐ๋ ๋งํผ ์น ๊ฐ๋ฐ์ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ ์ฌ์ค์ ์ ๊ณ ํ์ค์ด๋ค. ์์ธํ ๋ด์ฉ์ ํ ์คํธ ์๋ํฐ ์ฐธ๊ณ .
4. ํน์ง[ํธ์ง]
JavaScript๋ ๋ฉํฐ-ํจ๋ฌ๋ค์ ์ธ์ด๋ก ๋ช
๋ นํ, ํจ์ํ, ๊ฐ์ฒด์งํฅํ ์ธ์ด๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก๋ ํจ์๊ฐ ์ผ๊ธ์๋ฏผ์ผ๋ก ์ทจ๊ธ๋๋ ์ธ์ด๋ก์จ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ ๋ฐ๋ฅธ๋ค. ์์ฐ์ค๋ฝ๊ฒ ์ด๋ ํด๋ก์ ๋ก ์์ํด ๋์ ๋ณด๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ค.[16] ๋ฉํฐ ํจ๋ฌ๋ค์ ์ธ์ด์ธ๋งํผ ์ํ๋ค๋ฉด ๋ช
๋ นํ ํ๋ก๊ทธ๋๋ฐ(delcarative programming)์ผ๋ก ์ฝ๋๋ฅผ ์ธ ์๋ ์์ง๋ง ๋ณดํต์ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ผ๋ก ์์ฑํด์ผ JavaScript๊ฐ ์ ๊ณตํ๋ ์ฅ์ ์ ๋ฐฑ๋ถ ํ์ฉํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ค. ๊ฐ์ฒด์งํฅ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๊ณ ์ฌ์ง์ด class๋ ES6์ดํ๋ก ์ ๊ณตํ์ง๋ง, JavaScript์์์ class๋ ๊ทธ๋ฅ function์ classํ์์ผ๋ก ์ธ ์ ์๊ฒ ์ ๊ณตํ๋ syntatic sugar์ ์ง๋์ง ์๋๋ค. ์ฆ JavaScript์์ class๋ ์กด์ฌํ์ง๋ง C++์ class์๋ ์์ ํ ๋ค๋ฅธ ๊ฐ๋
์ด๋ฉฐ, JavaScript์ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ํจ์ ํ๋กํ ํ์
์ ๊ธฐ๋ฐํ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ด๋ค. # ๊ฒฐ๊ตญ ๊ทผ๋ณธ์ ์ผ๋ก JavaScript๋ ํจ์์ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ์ ๋๋ก ์ดํดํ์ง ์์ผ๋ฉด ์ ๋๋ก ๋ค๋ฃฐ ์ ์๋ ์ธ์ด์ธ ์
์ด๋ค.
์ด๋ฐ ํน์ง ๋๋ฌธ์ for์ด๋ while ๋ฑ์ loop์ ํน์ํ ๊ฒฝ์ฐ๋ฅผ ์ ์ธํ๊ณ ๋ ์ฐ์ด์ง ์์ผ๋ฉฐ, ์ด๋ค ๋์์ ์ํ์ํค๋ ๋ฐ ์์ด์ JavaScript์์ ์ ๊ณต๋๋ prototype function์ ์ฝ๋ฐฑํจ์๋ฅผ ์ ๊ณตํ์ฌ ์ ์ธ์ ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๊ฒ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ํ๊ต์์ C++ ๋ฑ์ผ๋ก ํ๋ก๊ทธ๋๋ฐ์ ์์ํ ์ฌ๋์ด๋ผ๋ฉด ์ด๋ฐ ์ฝ๋ฉ ์คํ์ผ์ ์ต์ํด์ง๋ ๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆฌ์ง๋ง, ํ๋ฒ ์ตํ๊ณ ๋๋ฉด ๋งค์ฐ ๊ฐ๋จ๋ช ๋ฃํ๊ฒ ์ฝ๋๋ฅผ ์ธ ์ ์๋ค๋ ์ , ์ธ์ ๋ Immutability๊ฐ ๋ณด์ฅ๋๋ค๋ ์ , ์์ ํจ์(Pure Function)์ ๊ธฐ๋ฐ์ผ๋ก ์ฝ๋๊ฐ ์์ฑ๋๊ธฐ ๋๋ฌธ์ ์์์น ๋ชปํ ๋ฒ๊ทธ๊ฐ ์ต์ํ๋๋ค๋ ์ ๋ฑ์ด ๋งค๋ ฅ์ ์ธ ์์๊ฐ ์ ๋ง ๋ง์ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ด๋ค. 2010๋ ํ๋ฐ ๋ค์ด์๋ RxJS๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ์ด ๋ฑ์ฅํ๋ค. ํจ์ํ ํ๋ก๊ทธ๋๋ฐ๊ณผ ๋งค์ฐ ํก์ฌํ์ง๋ง ์ฌ๊ธฐ์ ์ด๋ฒคํธ์ ๋ฐ์ดํฐ ์คํธ๋ฆผ(Observable)์ ๊ธฐ์ค์ผ๋ก ์ฌ๊ณ ํ๋ ๊ฒ์ ๋ํ ํ๋ ์์ํฌ๋ก, side effect ์ํ ๋ฐ asynchronous operation์ ์์ด์ ๋งค์ฐ ์ฅ์ ์ด ๋ง์ ๋์ธ๋ก ๋ ์ค๋ฅด๊ณ ์๋ค.
JS๋ ๋์ ํ์ดํ, ์ฝํ์ ์ธ์ด๊ณ [17], ๊ฐ๋จํ ๋ฌธ๋ฒ์ ์ฝ๋ฉ ๋ฐฉ๋ฒ์ด ๋น๊ต์ ์ ์ฐํ๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ์ง์ ์ฅ๋ฒฝ์ด ๊ฑฐ์ ์์ด์ ์ฝ๋ค๊ณ ์ด์ผ๊ธฐ ๋์ง๋ง, ๊น์ด ๋ค์ด๊ฐ ๋ณด๋ฉด ๋งค์ฐ๋ณํ์ ์ธ ํน์ดํ ์ธ์ด์ด์ ๋งค์ฐ ์ฐ์ํ ์ค๊ณ๋ฅผ ์๋ํ๋ ๊ฐ๋ ฅํ ์ธ์ด์ด๋ค. ํธํ๋ฉด์๋ ๊ฐ๋ ฅํ ํ
์คํธ ํ๊ธฐ๋ฒ(JSON)[18]์ ๊ฐ์ก์ผ๋ฉฐ, ๊ตฌ์กฐ์ ์ผ๋ก ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ์ ๋ฆฌํ๋ค. ์ด๋ฌํ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ํนํ๋ ํน์ง์ ์ดํ Node.js๋ฅผ ํ์์ํค๋ฉฐ JavaScript๋ผ๋ ์ธ์ด์ ์ฌ์ฉ ๋ฐ๊ฒฝ์ ํญ๋ฐ์ ์ผ๋ก ๋๋ฆฌ๋ ๋ฐ ๊ธฐ์ฌํ๊ฒ ๋๋ค.
์ง์ ์ฅ๋ฒฝ์ ๋ฎ์ง๋ง ์ค์ ์ฌ์ฉํ๋ ค๋ฉด ๋ชจ๋ ์ธ์ด๊ฐ ๊ทธ๋ ๋ฏ ์ด๋ ต๋ค. ํนํ ๋ค๋ฅธ ์ธ์ด์ ๋น๊ตํ์ ๋ ์์๋ ๋ชปํ ๋ ํนํ ํน์ง๋ค์ด ๋ง์ ์ธ์ด์ด๋ค. ๊ฐ์ฅ ๋ํ์ ์ธ ๊ฒ์ด ๊ฐ์ฒด(Object)์ ์์(const) ๊ฐ๋ ์ด๋ค. ๊ฐ์ฒด์ ๊ฒฝ์ฐ ์์๋ก ์ ์ธํด๋ ๋ฉ๋ชจ๋ฆฌ๊ฐ๋ง ์์์ผ ๋ฟ ๊ฐ์ฒด ์์ ๋ด์ฉ์ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค. ์ฆ ๊ฐ์ฒด๊ฐ ์ ์ฅ๋ ๊ณต๊ฐ์ ๊ฐ๋ฆฌํค๋ ์ ๋ณด๋ง ์์์ผ๋ฟ ๊ทธ ๊ฐ์ฒด์ ์ ๋ณด ์์ฒด๋ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค. ์ด๋ฐ ์ด์ ๋ก JavaScript์์ ๊ฐ์ฒด๋ ๋ณ์๋ก ์ ์ธํ ์ด์ ๊ฐ ์์ผ๋ฉฐ ๊ฑฐ์ ๋ชจ๋ ์ผ์ด์ค์์ ์์๋ก ์ ์ธํ๋๊ฒ ์ผ๋ฐ์ ์ด๋ค. ๋ ์ด๋ ๊ฒ ์์๋ก ์ ์ธ๋ ๊ฐ์ฒด์ Immutability๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ์ฌ๋ฌ ํ ํฌ๋์ด ์ฐ์ด๊ฒ ๋๋๋ฐ ์ฃผ๋ก ES6์์ ๋์ ๋ Spread Operator๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค. ์ด๋ ๊ฒ ๊ฐ์ฒด๋ฅผ ๋ณต์ฌํ์ฌ ์ฌ์ฉํ ๋๋ Deep cloneํ์ง ์์ผ๋ฉด ์๋์น ์๊ฒ ์๋ณธ ๊ฐ์ฒด๊ฐ ๋ณ๊ฒฝ๋์ด๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์ ๋ง์ ์ฃผ์๊ฐ ํ์ํ๋ค.
๋ํ ๋น๋๊ธฐ๋ก ์๋๋๋ ์ฝ๋๊ฐ ๋ง์ ์ฝ๋ ์์์๋ถํฐ ์ฐจ๊ทผ์ฐจ๊ทผ ์คํ๋๋ ๊ฒ ์๋๋ผ๋ ์ ๋ํ JavaScript๋ฅผ ๋ง์คํฐํ๋ ๋ฐ์ ๋์ด์ผํ ์ฅ๋ฒฝ ์ค ํ๋์ด๋ค. ์ด ๋๋ฌธ์ ํนํ Side effect ์ํ์ด ์๊ตฌ๋๋ ์ํฉ์์ ์ ์ฐจ์ ์ผ๋ก ์ํ๋ ๋ฐ๋ฅผ ์ํํ๋๋ก ๋ง๋ค๊ธฐ ์ํด์ ๊ฐ๋จํ๊ฒ๋ promise๋ callback์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์์๋ถํฐ ๋ณต์กํ๊ฒ๋ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฌ์ฉํ ์ ์๋ ๋ฑ ์ฌ๋ฌ ํ ํฌ๋์ด ์๊ตฌ๋๋ค. ์ด๋ฐ ๋ ํนํ ํน์ง๋ค ๋๋ฌธ์ ํ ์ฃผ๋ฅ ์ธ์ด์๋ ๋ ๋ค๋ฅธ ์ฌ๊ณ ๋ฐฉ์์ ์๊ตฌํ๋ค. ๋ณต์กํ side effect ์ํ์ ์์ด์ ์์์น ๋ชปํ ๋ฒ๊ทธ๋ฅผ ์ ๋ฐํ๋ ๋ฑ ๊ฐ๋ฐ์์๊ฒ ๋ง์ ํผ๋ก๊ฐ์ ์๊ฒจ์ฃผ๋ ํน์ง์ด์ง๋ง ์ด๋ฌํ ๋น๋๊ธฐ ์คํผ๋ ์ด์ ์ JavaScript์ ๋์ ํผํฌ๋จผ์ค๋ฅผ ์งํฑํ๋ ์ฃผ์ํ ํน์ง ์ค ํ๋์ด๋ค.
์งง์ ๋์๋ค์ ๊ฒฝ์ฐ ์ ์ฐจ์ ํ๋ก๊ทธ๋๋ฐ์ ํด๋ ์ ๋์๊ฐ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด์ง๋ง ๊ธด ์ฝ๋๋ฅผ ์ง๋ณด๋ฉด ์์ธ๋ก ๊ณจ์น ์ํ๋ค.[19] ์๋ฅผ ๋ค์ด ์น ๋ธ๋ผ์ฐ์ ๋ Node.js ์๋ฒ์์๋ JavaScript์ ๋น๋๊ธฐ ํ๋ก๊ทธ๋จ ์์ฑ์์๋ ์ค๋ ๋๋ฅผ ๋ถ๊ธฐํ์ฌ ์์ ์ ๋ถ์ฐ ์ฒ๋ฆฌํ๊ฑฐ๋, ์ฝ๋ฃจํด์ผ๋ก ์์ ์ ๋๊ธฐ ์ํค๋ ๋์ ์ปจํฐ๋ด์์ด์ (+ํ์ด๋จธ)๋ง ์ด์ฉํด ๋น๋๊ธฐ ํ๋ก๊ทธ๋จ์ ๊ตฌํํ๋ค. ์ฆ ์ฑ๊ธ์ค๋ ๋ ์์ ์๋ถํ ๋ง ์กด์ฌํ๊ณ 1 ํ๋ก์ธ์ค 1 ์ค๋ ๋๋ก ์๋ํ๋ค[20]. ์ค๋ ๋ ๋ถ๊ธฐ์ ์ฝ๋ฃจํด ๊ฐ์ ์ถ์ํ ๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์์์ ์ต์ํ ํ๋ก๊ทธ๋๋จธ๋ค์ด๋ผ๋ฉด ์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์ธํ์ฌ ๊ฝค ๊ณ ์ํ ์ ์๋ค.[21] ํนํ ๋๋ค์์ด ์ฌ๋ฌ ๋ฒ ์ค์ฒฉ๋๋ ๊ณ ์ฐจ ํจ์๋ ๊ทธ์ผ๋ง๋ก ์์คํธ๋์ ๊ทน์น.์ ์ Java๋ ๋๋ค์์ 8๋ฒ์ ์์์ผ ์ง์ํ๋ค... ๊ฒ๋ค๊ฐ ํธ์ด์คํ
์ด๋ผ๋, ํน์ ์กฐ๊ฑด ํ์์ ์ ์ธํ๋ ์์์๋ ๋ค๋ฅด๊ฒ ๋ณ์ ๋ฐ ํจ์๋ฅผ ํ ๋นํ๋ ํน์ฑ์ด ์๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด์ const๋ let๋ฅผ ์ฃผ๋ก ์ด๋ค. ๋ณดํต ๋ถ๋ณ์ฑ์ด ์๋ const๋ฅผ ๋ ์ฌ์ฉํ๋ ํธ.
๋ค๋ง ์์์ ์ธ๊ธ๋ ์ฝ๋ฃจํด์ ES6, ์ฆ 2015๋ ๋ ํ์ค์ ์ด๋ฏธ ํฌํจ๋์ด ์๋์ง ์ค๋๋ค. ๋ณดํต ์ฝ๋ฃจํด์ด ์๋ Promise๋ผ๊ณ ๋ถ๋ฅด๋ค ๋ณด๋ ๋์ด ๊ฐ์ ๊ฒ์ด๋ผ๋๊ฑธ ๋ชจ๋ฅด๋ ์ฌ๋๋ ์๋ ํธ. ๋ํ ๋ณ๋ ฌ์ ์คํ๋ Promise.all๋ก ๋์ ์คํ์ด ๊ฐ๋ฅํ๊ฒ ๋์๋ค.[22]
2010๋ ๋ ์ค๋ฐ ์ดํ JavaScript๋ ๊ตฌ๊ธ์ V8 JS Engine ๋ฒํ๋ฅผ ๋ฐ์ ํ๋ฃจ๊ฐ ๋ค๋ฅด๊ฒ ๋ฐ์ ํ๊ณ ์์ผ๋ฉฐ ์ด๋ฌํ ๋ชจ์์๋ ๋ค์ ๊ธ์์๋ ์ ๋ํ๋๋ค. 2016๋ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ๋ ๊ธฐ๋ถ ๊ฐ๋ฐ์๋ค ์ฌ์ด์์ ์ด๋ฐ ๋ฐ์ ์์ด ํ์ ๊ฐ ๋๊ธฐ๋ ํ๋ค. ๊ณผ๊ฑฐ์๋ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์๋ง ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์น ์ ์ฉ ํ๋ก ํธ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ถ๊ณผํ์ง๋ง, ํ์ฌ๋ Node.js๋ผ๋ ๊ฐ๋ ฅํ Runtime Envioronment์ ๋ฑ์ฅ์ผ๋ก ๋ฐฑ์๋ ์ธ์ด๋ก์จ๋ ๋งค์ฐ ๊ฐ๋ ฅํ ์ฑ๋ฅ์ ๊ฐ์ง ์ธ์ด๋ก ์ฌํ์ํ์ผ๋ฉฐ ์ค์ ๋ก๋ ๋ฐฑ์๋ ๋ถ์ผ์์ ๋น ๋ฅด๊ฒ ์ ์ ์จ์ ๋์ฌ๊ฐ๊ณ ์๋ค. Node.js ์๋ฒ๋ ํ์ฅ์ฑ์ด ๋๊ณ ๊ฐ๋ฐ์ ์ ์ฅ์์๋ JavaScript๋ง ์๋ฉด ์ ๊ทผ์ด ๊ฐ๋ฅํด ์ ์ง๋ณด์ ์ธก๋ฉด์์๋ ์ ๋ฆฌํ๋ฉด์ด ์๊ณ ๋ฌด์๋ณด๋ค i/o๊ฐ ์์ฃผ ์ด๋ฃจ์ด์ง๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ํผํฌ๋จผ์ค ์์ฒด๊ฐ ๋งค์ฐ ์ข๋ค. ์ฌ๊ธฐ์ ORM๊น์ง ๋ฑ์ฅํ๋ฉด์ ์ฌ์ง์ด ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์คํ ์ด ์ ๊ณตํ๋ Stored Procedure๊น์ง๋ ๋์ฒด๊ฐ ๊ฐ๋ฅํ ์์ค๊น์ง ์ด๋ฅด๋ ๋ค. ์ด์ ๋์์ ๋ฐฑ์๋ ๋ฐ ํ๋ก ํธ์๋ ์๋ฐฉํฅ์์ ์ ๋ง ์๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ฑ์ฅํ๋ฉด์ ๋ฐ์ ์ด ๊ฐ์ํ๋๋ ์ค์ด๋ค. '์ฌ๊ธฐ์ HTML5, ๋ฐ์ํ ์น ๋ฑ ๋ค์ํ ์น ๊ธฐ์ ์ ๋ฐ๋ฌ๋ก ์ธํด ์ฌ์ค์ ๋ฐ์คํฌํ ์ดํ๋ฆฌ์ผ์ด์ ์ด ์ ํดํ๊ณ ์น์ด ๋ชจ๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ํ์ค์ด ๋๋ฉด์ ์ค์์ฑ์ด ๋์ฑ ๋๋๋ฌ์ง๋ ์ธ์ด๊ฐ ๋์๋ค. ์ค์ ๋ก ๋ง์ ์ํํธ์จ์ด ํ์ฌ๋ค์ด ๊ธฐ์กด C++๋ Java ๋ฑ์ผ๋ก ์ฐ์ฌ์ง PC์ฉ ์ดํ๋ฆฌ์ผ์ด์ ์ ์น์ฑ์ผ๋ก ์ ํํ๊ณ ์์ด ์์๋ ๋ง๊ณ ์ ๋ง ๋ํ ๋ฐ์ ์ธ์ด๋ผ ํ ์ ์๋ค.
์ด๋ฐ ํน์ง ๋๋ฌธ์ for์ด๋ while ๋ฑ์ loop์ ํน์ํ ๊ฒฝ์ฐ๋ฅผ ์ ์ธํ๊ณ ๋ ์ฐ์ด์ง ์์ผ๋ฉฐ, ์ด๋ค ๋์์ ์ํ์ํค๋ ๋ฐ ์์ด์ JavaScript์์ ์ ๊ณต๋๋ prototype function์ ์ฝ๋ฐฑํจ์๋ฅผ ์ ๊ณตํ์ฌ ์ ์ธ์ ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๊ฒ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ํ๊ต์์ C++ ๋ฑ์ผ๋ก ํ๋ก๊ทธ๋๋ฐ์ ์์ํ ์ฌ๋์ด๋ผ๋ฉด ์ด๋ฐ ์ฝ๋ฉ ์คํ์ผ์ ์ต์ํด์ง๋ ๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆฌ์ง๋ง, ํ๋ฒ ์ตํ๊ณ ๋๋ฉด ๋งค์ฐ ๊ฐ๋จ๋ช ๋ฃํ๊ฒ ์ฝ๋๋ฅผ ์ธ ์ ์๋ค๋ ์ , ์ธ์ ๋ Immutability๊ฐ ๋ณด์ฅ๋๋ค๋ ์ , ์์ ํจ์(Pure Function)์ ๊ธฐ๋ฐ์ผ๋ก ์ฝ๋๊ฐ ์์ฑ๋๊ธฐ ๋๋ฌธ์ ์์์น ๋ชปํ ๋ฒ๊ทธ๊ฐ ์ต์ํ๋๋ค๋ ์ ๋ฑ์ด ๋งค๋ ฅ์ ์ธ ์์๊ฐ ์ ๋ง ๋ง์ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ด๋ค. 2010๋ ํ๋ฐ ๋ค์ด์๋ RxJS๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ์ด ๋ฑ์ฅํ๋ค. ํจ์ํ ํ๋ก๊ทธ๋๋ฐ๊ณผ ๋งค์ฐ ํก์ฌํ์ง๋ง ์ฌ๊ธฐ์ ์ด๋ฒคํธ์ ๋ฐ์ดํฐ ์คํธ๋ฆผ(Observable)์ ๊ธฐ์ค์ผ๋ก ์ฌ๊ณ ํ๋ ๊ฒ์ ๋ํ ํ๋ ์์ํฌ๋ก, side effect ์ํ ๋ฐ asynchronous operation์ ์์ด์ ๋งค์ฐ ์ฅ์ ์ด ๋ง์ ๋์ธ๋ก ๋ ์ค๋ฅด๊ณ ์๋ค.
JS๋ ๋์ ํ์ดํ, ์ฝํ์ ์ธ์ด๊ณ [17], ๊ฐ๋จํ ๋ฌธ๋ฒ์ ์ฝ๋ฉ ๋ฐฉ๋ฒ์ด ๋น๊ต์ ์ ์ฐํ๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ์ง์ ์ฅ๋ฒฝ์ด ๊ฑฐ์ ์์ด์ ์ฝ๋ค๊ณ ์ด์ผ๊ธฐ ๋์ง๋ง, ๊น์ด ๋ค์ด๊ฐ ๋ณด๋ฉด ๋งค์ฐ
์ง์ ์ฅ๋ฒฝ์ ๋ฎ์ง๋ง ์ค์ ์ฌ์ฉํ๋ ค๋ฉด ๋ชจ๋ ์ธ์ด๊ฐ ๊ทธ๋ ๋ฏ ์ด๋ ต๋ค. ํนํ ๋ค๋ฅธ ์ธ์ด์ ๋น๊ตํ์ ๋ ์์๋ ๋ชปํ ๋ ํนํ ํน์ง๋ค์ด ๋ง์ ์ธ์ด์ด๋ค. ๊ฐ์ฅ ๋ํ์ ์ธ ๊ฒ์ด ๊ฐ์ฒด(Object)์ ์์(const) ๊ฐ๋ ์ด๋ค. ๊ฐ์ฒด์ ๊ฒฝ์ฐ ์์๋ก ์ ์ธํด๋ ๋ฉ๋ชจ๋ฆฌ๊ฐ๋ง ์์์ผ ๋ฟ ๊ฐ์ฒด ์์ ๋ด์ฉ์ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค. ์ฆ ๊ฐ์ฒด๊ฐ ์ ์ฅ๋ ๊ณต๊ฐ์ ๊ฐ๋ฆฌํค๋ ์ ๋ณด๋ง ์์์ผ๋ฟ ๊ทธ ๊ฐ์ฒด์ ์ ๋ณด ์์ฒด๋ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค. ์ด๋ฐ ์ด์ ๋ก JavaScript์์ ๊ฐ์ฒด๋ ๋ณ์๋ก ์ ์ธํ ์ด์ ๊ฐ ์์ผ๋ฉฐ ๊ฑฐ์ ๋ชจ๋ ์ผ์ด์ค์์ ์์๋ก ์ ์ธํ๋๊ฒ ์ผ๋ฐ์ ์ด๋ค. ๋ ์ด๋ ๊ฒ ์์๋ก ์ ์ธ๋ ๊ฐ์ฒด์ Immutability๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ์ฌ๋ฌ ํ ํฌ๋์ด ์ฐ์ด๊ฒ ๋๋๋ฐ ์ฃผ๋ก ES6์์ ๋์ ๋ Spread Operator๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค. ์ด๋ ๊ฒ ๊ฐ์ฒด๋ฅผ ๋ณต์ฌํ์ฌ ์ฌ์ฉํ ๋๋ Deep cloneํ์ง ์์ผ๋ฉด ์๋์น ์๊ฒ ์๋ณธ ๊ฐ์ฒด๊ฐ ๋ณ๊ฒฝ๋์ด๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์ ๋ง์ ์ฃผ์๊ฐ ํ์ํ๋ค.
๋ํ ๋น๋๊ธฐ๋ก ์๋๋๋ ์ฝ๋๊ฐ ๋ง์ ์ฝ๋ ์์์๋ถํฐ ์ฐจ๊ทผ์ฐจ๊ทผ ์คํ๋๋ ๊ฒ ์๋๋ผ๋ ์ ๋ํ JavaScript๋ฅผ ๋ง์คํฐํ๋ ๋ฐ์ ๋์ด์ผํ ์ฅ๋ฒฝ ์ค ํ๋์ด๋ค. ์ด ๋๋ฌธ์ ํนํ Side effect ์ํ์ด ์๊ตฌ๋๋ ์ํฉ์์ ์ ์ฐจ์ ์ผ๋ก ์ํ๋ ๋ฐ๋ฅผ ์ํํ๋๋ก ๋ง๋ค๊ธฐ ์ํด์ ๊ฐ๋จํ๊ฒ๋ promise๋ callback์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์์๋ถํฐ ๋ณต์กํ๊ฒ๋ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฌ์ฉํ ์ ์๋ ๋ฑ ์ฌ๋ฌ ํ ํฌ๋์ด ์๊ตฌ๋๋ค. ์ด๋ฐ ๋ ํนํ ํน์ง๋ค ๋๋ฌธ์ ํ ์ฃผ๋ฅ ์ธ์ด์๋ ๋ ๋ค๋ฅธ ์ฌ๊ณ ๋ฐฉ์์ ์๊ตฌํ๋ค. ๋ณต์กํ side effect ์ํ์ ์์ด์ ์์์น ๋ชปํ ๋ฒ๊ทธ๋ฅผ ์ ๋ฐํ๋ ๋ฑ ๊ฐ๋ฐ์์๊ฒ ๋ง์ ํผ๋ก๊ฐ์ ์๊ฒจ์ฃผ๋ ํน์ง์ด์ง๋ง ์ด๋ฌํ ๋น๋๊ธฐ ์คํผ๋ ์ด์ ์ JavaScript์ ๋์ ํผํฌ๋จผ์ค๋ฅผ ์งํฑํ๋ ์ฃผ์ํ ํน์ง ์ค ํ๋์ด๋ค.
์งง์ ๋์๋ค์ ๊ฒฝ์ฐ ์ ์ฐจ์ ํ๋ก๊ทธ๋๋ฐ์ ํด๋ ์ ๋์๊ฐ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด์ง๋ง ๊ธด ์ฝ๋๋ฅผ ์ง๋ณด๋ฉด ์์ธ๋ก ๊ณจ์น ์ํ๋ค.[19] ์๋ฅผ ๋ค์ด ์น ๋ธ๋ผ์ฐ์ ๋ Node.js ์๋ฒ์์๋ JavaScript์ ๋น๋๊ธฐ ํ๋ก๊ทธ๋จ ์์ฑ์์๋ ์ค๋ ๋๋ฅผ ๋ถ๊ธฐํ์ฌ ์์ ์ ๋ถ์ฐ ์ฒ๋ฆฌํ๊ฑฐ๋, ์ฝ๋ฃจํด์ผ๋ก ์์ ์ ๋๊ธฐ ์ํค๋ ๋์ ์ปจํฐ๋ด์์ด์ (+ํ์ด๋จธ)๋ง ์ด์ฉํด ๋น๋๊ธฐ ํ๋ก๊ทธ๋จ์ ๊ตฌํํ๋ค. ์ฆ ์ฑ๊ธ์ค๋ ๋ ์์ ์๋ถํ ๋ง ์กด์ฌํ๊ณ 1 ํ๋ก์ธ์ค 1 ์ค๋ ๋๋ก ์๋ํ๋ค[20]. ์ค๋ ๋ ๋ถ๊ธฐ์ ์ฝ๋ฃจํด ๊ฐ์ ์ถ์ํ ๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์์์ ์ต์ํ ํ๋ก๊ทธ๋๋จธ๋ค์ด๋ผ๋ฉด ์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์ธํ์ฌ ๊ฝค ๊ณ ์ํ ์ ์๋ค.[21] ํนํ ๋๋ค์์ด ์ฌ๋ฌ ๋ฒ ์ค์ฒฉ๋๋ ๊ณ ์ฐจ ํจ์๋ ๊ทธ์ผ๋ง๋ก ์์คํธ๋์ ๊ทน์น.
๋ค๋ง ์์์ ์ธ๊ธ๋ ์ฝ๋ฃจํด์ ES6, ์ฆ 2015๋ ๋ ํ์ค์ ์ด๋ฏธ ํฌํจ๋์ด ์๋์ง ์ค๋๋ค. ๋ณดํต ์ฝ๋ฃจํด์ด ์๋ Promise๋ผ๊ณ ๋ถ๋ฅด๋ค ๋ณด๋ ๋์ด ๊ฐ์ ๊ฒ์ด๋ผ๋๊ฑธ ๋ชจ๋ฅด๋ ์ฌ๋๋ ์๋ ํธ. ๋ํ ๋ณ๋ ฌ์ ์คํ๋ Promise.all๋ก ๋์ ์คํ์ด ๊ฐ๋ฅํ๊ฒ ๋์๋ค.[22]
2010๋ ๋ ์ค๋ฐ ์ดํ JavaScript๋ ๊ตฌ๊ธ์ V8 JS Engine ๋ฒํ๋ฅผ ๋ฐ์ ํ๋ฃจ๊ฐ ๋ค๋ฅด๊ฒ ๋ฐ์ ํ๊ณ ์์ผ๋ฉฐ ์ด๋ฌํ ๋ชจ์์๋ ๋ค์ ๊ธ์์๋ ์ ๋ํ๋๋ค. 2016๋ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ๋ ๊ธฐ๋ถ ๊ฐ๋ฐ์๋ค ์ฌ์ด์์ ์ด๋ฐ ๋ฐ์ ์์ด ํ์ ๊ฐ ๋๊ธฐ๋ ํ๋ค. ๊ณผ๊ฑฐ์๋ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์๋ง ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์น ์ ์ฉ ํ๋ก ํธ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ถ๊ณผํ์ง๋ง, ํ์ฌ๋ Node.js๋ผ๋ ๊ฐ๋ ฅํ Runtime Envioronment์ ๋ฑ์ฅ์ผ๋ก ๋ฐฑ์๋ ์ธ์ด๋ก์จ๋ ๋งค์ฐ ๊ฐ๋ ฅํ ์ฑ๋ฅ์ ๊ฐ์ง ์ธ์ด๋ก ์ฌํ์ํ์ผ๋ฉฐ ์ค์ ๋ก๋ ๋ฐฑ์๋ ๋ถ์ผ์์ ๋น ๋ฅด๊ฒ ์ ์ ์จ์ ๋์ฌ๊ฐ๊ณ ์๋ค. Node.js ์๋ฒ๋ ํ์ฅ์ฑ์ด ๋๊ณ ๊ฐ๋ฐ์ ์ ์ฅ์์๋ JavaScript๋ง ์๋ฉด ์ ๊ทผ์ด ๊ฐ๋ฅํด ์ ์ง๋ณด์ ์ธก๋ฉด์์๋ ์ ๋ฆฌํ๋ฉด์ด ์๊ณ ๋ฌด์๋ณด๋ค i/o๊ฐ ์์ฃผ ์ด๋ฃจ์ด์ง๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ํผํฌ๋จผ์ค ์์ฒด๊ฐ ๋งค์ฐ ์ข๋ค. ์ฌ๊ธฐ์ ORM๊น์ง ๋ฑ์ฅํ๋ฉด์ ์ฌ์ง์ด ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์คํ ์ด ์ ๊ณตํ๋ Stored Procedure๊น์ง๋ ๋์ฒด๊ฐ ๊ฐ๋ฅํ ์์ค๊น์ง ์ด๋ฅด๋ ๋ค. ์ด์ ๋์์ ๋ฐฑ์๋ ๋ฐ ํ๋ก ํธ์๋ ์๋ฐฉํฅ์์ ์ ๋ง ์๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ฑ์ฅํ๋ฉด์ ๋ฐ์ ์ด ๊ฐ์ํ๋๋ ์ค์ด๋ค. '์ฌ๊ธฐ์ HTML5, ๋ฐ์ํ ์น ๋ฑ ๋ค์ํ ์น ๊ธฐ์ ์ ๋ฐ๋ฌ๋ก ์ธํด ์ฌ์ค์ ๋ฐ์คํฌํ ์ดํ๋ฆฌ์ผ์ด์ ์ด ์ ํดํ๊ณ ์น์ด ๋ชจ๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ํ์ค์ด ๋๋ฉด์ ์ค์์ฑ์ด ๋์ฑ ๋๋๋ฌ์ง๋ ์ธ์ด๊ฐ ๋์๋ค. ์ค์ ๋ก ๋ง์ ์ํํธ์จ์ด ํ์ฌ๋ค์ด ๊ธฐ์กด C++๋ Java ๋ฑ์ผ๋ก ์ฐ์ฌ์ง PC์ฉ ์ดํ๋ฆฌ์ผ์ด์ ์ ์น์ฑ์ผ๋ก ์ ํํ๊ณ ์์ด ์์๋ ๋ง๊ณ ์ ๋ง ๋ํ ๋ฐ์ ์ธ์ด๋ผ ํ ์ ์๋ค.
์ด ๋๋ฌธ์ ํ์ฌ JavaScript๋ ํ์ฅ์ฑ์ด ๋งค์ฐ ๋์ ์ธ์ด์ด๋ค. JavaScript๋ง ์๋ฉด ์ผ๋ฐ์ ์ธ ์ฌ์ดํธ ๊ฐ๋ฐ๋ถํฐ React.js ๋๋ Vue.js๋ฅผ ์ฌ์ฉํด SPA (Single Page Application) ์น์ฌ์ดํธ ๊ฐ๋ฐ, iOS์ ์๋๋ก์ด๋ ์ฑ์ ๋ง๋ค์ ์๋ React Native, ์น์๋ฒ๋ ๋ค๋ฅธ ์๋ฒ ์ฌ์ด๋ ์ดํ๋ฆฌ์ผ์ด์
์ Node.js, ๋ฐ์คํฌํ ์ฑ์ ๋ฆฌ๋
์ค, macOS, ์๋์ฐ, tvOS ๋ฑ ํ๋ซํผ์์ ์ฌ์ฉ ๊ฐ๋ฅํ Electron์ ์ด์ฉํ๊ฑฐ๋ React Native for Windows๋ฅผ ์ฌ์ฉํด Windows 10 SDK๊น์ง ์ ๊ทผํ ์ ์๋ค.
๊ณผ๊ฑฐ ํ๋ก ํธ์๋ ์ธ์ด๋ก๋ง JavaScript๊ฐ ์ฐ์์ ๋ ๊ฐ์ฅ ์ ๋ช ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก๋ jQuery๊ฐ ์์๋ค. ์ ์ตํ๋๋ฉด ์ง์ ์ง๋ ๊ฒ๋ณด๋ค ๊ฝค ๊ฐ๋จํ๊ฒ ๊ธฐ๋ฅ์ ๋ถ๋ฌ ์ธ ์ ์์ด ๋ํ์์๋ ๊ฐ๋ฅด์ณค๋ ํ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ค. ํ์ง๋ง React๋ Vue.js, ํน์ Angular๊ฐ ๋ฑ์ฅํ ์ดํ๋ก ๋ชจ๋ํ ๊ฐ๋ฐ์ด ์์๊ฐ์ ๋์ธ๊ฐ ๋์๊ณ , ์ด๋ jQuery ๋๋น ๋น๊ต๋ ์๋ ์ ๋๋ก ์๋ฑํ๊ฒ ์์ฐ์ฑ์ด ๋๊ธฐ ๋๋ฌธ์ ํ์ฌ๋ก์๋ jQuery ์์ฒด๊ฐ ๋ชจ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์๋ ๋์ด์ ์ฌ์ฉ๋์ง ์๋ ๊ธฐ์ ์ด๋ผ ์๊ฐํ๋ฉด ๋๋ค. ์ํ๋ค๋ฉด ๋ค๋ฅธ ํ๋ ์์ํฌ์ jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ณํํด์ ์ฌ์ฉํ ์๋ ์์ผ๋, ๊ทธ๋ด ๋ฐ์์ผ ๊ทธ๋ฅ ์ง์ Query selector๋ฅผ ์ฌ์ฉํด์ DOM์ ์ ๋ฐ์ดํธํ๋ ๊ฒ ๋ซ๊ธฐ ๋๋ฌธ์ ์ ๋ง ๊ฐ๋จํ ์ดํ๋ฆฌ์ผ์ด์ ์ด ์๋๋ฉด ์ฌ์ฉํ ์ด์ ๊ฐ ์์ด์ ธ๋ฒ๋ ธ๋ค.
๋์ธ๊ฐ ๋ React๋ Vue.js์ ๊ฒฝ์ฐ ๋จ๋ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ๋ ๋๋ฌผ๋ฉฐ Redux๋ Mobx๊ฐ์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ด ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํ๋ค. ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๊ฐ๋ฐ์ ์ถฉ๋ถํ ๊ฐ๋ฅํ๋ ๋งค์ฐ ๋นํจ์จ์ ์ด๋ผ ๊ท๋ชจ๊ฐ ํฐ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์ฌ์ค์ ๊ฐ๋ฐ ์์ฒด๊ฐ ๋ถ๊ฐ๋ฅํ๋ค๊ณ ๋ณด๋ฉด ๋๋ค. ์ด ๋๋ฌธ์ ํ์ฌ๋ก๋ Redux๊ฐ ์ฌ์ค์ ์ ๊ณ ํ์ค์ฒ๋ผ ์ฌ์ฉ๋๊ณ ์๋ค. ์ต๊ทผ์๋ Facebook์์ context๋ผ๊ณ ๋ถ๋ฆฌ๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ React์ ํฌํจ์ํค๋ฉด์ ์์ ๊ท๋ชจ์ ์ดํ๋ฆฌ์ผ์ด์ ์๋ context๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ณ ๋ คํด๋ณผ๋ง ํ๋ค.
๊ด๋ จ ์ฑ ์ผ๋ก๋ Douglas Crockford์ JavaScript ์ค๋ธ์ ํธ ์์ฑ ํจํด, JavaScript: The Good Parts(์๋ฐ์คํฌ๋ฆฝํธ ํต์ฌ ๊ฐ์ด๋)๋งค์ฐ ์์ ๊ฒ ํจ์ , ์นด์ผ ์ฌ์จ์ You don't know JS(์๋ฌธ)์ด ์๋ค.
๋ณ์.ํจ์.ํจ์.ํจ์.์ฝ๋ฐฑ(์๋ฌ,๊ฐ) ์ด๋ฐ์์ผ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. ๋ค๋ฅธ ์ธ์ด๊ฐ ์์ํด๋์ค.ํ์ํด๋์ค......ํ์ํด๋์ค.๊ทธ ํด๋์ค์ ๋ณ์๋ ๋ฉ์๋ ์ด๋ฐ์๊ณผ ๋ค๋ฅด๊ฒ ~์์ ๊ฐ์ ๋๊ฐ์ ์๋ฏธ๋ก ์ด๋ฐ์์ผ๋ก ์ถ๊ฐํ๋๊ฒ ๊ฐ๋ฅํ๋ค.
๊ณผ๊ฑฐ ํ๋ก ํธ์๋ ์ธ์ด๋ก๋ง JavaScript๊ฐ ์ฐ์์ ๋ ๊ฐ์ฅ ์ ๋ช ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก๋ jQuery๊ฐ ์์๋ค. ์ ์ตํ๋๋ฉด ์ง์ ์ง๋ ๊ฒ๋ณด๋ค ๊ฝค ๊ฐ๋จํ๊ฒ ๊ธฐ๋ฅ์ ๋ถ๋ฌ ์ธ ์ ์์ด ๋ํ์์๋ ๊ฐ๋ฅด์ณค๋ ํ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ค. ํ์ง๋ง React๋ Vue.js, ํน์ Angular๊ฐ ๋ฑ์ฅํ ์ดํ๋ก ๋ชจ๋ํ ๊ฐ๋ฐ์ด ์์๊ฐ์ ๋์ธ๊ฐ ๋์๊ณ , ์ด๋ jQuery ๋๋น ๋น๊ต๋ ์๋ ์ ๋๋ก ์๋ฑํ๊ฒ ์์ฐ์ฑ์ด ๋๊ธฐ ๋๋ฌธ์ ํ์ฌ๋ก์๋ jQuery ์์ฒด๊ฐ ๋ชจ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์๋ ๋์ด์ ์ฌ์ฉ๋์ง ์๋ ๊ธฐ์ ์ด๋ผ ์๊ฐํ๋ฉด ๋๋ค. ์ํ๋ค๋ฉด ๋ค๋ฅธ ํ๋ ์์ํฌ์ jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ณํํด์ ์ฌ์ฉํ ์๋ ์์ผ๋, ๊ทธ๋ด ๋ฐ์์ผ ๊ทธ๋ฅ ์ง์ Query selector๋ฅผ ์ฌ์ฉํด์ DOM์ ์ ๋ฐ์ดํธํ๋ ๊ฒ ๋ซ๊ธฐ ๋๋ฌธ์ ์ ๋ง ๊ฐ๋จํ ์ดํ๋ฆฌ์ผ์ด์ ์ด ์๋๋ฉด ์ฌ์ฉํ ์ด์ ๊ฐ ์์ด์ ธ๋ฒ๋ ธ๋ค.
๋์ธ๊ฐ ๋ React๋ Vue.js์ ๊ฒฝ์ฐ ๋จ๋ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ๋ ๋๋ฌผ๋ฉฐ Redux๋ Mobx๊ฐ์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ด ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํ๋ค. ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๊ฐ๋ฐ์ ์ถฉ๋ถํ ๊ฐ๋ฅํ๋ ๋งค์ฐ ๋นํจ์จ์ ์ด๋ผ ๊ท๋ชจ๊ฐ ํฐ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์ฌ์ค์ ๊ฐ๋ฐ ์์ฒด๊ฐ ๋ถ๊ฐ๋ฅํ๋ค๊ณ ๋ณด๋ฉด ๋๋ค. ์ด ๋๋ฌธ์ ํ์ฌ๋ก๋ Redux๊ฐ ์ฌ์ค์ ์ ๊ณ ํ์ค์ฒ๋ผ ์ฌ์ฉ๋๊ณ ์๋ค. ์ต๊ทผ์๋ Facebook์์ context๋ผ๊ณ ๋ถ๋ฆฌ๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ React์ ํฌํจ์ํค๋ฉด์ ์์ ๊ท๋ชจ์ ์ดํ๋ฆฌ์ผ์ด์ ์๋ context๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ณ ๋ คํด๋ณผ๋ง ํ๋ค.
๊ด๋ จ ์ฑ ์ผ๋ก๋ Douglas Crockford์ JavaScript ์ค๋ธ์ ํธ ์์ฑ ํจํด, JavaScript: The Good Parts(์๋ฐ์คํฌ๋ฆฝํธ ํต์ฌ ๊ฐ์ด๋)
๋ณ์.ํจ์.ํจ์.ํจ์.์ฝ๋ฐฑ(์๋ฌ,๊ฐ) ์ด๋ฐ์์ผ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. ๋ค๋ฅธ ์ธ์ด๊ฐ ์์ํด๋์ค.ํ์ํด๋์ค......ํ์ํด๋์ค.๊ทธ ํด๋์ค์ ๋ณ์๋ ๋ฉ์๋ ์ด๋ฐ์๊ณผ ๋ค๋ฅด๊ฒ ~์์ ๊ฐ์ ๋๊ฐ์ ์๋ฏธ๋ก ์ด๋ฐ์์ผ๋ก ์ถ๊ฐํ๋๊ฒ ๊ฐ๋ฅํ๋ค.
5. DOM[23]๊ณผ JavaScript[ํธ์ง]
์ค๋๋ JavaScript๊ฐ ๊ฐ์ฅ ๋๋ฆฌ ์ฐ์ด๋ ๋ถ์ผ๋ ํด๋ผ์ด์ธํธ์ฉ ์ธํฐํ์ด์ค์ด๋ค. ์ด ๋ ์ฃผ๋ก JavaScript๋ ์น ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณต๋๋ DOM API๋ก ์ฌ์ฉํ๊ฒ ๋๋ค.
JavaScript์์ html์ ๋ฌธ์์ ์ ๊ทผํ๋ API๋ฅผ ๋ปํ๋ ์ฉ์ด๋ก DOM์ด ๋ฑ์ฅํ์๋ค. ์ด์ฐฝ๊ธฐ ECMA 5์ ๋ฑ์ฅ๊ณผ ๋ณธ๊ฒฉํ ์ด์ Browser War์ ์ฌ๊ฑด์์ ์ ์ ์๋ค์ํผ MS๋ ์์ฌ๋ง์ ๊ตฌํ์ ๊ณ ์งํ์๊ณ , ์ด๋ DOM์ ๊ตฌํ์ด ๊ฐ ๋ฒค๋ ์ฌ๋ง๋ค ๋ค๋ฅด๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค. ์์์ ๋งํ IE 8 ์ดํ์ ๋ธ๋ผ์ฐ์ ๋ค์ด addEventListener๊ฐ ์๋ attachEvent ๋ฑ MS ์์ฌ์ ๋ฌธ๋ฒ์ ๊ฐ๋ฐํ๋ค๊ณ ํ๋๋ฐ, ์ด method๋ค์ ๋ชจ๋ document object ์๋์ ์๋ค. ๋คํํ ์ด ๋ฌธ์ ์ ์ browser war 2 ์ดํ ๊ตฌ๊ธ์ด MS๋ฅผ ๊บพ์์ผ๋ก์ JS ํ์คํ๋ก ์ ์ฐจ ์ฌ๋ผ์ง๊ณ ์๋ค.
๊ทธ ์ค์์๋ DOM์ ๊ฒฝ์ฐ ECMAScript ์ชฝ์ ์ํ ์ ์ ๋ณด๋ค๋ Apple, google ๋ฑ์ด WHATWG working group์ ๊ตฌ์ฑํ๊ณ html5 ํ์ค์ ์ ํ ๊ฒ์ ์ํด ํ์คํ ๋์๋ค.
JavaScript์์ html์ ๋ฌธ์์ ์ ๊ทผํ๋ API๋ฅผ ๋ปํ๋ ์ฉ์ด๋ก DOM์ด ๋ฑ์ฅํ์๋ค. ์ด์ฐฝ๊ธฐ ECMA 5์ ๋ฑ์ฅ๊ณผ ๋ณธ๊ฒฉํ ์ด์ Browser War์ ์ฌ๊ฑด์์ ์ ์ ์๋ค์ํผ MS๋ ์์ฌ๋ง์ ๊ตฌํ์ ๊ณ ์งํ์๊ณ , ์ด๋ DOM์ ๊ตฌํ์ด ๊ฐ ๋ฒค๋ ์ฌ๋ง๋ค ๋ค๋ฅด๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค. ์์์ ๋งํ IE 8 ์ดํ์ ๋ธ๋ผ์ฐ์ ๋ค์ด addEventListener๊ฐ ์๋ attachEvent ๋ฑ MS ์์ฌ์ ๋ฌธ๋ฒ์ ๊ฐ๋ฐํ๋ค๊ณ ํ๋๋ฐ, ์ด method๋ค์ ๋ชจ๋ document object ์๋์ ์๋ค. ๋คํํ ์ด ๋ฌธ์ ์ ์ browser war 2 ์ดํ ๊ตฌ๊ธ์ด MS๋ฅผ ๊บพ์์ผ๋ก์ JS ํ์คํ๋ก ์ ์ฐจ ์ฌ๋ผ์ง๊ณ ์๋ค.
๊ทธ ์ค์์๋ DOM์ ๊ฒฝ์ฐ ECMAScript ์ชฝ์ ์ํ ์ ์ ๋ณด๋ค๋ Apple, google ๋ฑ์ด WHATWG working group์ ๊ตฌ์ฑํ๊ณ html5 ํ์ค์ ์ ํ ๊ฒ์ ์ํด ํ์คํ ๋์๋ค.
6. CommonJS[ํธ์ง]
JavaScript์ ๋ฐ์ ๊ณผ ํจ๊ป ์ด ์ธ์ด๋ฅผ ์๋ฒ ์ฌ์ดํธ ์คํฌ๋ฆฝํ
๋ฑ ๋ค์ํ ํ๊ฒฝ์์ ์ฌ์ฉํ๊ณ ์ ํ๋ ์์ง์์ด ์ผ์ด๋ฌ์ผ๋ฉฐ, ๊ทธ ์์ด๊ฐ ๋ฐ๋ก CommonJS๋ค.[24] CommonJS๋ ๋ค์ํ API ๊ท๊ฒฉ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๋๋ฐ, ๋ํ์ ์ธ ๊ฒ์ด ๋ชจ๋ ์คํ์ด๋ค. ๋น์ ECMAScript ํ์ค์ ๋ชจ๋ ์คํ์ด ์์๊ธฐ ๋๋ฌธ์, CommonJS์ ๋ชจ๋ ์คํ์ ์๋นํ ํ๊ธ๋ ฅ์ ๊ฐ์ก๋ค.
CommonJS ์ง์์ด ๋ชจ๋ ๊ตฌํ์์ ๋คํธ์ํฌ ์ฌ์ฉ์ ๊ณ ๋ คํ์ง ์๋๋ค๋ ๋นํ์ ๊ฐ๋ผ์ ธ ๋์จ ๊ฒ์ด AMD(Asynchronous Module Definition)์ด๋ค.
CommonJS๋ฅผ ์ด์ฉํ ๊ฐ์ฅ ์ฃผ์ํ ํ๋ซํผ์ Node.js์ด๋ค. Node.js๋ก ์ด๋ค์ง ์๋ฒ๋ ๊ฝค ์ธ๊ธฐ๋ฅผ ๋๊ณ ์๋๋ฐ, ์น์ ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ๋์ผ ์ธ์ด๋ก ํ๋ก๊ทธ๋๋ฐ ํจ์ผ๋ก์ ์ป๋ ์ด๋์ด ์๋นํ๊ณ , ์์ํ ์๋ฒ๋ก์์ ์ฑ๋ฅ์ด ๊ฝค ์ข์ ํธ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ํ์ง๋ง CommonJS์์ ์ ์ํ ๊ธฐ๋ฅ์ด ์ฐจํ ๋ค๋ฅธ ํํ๋ก ECMAScript ํ์ค์ ๋๋ถ๋ถ ์ถ๊ฐ๋์๊ณ , Node.js๋ CommonJS์ ์ฌ์ฉ์ ์ค์งํ๊ธฐ๋ก ํ์๋ค. ๊ทธ๋ผ์๋ ์ฌ์ ํ CommonJS์ API๋ Node.js ํ๊ฒฝ์์ ๋ง์ด ์ฐ์ด๊ณ ์๋ค.
CommonJS ์ง์์ด ๋ชจ๋ ๊ตฌํ์์ ๋คํธ์ํฌ ์ฌ์ฉ์ ๊ณ ๋ คํ์ง ์๋๋ค๋ ๋นํ์ ๊ฐ๋ผ์ ธ ๋์จ ๊ฒ์ด AMD(Asynchronous Module Definition)์ด๋ค.
CommonJS๋ฅผ ์ด์ฉํ ๊ฐ์ฅ ์ฃผ์ํ ํ๋ซํผ์ Node.js์ด๋ค. Node.js๋ก ์ด๋ค์ง ์๋ฒ๋ ๊ฝค ์ธ๊ธฐ๋ฅผ ๋๊ณ ์๋๋ฐ, ์น์ ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ๋์ผ ์ธ์ด๋ก ํ๋ก๊ทธ๋๋ฐ ํจ์ผ๋ก์ ์ป๋ ์ด๋์ด ์๋นํ๊ณ , ์์ํ ์๋ฒ๋ก์์ ์ฑ๋ฅ์ด ๊ฝค ์ข์ ํธ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ํ์ง๋ง CommonJS์์ ์ ์ํ ๊ธฐ๋ฅ์ด ์ฐจํ ๋ค๋ฅธ ํํ๋ก ECMAScript ํ์ค์ ๋๋ถ๋ถ ์ถ๊ฐ๋์๊ณ , Node.js๋ CommonJS์ ์ฌ์ฉ์ ์ค์งํ๊ธฐ๋ก ํ์๋ค. ๊ทธ๋ผ์๋ ์ฌ์ ํ CommonJS์ API๋ Node.js ํ๊ฒฝ์์ ๋ง์ด ์ฐ์ด๊ณ ์๋ค.
7. ๊ด๋ จ ๊ฐ๋ [ํธ์ง]
7.1. ํ์ค์[ํธ์ง]
- ECMAScript: ๋ท์ค์ผ์ดํ๊ฐ ์ธํฐ๋ท ์์ ๋ค์ํ ์คํฌ๋ฆฝํธ ์ธ์ด๋ฅผ ํ๋๋ก ๋ฌถ๊ธฐ ์ํด ์ ์ํ ํ์ค์. ์ด ์คํ์ ๊ตฌํํ JavaScript ๊ตฌํ์ฒด๋ก๋ ๊ตฌ๊ธ์ V8 ์์ง, ๋ชจ์ง๋ผ์ SpiderMonkey, Microsoft์ Chakra ๋ฑ์ด ์๋ค. ์ค์ ๋ก JavaScript์๋ง ์ ์ฉ๋๋ ํ์ค์์ด ์๋๋ผ, IE์ JScript๋ Adobe Flash ActionScript์ ํ์ค์ด๊ธฐ๋ ํ๋ค. ํ์ฌ๋ ECMAScript 2020์ ํ์ค (ES11)๊น์ง ๋์์์ผ๋ฉฐ, ๋๋ถ๋ถ์ JavaScript ๋ฐํ์์์๋ ์ด ํ์ค์ ๋ชจ๋ ๊ตฌํํ ์ํ๋ ์๋๋ค. 2018๋ ํ์ฌ๋ IE๋ฑ์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ์ธํ๊ณ ๋ ES2016 ํ์ค๊น์ง๋ ์ ๋นํ ๊ตฌํ์ด ๋์ด์๋ ์ํ. ๋ํ, ๊ตฌํ์ด ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๊ธฐ ์ํด์ Babel ๋ฑ์ Transpiler๋ฅผ ์ฌ์ฉํด์ ES2015 ์ด์์ ๊ธฐ๋ฅ์ ์ด๋ ์ ๋ ์ฌ์ฉํ ์ ์๋ค.
7.2. ์ฃผ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ[ํธ์ง]
- jQuery: DOM Manipulating ๋ผ์ด๋ธ๋ฌ๋ฆฌ. ์ฌ์ค์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์ ํ์์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ผ๋ ๋ฆฌ์กํธ, ์ต๊ทค๋ฌ ๋ฑ์ ํ๋ ์์ํฌ์ ์์ฐ์ฑ์ด ์๋ ๋๋ค ๋ณด๋ 2010๋ ๋ ํ๋ฐ๋ถํฐ๋ ์ฌ์ค์ ๋ ๊ฑฐ์๊ฐ ๋์์ผ๋ฉฐ ์์ฃผ ๊ฐ๋จํ ์น์ฌ์ดํธ์์๋ง ์ฐ์ด๊ณ ์์ฐ๋ ์ถ์ธ๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก document.querySelectorAll('oooo')๋ฅผ $('oooo')๋ก ์ธ ์ ์๋ ๋ฑ์ ๊ธฐ๋ฅ์ด ์๋ค.
- AngularJS: ๊ตฌ๊ธ์์ ์ ์ํ ํ๋ก ํธ์๋์ฉ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ JavaScript ํ๋ ์์ํฌ. Angular 1์ผ๋ก๋ ๋ถ๋ฆฐ๋ค. ๋ฐฑ์๋, ํ๋ก ํธ์๋๋ฅผ ๋์์ ์์ ํ ์ ์๋ค. MongoDB, Express, AngularJS, Node.js๋ฅผ ํจ๊ป ์ฌ์ฉํ์ฌ MEAN Stack์ผ๋ก ๋ง์ด ์ฌ์ฉํ๋ค. Angular 2 ์ดํ๋ก๋ ์ด๊ฑด TypeScript๋ฅผ ์ด์ฉํ๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ง์ ๊ธฐ๋ฅ๋ค์ด ๋ด์ฌ๋์ด ์๋ค.
- React: Facebook์์ ๋ง๋ ํ๋ก ํธ์๋์ฉ ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ๊ณผ, Virtual DOM ๊ฐ๋ ์ ๋์ ํ UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. ์์ฐ์ฑ์ด ๋๊ณ , DOM ์ ๋ฐ์ดํธ์ ์์ด์ ์ฑ๋ฅ์ด ๋งค์ฐ ๋นจ๋ผ ๋์ ์ธ ์น ์ดํ๋ฆฌ์ผ์ด์ ๊ตฌ์ฑ์ ์ ๋ฆฌํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฌํ ๋์ ์น์ด ๋ชจ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ํ์ ์์๊ฐ ๋์ด๋ฒ๋ฆฐ๋งํผ ์ถ์ ์ดํ ๊พธ์คํ ์ ์ ์จ์ ๋๋ ค๊ฐ๋ฉฐ ์ ๊ณ ํ์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋๋ก ์๋ฆฌ์ก์๋ค. ์ต๊ทผ์๋ React Hooks์ด๋ผ ๋ถ๋ฆฌ๋ ๋ฉ์๋๊ฐ ์ง์๋๋ฉด์ ์์ฐ์ฑ์ด ๋ ์ข์์ก๋ค. html๋ก ๋ทฐ๋ฅผ ์์ฑํด์ผํ๋ Angular์๋ ๋ค๋ฅด๊ฒ JSX๋ผ๋ ๋ฌธ๋ฒ์ ์ง์ํ๋ฉด์ JavaScript๋ง์ผ๋ก ์ดํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ๋๊ฒ ๊ฐ๋ฅํ๋ค. ๊ธฐ์กด ๋ฌธ์์๋ MVC์ V(View)๋ฅผ ๋ด๋นํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๊ณ ๋์ด ์์์ผ๋ ๋ฆฌ์กํธ๋ MVC framework๊ฐ ์๋๋ฉฐ View๋ฟ๋ง ์๋๋ผ Controller ๋ถ๋ถ๊น์ง๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ด์์ ์์ฑ์ด ๊ฐ๋ฅํ๋ฏ๋ก ์ ํํ ์ค๋ช ์ด ์๋๋ค.
- Vue.js: ์ค๊ตญ๊ณ ๋ฏธ๊ตญ์ธ ์๋ฐ ์ ๊ฐ ๋ง๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ํ๋ก ํธ์๋์ฉ ํ๋ ์์ํฌ์ด๋ค. ๊ต์ฅํ ์์ ๋กญ๊ณ ์ ์ฐํ๊ฒ ์ถ๊ฐ ๊ธฐ๋ฅ๋ค์ ๋ถ๋ฌ์ฌ ์ ์๋ค๋ ํน์ง์ด ์์ผ๋ ์ถ๊ฐ ๊ธฐ๋ฅ๋ค์ ๋ฌด๋ถ๋ณํ๊ฒ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ์์ ์ฑ์ ๋จ์ด๋จ๋ฆด ์ ์๋ค.
- Node.js: ๋ธ๋ผ์ฐ์ ์์์๋ง ์๋ํ๋ JavaScript๋ฅผ ๋ธ๋ผ์ฐ์ ์ธ์ ํ๊ฒฝ์์ ์๋ํ ์ ์๊ฒ ๋ง๋ค์ด ์ค ๋ฐํ์ ํ๊ฒฝ์ด๋ค.
- Express.js: Node.js๋ฅผ ์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ. ์ฃผ๋ก Node๋ก ๋ฐฑ์๋ ๊ฐ๋ฐํ ๋ ์ฌ์ฉ๋๋ค.
- Deno: Node.js์ ๊ฐ๋ฐ์ Ryan Dahl์ด Node.js์ ์์ฌ์ด์ ์ ๊ฐ์ ํ JavaScript ์์ง์ด๋ค.
7.3. ๊ธฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ[ํธ์ง]
- Electron: GitHub์์ ๋ง๋ HTML+CSS+Javascript ๋ฐ์คํฌํฑ ์ฑ ํ๋ ์์ํฌ.
- HTML5shiv: IE 6~8์์ HTML5๊ฐ ๋์ํ๊ฒ ํด ์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด๋ค.
- Prefix Free: ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ก ๋ CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. Vendor Prefix ์์ ์ ์๋์ผ๋ก ์งํํ์ฌ ์ค๋ค.
7.4. ํ์ ์ธ์ด[ํธ์ง]
- TypeScript: ๋ง์ดํฌ๋ก์ํํธ์์ ๋ฐํํ JavaScript์ ์ ์ ํ์ ๊ฐ๋ ์ ์ถ๊ฐํ ์ ํ ์ธ์ด. CoffeeScript์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ปดํ์ผ ๊ฒฐ๊ณผ๋ JavaScript์ด๋ค. ์ฝํ์ ์ธ์ด์ธ JavaScript ํ์ ์์คํ ์ ๊ตฌ๋ฉ์ ๋ฉ์ฐ๊ธฐ ์ํด ๋์๋ค. ๊ทธ๋ ๊ฒ ๊ฐํ์ ์ธ์ด๊ฐ ๋ TypeScript๋ ์ฝ๋์ ๊ฒฌ๊ณ ํจ์ ๊ฐ์ ์ผ๋ก ๋ด์ธ์ฐ๊ณ ์๋ค. ํ์ฌ๋ Angular 2 ์ดํ์์ ์ด ์ธ์ด๋ฅผ ์ฑํํ๋ฉด์ ๋ง์ด ์ฌ์ฉ๋๊ธฐ ์์ํ๋ค. ECMAScript 2015 ํ์ค๋ ๊ตฌํ๋์ด ์์ผ๋ฉฐ ์์ํ JavaScript์ ๋ฌธ๋ฒ์ ์ธ ์ฐจ์ด๊ฐ ์ ๋ค. ๋ง์ดํฌ๋ก์ํํธ์์ ๋ง๋ค์๋ค๋ณด๋ ๋ง์ดํฌ๋ก์ํํธ ํธ์ง๊ธฐ์ธ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋์์ ๋ณ์ ํ์ ์ด๋ ์ค๋ฅ์ ๊ดํ ํผ๋๋ฐฑ์ ์ฆ๊ฐ์ฆ๊ฐ ํด ์ฃผ์ด์ ๋ฒ๊ทธ ๋ฐฉ์ง์ ์ ์ฉํ๋ค.
- CoffeeScript: JavaScript์ ๋ฌธ๋ฒ์ ๊ฐ์ ํ ์ ํ ์ธ์ด. ์ปดํ์ผ ๊ฒฐ๊ณผ๋ก JavaScript ์ฝ๋๋ฅผ ๋ด๋ณด๋ธ๋ค. ๊ธฐ์กด JavaScript์ ์ค๊ณ ๊ฒฐํจ์ ๊ทน๋ณตํ ๋ชฉ์ ์ผ๋ก ๋ง๋ค์ด์ก๋ค. ๊ทธ๋ฌ๋ Python์ฒ๋ผ ๋ค์ฌ์ฐ๊ธฐ๋ก ์ฝ๋ ๋ธ๋ก์ ๊ตฌ๋ถํ๋ ๋ฌธ๋ฒ์ ์ฑํํด ํธ๋ถํธ๊ฐ ๊ฐ๋ฆฌ๋ ํธ์ด๋ค. 2017๋ ๋ง์๋ '๋ถํธ' ์ชฝ์ผ๋ก ๋ง์ด ๊ธฐ์ธ์ด ์๋ ์ํฉ์ด๋ค.
- Dart: ๊ตฌ๊ธ์์ ๋ฐํํ JavaScript ๋ฌธ๋ฒ์ ๊ฐ์ ํ ์ธ์ด. TypeScript๋ณด๋ค ์กฐ๊ธ ๋น ๋ฅธ ์๊ธฐ์ ๋ฐํํ๋ค.
- JavaScript.NET: ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ปดํ์ผ๋ฌ์ฉ ์ธ์ด๋ก ๊ฐ์กฐํ ๊ฒ์ด๋ค.
8. ์น๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ[ํธ์ง]
2016๋
ํ์ฌ๊น์ง ์น ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํ ์ ์๋ ๊ฑฐ์ ์ ์ผํ ์ธ์ด์ด์ ๋์ฒด์ฌ๊ฐ ์กด์ฌํ์ง ์๋ ์ธ์ด์ด๋ค. ์ผ๋ถ ์ ์ ์ธ ์น์ฌ์ดํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ง๋ค ์ ์์ง๋ง, ๋จ์ ์ ๋๋ฉ์ด์
(์ ๋๋ฉ์ด์
gif, CSS ์ ๋๋ฉ์ด์
)์ ๋์ด์๋ ๋ฌด์ธ๊ฐ๋ฅผ ํ๋ ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ฐ๋์ ํ์ํด์ง๋ค. ๊ทธ๋ฐ๋ฐ ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ํ๋ ์ผ์ ๋์ ํด์ค ์ ์๋ ๋ค๋ฅธ ๊ธฐ์ ์ด ํ๋์ ๊ฐ์ ๋ฆฌ์น ์ธํฐ๋ท ์ ํ๋ฆฌ์ผ์ด์
์ ์ฌ์ฉํ๋ ์๋ฐ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ํ๋์์ ์ก์
์คํฌ๋ฆฝํธ๋ ๊ฒฐ๊ตญ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ค์ธ ECMA๋ฅผ ๋ฐ๋ฅธ๋ค. ๊ทธ๋์ ๋ค์ดํฐ๋ธ ํ๊ฒฝ์์๋ ์์ญ ์ข
์ ๋ค์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์ฌ์ฉ๋์ง๋ง ์น ํ๊ฒฝ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฌ์ฉ์ด ๊ฐ์ ๋๊ณ ์๋ค. ๋ค๋ฅธ ์ธ์ด๋ก ๊ธฐ์ ๋ ์์ค ์ฝ๋๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํํด ์ฃผ๋ ์ปดํ์ผ๋ฌ(ํธ๋์ค์ปดํ์ผ๋ฌ)๊ฐ ์๊ธด ํ์ง๋ง, ์ด์ฐจํผ ์ต์ข
์ ์ผ๋ก๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฒ์ญ๋ผ์ ์คํ๋๊ธฐ ๋๋ฌธ์ ์น ๊ฐ๋ฐ์๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํผํด๊ฐ ๋ฐฉ๋ฒ์ด ์๋ค.
๋ฐ๋ฉด, ๊ฐ์ ์น ํ๊ฒฝ์์ ์ฌ์ฉ๋๋ ๋๋จธ์ง ๋ ํต์ฌ ์ธ์ด(๋งํฌ์ ์ธ์ด)์ธ HTML๊ณผ CSS๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋์ฒด๊ฐ ๊ฐ๋ฅํ๋ค. ๊ทธ ์ค HTML์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ .js ํ์ผ์ ์ง์ ์ฝ์ด ์คํํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ์ต์ํ์ ์ฝ๋(script ํ๊ทธ ํ ์ค)๋ ํ์ํ์ง๋ง, CSS๋ ์์ ํ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋์ฒดํด์ ๊ธฐ์ ํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. ๋จ์ง ์ฑ๋ฅ๊ณผ ํธ์์ฑ์์ ์ํด๋ฅผ ๋ณด๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ๊ฒ ํ์ง ์์ ๋ฟ์ด๋ค. ํ์ด์ค๋ถ์์ ๊ฐ๋ฐํ React ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ HTML๊ณผ CSS๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ ์ดํ๋ค. jsx ํ ํ๋ฆฟ ๋ฌธ๋ฒ์ด HTML์ ๋ฎ์์๊ธด ํ์ง๋ง jsx transformer(babel ์ปดํ์ผ๋ฌ ๋ฑ)๋ฅผ ํต๊ณผํ ๋ค์๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ก ๋ณํ๋ผ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ๋ค์ดํฐ๋ธ ํ๊ฒฝ์์์ ๊ธฐ๊ณ์ด์ ๊ฐ์ ์ง์๋ฅผ ํ์ฌ์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋๋ฆฌ๊ณ ์๋ ์ ์ด๋ค.
2016๋ ๊น์ง๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฑ๋ฅ์ ๋์ด์ฌ๋ฆฌ๋ ค๋ ์๋(asm.js ๋ฑ)๋ ์์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์ฒดํ๋ ค๋ ์๋๋ ์ด๋ฃจ์ด์ง์ง ์๊ณ ์๋ค. ๊ณผ๊ฑฐ์ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ๋น์ฃผ์ผ ๋ฒ ์ด์ง ๊ธฐ๋ฐ์ VBScript๋ฅผ ๋ฏผ ์ ์ด ์์ง๋ง ๊ฒฐ๊ตญ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐ๋ ค ์ฌ๋ผ์ก๊ณ , ์ค๋๋ ์๋ ๊ตฌ๊ธ์ Dart ์ธ์ด๊ฐ ๋์ฒด๋ฅผ ์๋ํ๊ณ ๋ ์์ง๋ง ํ์ฌ๊น์ง๋ Dart ์ธ์ด๋ ํธ๋์ค์ปดํ์ผ๋ฌ์ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฒ์ญ๋๋ ๊ตด์์ ๋นํ๋ ์ค์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ฑฐ์น์ง ์๊ณ ์ง์ Dart ์ฝ๋๋ฅผ ์คํํ ์ ์๋ ๋ธ๋ผ์ฐ์ ๋ ๊ตฌ๊ธ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ์ผํ๋ค.
2016๋ 11์ ๊ธฐ์ค ๊ตฌ๊ธยทMSยท๋ชจ์ง๋ผยท์ ํ์์ ์น์ด์ ๋ธ๋ฆฌ(WebAssembly)์ ๋ํ ์๋๊ฐ ์ด๋ฃจ์ด์ง๊ณ ์๋ค. ์น ์์ง์ ์ํ ์ผ์ข ์ ์ด์ ๋ธ๋ฆฌ ์ธ์ด(์ ํํ๋ ๋ฐ์ดํธ์ฝ๋)๋ฅผ ๊ฐ๋ฐํ๋ ค๋ ํ๋ก์ ํธ๋ก, ๊ฐ๋ฐ์๊ฐ C, C++ ์ธ์ด๋ก ์์ฑ๋ ํ๋ก๊ทธ๋จ์ ์ด๋ค ๋ธ๋ผ์ฐ์ ์์๋ ๋์๊ฐ๋๋ก ์ปดํ์ผ ํ ์ ์๊ฒ ๋๋ ๊ฒ์ด ๋ชฉํ๋ค. ํ์ฌ๋ก์๋ C/C++ ํ๋ก๊ทธ๋จ์ ์ปดํ์ผ ํด์ ๋๋ฆฌ๋ ๊ฒ์ด ๋ชฉํ์ง๋ง, ๋์ค์๋ ๋ค๋ฅธ ์ธ์ด๋ค๋ ๋ชฉํ๋ก ํ๊ณ ์๋ค. ๋ค๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์์ ํ ๋์ฒดํ๋ ๊ฒ์ ์๋๊ณ , ์ํธ ๋ณด์์ ๊ด๊ณ๋ก ์ฐ๊ตฌ๋๊ณ ์๋ค.
๋ฐ๋ฉด, ๊ฐ์ ์น ํ๊ฒฝ์์ ์ฌ์ฉ๋๋ ๋๋จธ์ง ๋ ํต์ฌ ์ธ์ด(๋งํฌ์ ์ธ์ด)์ธ HTML๊ณผ CSS๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋์ฒด๊ฐ ๊ฐ๋ฅํ๋ค. ๊ทธ ์ค HTML์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ .js ํ์ผ์ ์ง์ ์ฝ์ด ์คํํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ์ต์ํ์ ์ฝ๋(script ํ๊ทธ ํ ์ค)๋ ํ์ํ์ง๋ง, CSS๋ ์์ ํ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋์ฒดํด์ ๊ธฐ์ ํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. ๋จ์ง ์ฑ๋ฅ๊ณผ ํธ์์ฑ์์ ์ํด๋ฅผ ๋ณด๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ๊ฒ ํ์ง ์์ ๋ฟ์ด๋ค. ํ์ด์ค๋ถ์์ ๊ฐ๋ฐํ React ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ HTML๊ณผ CSS๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ ์ดํ๋ค. jsx ํ ํ๋ฆฟ ๋ฌธ๋ฒ์ด HTML์ ๋ฎ์์๊ธด ํ์ง๋ง jsx transformer(babel ์ปดํ์ผ๋ฌ ๋ฑ)๋ฅผ ํต๊ณผํ ๋ค์๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ก ๋ณํ๋ผ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ๋ค์ดํฐ๋ธ ํ๊ฒฝ์์์ ๊ธฐ๊ณ์ด์ ๊ฐ์ ์ง์๋ฅผ ํ์ฌ์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋๋ฆฌ๊ณ ์๋ ์ ์ด๋ค.
2016๋ ๊น์ง๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฑ๋ฅ์ ๋์ด์ฌ๋ฆฌ๋ ค๋ ์๋(asm.js ๋ฑ)๋ ์์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์ฒดํ๋ ค๋ ์๋๋ ์ด๋ฃจ์ด์ง์ง ์๊ณ ์๋ค. ๊ณผ๊ฑฐ์ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ๋น์ฃผ์ผ ๋ฒ ์ด์ง ๊ธฐ๋ฐ์ VBScript๋ฅผ ๋ฏผ ์ ์ด ์์ง๋ง ๊ฒฐ๊ตญ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐ๋ ค ์ฌ๋ผ์ก๊ณ , ์ค๋๋ ์๋ ๊ตฌ๊ธ์ Dart ์ธ์ด๊ฐ ๋์ฒด๋ฅผ ์๋ํ๊ณ ๋ ์์ง๋ง ํ์ฌ๊น์ง๋ Dart ์ธ์ด๋ ํธ๋์ค์ปดํ์ผ๋ฌ์ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฒ์ญ๋๋ ๊ตด์์ ๋นํ๋ ์ค์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ฑฐ์น์ง ์๊ณ ์ง์ Dart ์ฝ๋๋ฅผ ์คํํ ์ ์๋ ๋ธ๋ผ์ฐ์ ๋ ๊ตฌ๊ธ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ์ผํ๋ค.
2016๋ 11์ ๊ธฐ์ค ๊ตฌ๊ธยทMSยท๋ชจ์ง๋ผยท์ ํ์์ ์น์ด์ ๋ธ๋ฆฌ(WebAssembly)์ ๋ํ ์๋๊ฐ ์ด๋ฃจ์ด์ง๊ณ ์๋ค. ์น ์์ง์ ์ํ ์ผ์ข ์ ์ด์ ๋ธ๋ฆฌ ์ธ์ด(์ ํํ๋ ๋ฐ์ดํธ์ฝ๋)๋ฅผ ๊ฐ๋ฐํ๋ ค๋ ํ๋ก์ ํธ๋ก, ๊ฐ๋ฐ์๊ฐ C, C++ ์ธ์ด๋ก ์์ฑ๋ ํ๋ก๊ทธ๋จ์ ์ด๋ค ๋ธ๋ผ์ฐ์ ์์๋ ๋์๊ฐ๋๋ก ์ปดํ์ผ ํ ์ ์๊ฒ ๋๋ ๊ฒ์ด ๋ชฉํ๋ค. ํ์ฌ๋ก์๋ C/C++ ํ๋ก๊ทธ๋จ์ ์ปดํ์ผ ํด์ ๋๋ฆฌ๋ ๊ฒ์ด ๋ชฉํ์ง๋ง, ๋์ค์๋ ๋ค๋ฅธ ์ธ์ด๋ค๋ ๋ชฉํ๋ก ํ๊ณ ์๋ค. ๋ค๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์์ ํ ๋์ฒดํ๋ ๊ฒ์ ์๋๊ณ , ์ํธ ๋ณด์์ ๊ด๊ณ๋ก ์ฐ๊ตฌ๋๊ณ ์๋ค.
9. ๊ธฐํ[ํธ์ง]
- ํด์ธ์์๋ JavaScript๋ฅผ ๊ฒฐ๊ณผ๋ฌผ๋ก ๋ด๋ณด๋ด๋ ์ปดํ์ผ๋ฌ๊ฐ ๋ง์ด ๋ฑ์ฅํ๊ณ ์๋ค. ์ด์ ํจ๊ป ๊ณ ์ฑ๋ฅ์ ์๊ตฌํ๋ ํ๋ก๊ทธ๋จ์ ์๋์ํค๊ธฐ ์ํด ๊ฐ๋น์ง ์ปฌ๋ ํฐ์ ์ฐ์ ์ฐ์ฐ์ ์ง๊ธ๋ณด๋ค ํจ์จ์ ์ผ๋ก ์ํํ๊ธฐ ์ํ ์๋ธ์ ๊ฐ๋ฐ์ด ์งํ ์ค์ด๋ค. LLJS(Low-Level JavaScript)์ asm.js๊ฐ ๋ํ์ ์ด๋ค. ์ด๋ฌํ ์๋ธ์ ๊ณผ ์ปดํ์ผ๋ฌ๋ C++ ๊ฐ์ ์ธ์ด๋ก ์์ฑ๋ ํ๋ก๊ทธ๋จ์ JavaScript๋ก ์ปดํ์ผ ํด์ ๋๋ฆด ์ ์๊ฒ ํ๋ค. ๋ํ JSIL์ CIL๊ณผ .Net ๊ฐ์๊ธฐ๊ณ๋ฅผ ๋ค์ JavaScript๋ก ์ปดํ์ผํ๋ ํ๋ก์ ํธ๋ค. ์ด๋ฌํ ๋ฐฉ์์ ์ฌ์ฉํ ์๋ก, archive.org์์ ์ ๊ณตํ๋ Classic PC Games Archive๊ฐ ์๋ค. DOSBox, MESS๋ฅผ LLVM/Clang์ผ๋ก ์ปดํ์ผํ์ฌ ์น ๋ธ๋ผ์ฐ์ ์์ ๊ตฌ๋ํ๊ฒ ํ ๊ฒ์ด๋ค. Core i5 ์ ๋์ ์ปดํจํฐ๋ผ๋ฉด ํ๋ ์ด ํ๋ ๋ฐ ๊ฑฐ์ ์ง์ฅ์ด ์๋ ์์ค์ ๋ณด์ฌ์ค๋ค.
- ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐ ํธ๋ ๋๋ฅผ ๋ฐ๋ผ๊ฐ๋ค ๋ณด๋ฉด ํฅ๋ฏธ๋ก์ด ์ฌ์ค์ ๋ฐ๊ฒฌํ ์ ์๋๋ฐ, ์น ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์ธ์ด์ธ JavaScript๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ์์ด ์ ์ฐจํ์์ ๊ฐ์ฒด์งํฅ์ผ๋ก, ๋ค์ ํจ์ํ์ผ๋ก ์ด๋ํ๊ณ ์๋ค๋ ์ฌ์ค์ ๋ฐ๊ฒฌํ ์ ์๋ค. ํ์ฌ๋ ํจ์ํ์์ ๋ ๋ฐ์ ํด ๋ฐ์ํ(Reactive)์ผ๋ก ๊ฐ๊ณ ์๊ณ reactive ๊ตฌํ์ฒด์ธ rxjs๋ ํ์ฌ ํ๋ก ํธ์๋ 3๋์ฅ ํ๋ ์์ํฌ์ธ AngularJS/Angular์ ํ์ ํจํค์ง ์ค ํ๋์ด๋ค. ๋ค๋ฅธ reactive ๊ตฌํ์ฒด๋ก๋ Java์์ ์ฐ์ด๋ rxjava๊ฐ ์๋ค.
- JavaScript๋ ๋ฉํฐํจ๋ฌ๋ค์ ์ธ์ด๋ก, ์ ์ฐจํ, ํจ์ํ, ๋ ผ๋ฆฌํ์ ํฌํจํ ๊ทธ ์ด๋ค ๋ฐฉ์์ผ๋ก๋ ์ฝ๋ฉ์ด ๊ฐ๋ฅํ๋ค. ๋จ, ์ด๊ฑธ JavaScript ํน์์งฑ ๋ง๋ฅ ๋ํ์ ์ข ๊ฒฐ์๋ก ์๊ฐํด์๋ ์ ๋๋ค. ๋์๊ฒ ๋งํ๋ฉด ์กํ์ด๊ธฐ ๋๋ฌธ.
์ ๋ง๋์ฌ์ ํํ๋ ๊ฐ๋ฐ์๊ฐ ํจ๋ฌ๋ค์์ ํฉ๋จ๋ฆฌ์ง ์๊ณ ์ ์ธ ์ ์์ ์ ๋์ ์์ค์ด ๋์ด์ผ ๋ฉํฐ ํจ๋ฌ๋ค์ ์ธ์ด๋ฅผ ์ด์ฉํ ์ํํธ์จ์ด๊ฐ ์กํ์ด ์ ๋๋ค. C++๋ฅผ ์์๋ก ๋ณด๋ฉด ๋๋ฌด ๋ง์ ํจ๋ฌ๋ค์์ ์ง์ํด์ ๋ฐฐ์ฐ๊ธฐ๋ ์ฐ๊ธฐ๋ ์ด๋ ค์ด ์ธ์ด ์ค ํ๋๊ฐ ๋์ด๋ฒ๋ ธ๊ณ , ๊ฒฐ๊ตญ ์ข์ ๊ฐ๋ฐ์๋ฅผ ์ฐพ๊ธฐ๊ฐ ํ๋ ์ํฉ์ด ๋๋ค.๊ทธ๋๋ ์ธ๋งค๋์ง๋ ์ธ์ด๋ฅ์์๋ ๋์ฒด๊ฐ ์๋ ๊ฒ ํจ์ - ์ผ๋ง ์ ๊น์ง๋ง ํด๋ ์ธ์ด๊ฐ ์๋ ๋งคํฌ๋ก๋ก ์ทจ๊ธ๋๋๋ฐ ์ด์ ๋ ๋ ๋ฆฝ์ ์ธ ์ธ์ด๋ก ์ธ์ ๋๊ณ ์๋ ์ด์ ๋, ๋ ์ด์ ๋ธ๋ผ์ฐ์ ์ ํ์ฅ์ด๋ ํ๋ฌ๊ทธ์ธ๋ง์ ์ํ ๊ฒ์ด ์๋, ์๋ฒํ์ธ NodeJS(๊ตฌ๊ธ V8 ์์ง)๋ ์ปดํ์ผํ์ธ JavaScript .Net ๊ฐ์ ๊ฒ๋ค์ ๊ฐ๋ฐ์ ๊ธฐ์ธํ ๊ฒ์ด๋ค. ์๋ง๋ ๋จธ์ง์์ ๋๊ธ๋ผ์ค ํฌ๋ฝํฌ๋(Douglas Crockford)์ ์ฃผ์ฅ๊ณผ ์๊ตฌ๋๋ก ๋ ๋ฆฝ์ ์ธ ์ธ์ด๋ก ์ ์ธ์ด ๋ ์๋ ์์ ๊ฒ์ด๋ค.
- ๋ฅ์ค์ค๋ณด ์ฌ๋ง ์ดํ ์ค๊ตญ์์๋ ๋ฌ๊ธ์์ด ๊ธ์ง์ด๊ฐ ๋์๋ค. ์ถ๋ชจ ๋ถ์๊ธฐ ํ์ฐ ๋ฐฉ์ง๋ฅผ ์ํด RIP๋ฅผ ๊ธ์ง์ด๋ก ์ง์ ํ๋๋ ์ด ์ฒ ์๊ฐ ๋ค์ด๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)๊ฐ ์ผ๋จ๊ฒฐ์ ํผํด๋ฅผ ๋ณธ ๊ฒ(...).
- ์ด์งธ์์ธ์ง await, async, of, let, yield๋ ์์ฝ์ด์ด์ง๋ง ๋ณ์๋ ํจ์๋ช ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. ๊ธฐ์กด์๋ ์ด ๋จ์ด๋ค์ด ์์ฝ์ด๊ฐ ์๋์๊ธฐ์ ์ด ๋จ์ด๋ค์ ๋ณ์๋ช ์ผ๋ก ์ผ๋ ์คํฌ๋ฆฝํธ์ ํธํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด์์ผ ์ ์๋ค.
- ์ด๋ฅผ ํ์ฉํด์ of๋ฅผ ์ดํฐ๋ ์ดํ๋ ๋ฐฐ์ด๋ก ํด๋๊ณ
for(of of arr) { ... }๋for(i of of) { ... }๋ผ๊ณ ์ฐ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. async function async() { ... }๋ผ๋ ์ฝ๋๋ ์ ์ ์๋ํ๋ค. ํ์ง๋งasync function await() { ... }; console.log(await await());๋ผ๊ณ ์ฐ๋ฉด ์ค๋ฅ๊ฐ ๋๋ค. ํ๋ ์ฝ๋ ๊ฐ๋ ์ฑ์ด ๋ฎ์์ง๊ธฐ ๋๋ฌธ์ ์ ์ฐ๋ ๊ฒ์ด ์ข๋ค.- ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฑ๊ธ์ค๋ ๋ ์ด๋ฒคํธ ๋ฃจํ ๊ธฐ๋ฐ์ ์๋ ๋ฐฉ์ ๋๋ฌธ์ธ์ง
setInterval()๋๋setTimeout()ํจ์ ์ฌ์ฉ ์ ์ฝ๊ฐ์ ์ง์ฐ์ด ๋ฐ์ํ๋ค.
10. ์ฐธ๊ณ ํ ๋งํ ๊ณณ[ํธ์ง]
[1] ์ด ๋๋ฌธ์ ๋์ ์ธ ํํ์ด์ง๊ฐ ํ์์๋ค๋ฉด JavaScript๋ ์ ์จ๋ ๋๋ค. ๊ทธ๋ฌ๋ 2016๋
ํ์ฌ ์ฌ๋งํ ํํ์ด์ง์๋ ๋์ ์ธ ์์๊ฐ ๋ค์ด๊ฐ๋ฏ๋ก ๊ฑฐ์ ํ์์ ์ผ๋ก ์ฐ์ด๋ ๊ฒ์ด ํ์ค.
[2] ๋ค๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ ํ ์ค๋ก ๋ถ์ฌ ์ฐ์ง ์๋ ์ด์ ๊ตณ์ด ์ธ๋ฏธ์ฝ๋ก ์ ์ฐ์ง ์์๋ ๋๋๋ฐ, ๊ฐ์ ๊ฐํ์ด ์ธ๋ฏธ์ฝ๋ก ์ญํ ์ ํ๊ธฐ ๋๋ฌธ์ด๋ค.
[3] ์ ํํ๋ ํจ์ํ์ด ์ฃผ๋ก ์ฐ์ด๋ ๋ฉํฐ ํจ๋ฌ๋ค์
[4] ๊ฐ๋ณ ๋ณ์ ์ ์ธ
[5] ๋ถ๋ณ ๋ณ์ ์ ์ธ. ๋ค๋ง ๊ฐ์ฒด๋ ๊ฐ์ฒด ๋ด๋ถ์ ๊ฐ์ ๋ณ๊ฒฝํ ์ ๋ถ๋ณ์ฑ์ด ์ ์ง๋์ง ์๋๋ค. ๊ฐ์ฒด ๊ทธ ์์ฒด์๋ง ๋ถ๋ณ์ฑ์ด ๋ณด์ฅ๋๋ ์
.
[6] ๋น์์ Java๊ฐ ์ ํ์ ํ๊ธฐ ์์ํ๋๊น ์ฌ ๋ง์ดํฌ๋ก์์คํ
์ฆ(์ง๊ธ์ ์ค๋ผํด์ ์ธ์๋จ)์๊ฒ ํธ๋ ์ด๋๋งํฌ ๋ผ์ด์ ์ค๋ฅผ ๋น๋ ค ์๋ค. #
[7] 1990๋
๋ ์ค๋ฐ์ ๋ฐํ๋ ์ธ์ด๊ฐ ์์ฆ ์๋กญ๊ฒ ๋์ค๋ ์ธ์ด๋ค๋ณด๋ค๋ ๋ ํ ์ถ์ํ๋ฅผ ์๋ํ๋ค.
[8] ๊ทธ๋๋ Java๋ฅผ ํ ์ค ์๋ฉด JS๋ฅผ ๋ชฐ๋ผ๋ ๊น ์ ์์๋ค. ์ด๋ฆ์ผ๋ก...
[9] ๊ณผ๊ฑฐ์๋ ๋ธ๋ผ์ฐ์ ์ JS ์์ง์ด ํ์ผ ์์คํ
๊ฐ์ ์์์ ์ ๊ทผํ ์ ์์๋ค.
[10] ๋งํฌ๋ฅผ ๋ณด๋ฉด ์๊ฒ ์ง๋ง ์ด์ฐฝ๊ธฐ ๋ท์ค์ผ์ดํ ์ฌ์ ์ ์ ์จ์ 80%๋ก ์๋์ ์ด์์ผ๋ ์ ์ ์ผ๋ฐฉ์ ์ผ๋ก IE์๊ฒ ๋ฐ๋ฆฌ๋ ๊ฒ์ด ๋ณด์ธ๋ค. ์ฐธ์กฐ.
[11] IE 8 ์ดํ์ ๋ฒ์ ์์๋ JScript๋ง์ ๋ฌธ๋ฒ์ด ๋จ์์์ด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ๋ฌธ์ ๊ฐ ๋น๋ฒํ๊ฒ ์ผ์ด๋ฌ๋ค. ๋ํ์ ์ผ๋ก addEventListener๋ฅผ attachEvent ๊ฐ์ ์์ผ๋ก ๊ตฌํํ๋ ๊ฒ์ด ๊ทธ๋ฌํ๋ค. IE 9๋ถํฐ๋ ECMA ํ์ค์ ๋ฐ๋ฅด๋๋ก ์์ ๋์์ผ๋, ๋ ๊ฑฐ์ ์ง์์ ์ํด ๊ธฐ์กด์ JScript๋ ๋จ๊ฒจ ๋์๋ค. ๊ทธ๋์ JScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ญ์ jscript.dll๊ณผ jscript9.dll์ด ๊ฐ์ด ์กด์ฌํ๋ฉฐ, ๊ธฐ๋ณธ์ JScript๋ ๋ฌธ์ ๋ชจ๋๋ฅผ 8 ์ดํ๋ก ์ค์ ํ ๊ฒฝ์ฐ์ ์ฌ์ฉ๋๋ค.
[12] Paul, Ryan (2008-08-22). "Firefox to get massive JavaScript performance boost". Ars Technica. Retrieved 2013-03-21.
[13] ์ด๋ฐ 3D ๊ฒ์ ๊ฐ์ ๋ถ์ผ์์๋ ๋น ๋ฅธ JavaScript์ WebGL ๋ฑ์ผ๋ก๋ ๋ถ์กฑํด์ ์ด์ ๋ชจ์ง๋ผ์์ asm.js ๊ฐ์ ์๋ธ์
๊น์ง ๋ง๋ค์ด์, ์ฐ์ ์ฐ์ฐ์ด ๊ฑฐ์ ๋ค์ดํฐ๋ธ ์ฝ๋์ ๊ฐ๊น๊ฒ ์คํ๋ ์ ์๋๋ก ๊ทนํ์ ์ต์ ํ๋ฅผ ํ๊ณ ์๋ค.
[14] ๋ค๋ง ๋ํ์์ด๋ผ๋ฉด ํ๊ต ์ด๋ฉ์ผ์ ํตํด ๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์๋ค. ๊ต์ฅํ ์ ์ฉํ๋ฏ๋ก ๋ํ์์ด๋ผ๋ฉด ๋์น์ง ๋ง์.
[15] ์ฌ๋ฏธ์๋ ์ ์ ์ด ์ธ ์๋ํฐ๋ ๋ด๋ถ์ ์ผ๋ก JavaScript๋ฅผ ์ด๋ค๋ ๊ฒ์ด๋ค! ์ ํํ๋ Node.js์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ElectronJS๋ก ๋ง๋ ๊ฒ์ด๋ค.
[16] ํนํ arrow syntax์ ๋ฑ์ฅ์ผ๋ก ์ด ๊ธฐ๋ฅ์ ๋๋์ฑ ๊ฐํด์ก๋ค.
[17] ์ฝํ์
์ธ์ด๋ผ๋ ์ฝ์ ์ ๊ทน๋ณตํ๊ธฐ ์ํด์ JavaScript ์ํผ์
์ธ์ด์ธ TypeScript๋ผ๋ ๊ฒ๋ ๋์์ผ๋ฉฐ ์ค์ ๋ก ์์ JavaScript์ ๋๋ถ์ด ๋ง์ด ์ฐ์ด๊ณ ์๋ค.
[18] JavaScript Object Notation, ์ฆ JavaScript ๊ฐ์ฒด ํ๊ธฐ๋ฒ์ผ๋ก ์ค๋๋ AJAX์ XML ๋์ ์ฐ์ด๊ณ ์๋ค. ๊ทธ๋์ AJAJ๋ผ๊ณ ๋ถ๋ ค์ผ ๋๋ค๋ ์ฌ๋๋ค์ด ์์ ์ ๋.
[19] ๋ฌผ๋ก ์ ์ฐจ์ ํ๋ก๊ทธ๋๋ฐ์ ์ต์ํ ์ฌ๋ ๊ธฐ์ค์์๋ค.
[21] ๋ฐ๋๋ก JavaScript ์ปค๋ฎค๋ํฐ์์๋ ์ฑ๊ธ์ค๋ ๋์ ์ปจํฐ๋ด์์ด์
์ ๋จ์ํ๊ณ ํฌ๋ช
ํ ์๋ ๋ชจ๋ธ์ด ์คํ๋ ค ํ๋ก๊ทธ๋จ์ ๋ ์ข๊ฒ ๋ง๋ ๋ค๋ ์๊ฒฌ๋ ์๋ค.
[22] ์์ ํ ๋์ ์คํ์ ์๋๋ฉฐ, ๊ทธ ์ค ํ๋๋ผ๋ ๊ฑฐ๋ถ(rejected)๋๋ฉด ๊ทธ Promise์ ์ค๋ฅ๊ฐ ๋ Promise ๋ณ๋ก ์ค๋ฅ๋ฅผ ํ์ธํ๊ณ ์ถ๋ค๋ฉด Promise.allSettled๋ฅผ ์จ์ผํ๋ค. ํ์ด์ฌ์ asyncio.gather์ ๋น์ทํ๋ค.
[23] Document Object Model
[24] ๋ณธ๋ ์ด๋ฆ์ ServerJS์๋ค.
[25] ์๋ฐ๋ ๊ฐ์ฒด ์งํฅ, ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด ๊ธฐ๋ฐ ์ธ์ด์ด๋ค.