๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ชฉ๋ก์ด ์—†์Šต๋‹ˆ๋‹ค.

[๋ชจ๋˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] 2์žฅ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

๐Ÿ“– ์ „๊ณต๊ณต๋ถ€/๋ชจ๋˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive

    ์ถœ์ฒ˜ : yes24

     

    ์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์ „๋ฐ˜์ ์ธ ์—ญ์‚ฌ์™€ ๊ธฐ๋ณธ ๊ฐœ๋…์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด์—์š”.

     

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ

    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