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

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

728x90
๐Ÿ‘ฉ‍๐Ÿ’ป Java ๊ฐœ๋ฐœ์ž์˜ JavaScript ๊ณต๋ถ€ ๊ธฐ๋ก

JavaScript๋ฅผ ์ฒ˜์Œ ๊ณต๋ถ€ํ•˜๋Š” ์ž…์žฅ์—์„œ
Java ์–ธ์–ด์™€ ๋น„๊ตํ•˜์—ฌ ๋‹ค๋ฅธ ์ ์ด๋‚˜, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉฐ ์ƒˆ๋กญ๊ฒŒ ์•Œ๊ฒŒ ๋œ ๋‚ด์šฉ์„ ์œ„์ฃผ๋กœ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“‘ 2.1 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํƒ„์ƒ

1995๋…„, ์•ฝ 90%์˜ ์‹œ์žฅ ์ ์œ ์œจ๋กœ ์›น๋ธŒ๋ผ์šฐ์ € ์‹œ์žฅ์„ ์ง€๋ฐฐํ•˜๊ณ  ์žˆ๋˜ ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ๋Š”

์›นํŽ˜์ด์ง€์˜ ๋ณด์กฐ์ ์ธ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ฒฝ๋Ÿ‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋„์ž…ํ–ˆ๋‹ค.

 

๐Ÿ“‘ 2.2 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ํ™”

1996๋…„, ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŒŒ์ƒ ๋ฒ„์ „์ธ "JScript"๋ฅผ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ 3.0์— ํƒ‘์žฌํ–ˆ๊ณ ,

JScript์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ‘œ์ค€ํ™”๋˜์ง€ ๋ชปํ•˜๊ณ  ์„œ๋กœ ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์˜ ์‹œ์žฅ ์ ์œ ์œจ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ๋™์ž‘ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฒฝ์Ÿ์ ์œผ๋กœ ์ถ”๊ฐ€ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

์ด๋กœ ์ธํ•ด ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ ์›นํŽ˜์ด์ง€๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

 

์ด์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŒŒํŽธํ™”๋ฅผ ๋ฐฉ์ง€ํ•˜๊ณ  ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•˜๋Š” ํ‘œ์ค€ํ™”๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•„์š”์„ฑ์ด ๋Œ€๋‘๋˜๋ฉฐ, ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ๋Š” ์ปดํ“จํ„ฐ ์‹œ์Šคํ…œ์˜ ํ‘œ์ค€์„ ๊ด€๋ฆฌํ•˜๋Š” ๋น„์˜๋ฆฌ ํ‘œ์ค€ํ™” ๊ธฐ๊ตฌ์ธ ECMA ์ธํ„ฐ๋‚ด์…”๋„์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ํ™”๋ฅผ ์š”์ฒญํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  1997๋…„ ECMA-262๋ผ ๋ถˆ๋ฆฌ๋Š” ํ‘œ์ค€ํ™”๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆํŒ ์‚ฌ์–‘์ด ์™„์„ฑ๋˜์—ˆ๋‹ค.

 

๐Ÿ“‘ 2.3 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ์žฅ์˜ ์—ญ์‚ฌ

๐Ÿ‘‰ 2.3.1 Ajax

1999๋…„, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ†ต์‹  ๊ธฐ๋Šฅ์ธ Ajax(Asynchronous JavaScript and XML)๊ฐ€ XMLHttpRequest๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๋“ฑ์žฅํ–ˆ๋‹ค.

 

Ajax์˜ ๋“ฑ์žฅ์œผ๋กœ ์›นํŽ˜์ด์ง€์—์„œ ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†๋Š” ๋ถ€๋ถ„์€ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜์ง€ ์•Š๊ณ ,

์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์ „์†ก๋ฐ›์•„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ํ•œ์ •์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ์‹์ด ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.

→ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์œ ์‚ฌํ•œ ๋น ๋ฅธ ์„ฑ๋Šฅ๊ณผ ๋ถ€๋“œ๋Ÿฌ์šด ํ™”๋ฉด ์ „ํ™˜์ด ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.

๐Ÿ‘‰ 2.3.2 jQuery

2006๋…„, jQuery์˜ ๋“ฑ์žฅ์œผ๋กœ DOM์„ ๋”์šฑ ์‰ฝ๊ฒŒ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๊ณ  ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ๋„ ์–ด๋Š ์ •๋„ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.

์ด๋กœ ์ธํ•ด ๋ฐฐ์šฐ๊ธฐ๊ฐ€ ๋‹ค์†Œ ๊นŒ๋‹ค๋กœ์šด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ณด๋‹ค ๋ฐฐ์šฐ๊ธฐ ์‰ฝ๊ณ  ์ง๊ด€์ ์ธ jQuery๋ฅผ ๋” ์„ ํ˜ธํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์–‘์‚ฐ๋˜๊ธฐ๋„ ํ–ˆ๋‹ค.

๐Ÿ‘‰ 2.3.3 V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„

V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๋“ฑ์žฅ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์œ ์‚ฌํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX: user experience)์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ์ •์ฐฉํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

 

V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์œผ๋กœ ์ด‰๋ฐœ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐœ์ „์œผ๋กœ,

๊ณผ๊ฑฐ ์›น ์„œ๋ฒ„์—์„œ ์ˆ˜ํ–‰๋˜๋˜ ๋กœ์ง๋“ค์ด ๋Œ€๊ฑฐ ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ €)๋กœ ์ด๋™ํ–ˆ๊ณ , ์ด๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ ํ”„๋ŸฐํŠธ์—”๋“œ ์˜์—ญ์ด ์ฃผ๋ชฉ๋ฐ›๋Š” ๊ณ„๊ธฐ๋กœ ์ž‘์šฉํ–ˆ๋‹ค.

๐Ÿ‘‰ 2.3.4 Node.js

Node.js๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์—์„œ๋งŒ ๋™์ž‘ํ•˜๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ธŒ๋ผ์šฐ์ € ์ด์™ธ์˜ ํ™˜๊ฒฝ์—์„œ๋„ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋…๋ฆฝ์‹œํ‚จ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ์ด๋‹ค.

 

Node.js๋Š” ๋น„๋™๊ธฐ I/O๋ฅผ ์ง€์›ํ•˜๋ฉฐ ๋‹จ์ผ ์Šค๋ ˆ๋“œ ์ด๋ฒคํŠธ ๋ฃจํ”„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘ํ•จ์œผ๋กœ์จ ์š”์ฒญ ์ฒ˜๋ฆฌ ์„ฑ๋Šฅ์ด ์ข‹๋‹ค.

๋”ฐ๋ผ์„œ Node.js๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด I/O๊ฐ€ ๋นˆ๋ฒˆํ•˜๊ฒŒ ๋ฐœ์ƒํ•˜๋Š” SPA์— ์ ํ•ฉํ•˜๋‹ค.

ํ•˜์ง€๋งŒ CPU ์‚ฌ์šฉ๋ฅ ์ด ๋†’์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—๋Š” ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค.

 

Node.js์˜ ๋“ฑ์žฅ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋ฒ—์–ด๋‚˜ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์šฉ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ๋˜์—ˆ๋‹ค.

์ด์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ์„ ์œ„ํ•œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์–ธ์–ด๋กœ ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ๋‹ค.

 

๐Ÿ“‘ 2.4 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ECMAScript

ECMAScript๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ๊ฐ’, ํƒ€์ž…, ๊ฐ์ฒด์™€ ํ”„๋กœํผํ‹ฐ, ํ•จ์ˆ˜, ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด ๋“ฑ ํ•ต์‹ฌ ๋ฌธ๋ฒ•์„ ๊ทœ์ •ํ•œ๋‹ค.

๊ฐ ๋ธŒ๋ผ์šฐ์ € ์ œ์กฐ์‚ฌ๋Š” ECMAScript ์‚ฌ์–‘์„ ์ค€์ˆ˜ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๊ตฌํ˜„ํ•œ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ์„œ ๊ธฐ๋ณธ ๋ผˆ๋Œ€๋ฅผ ์ด๋ฃจ๋Š” ECMAScript์™€

๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณ„๋„ ์ง€์›ํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ Web API(DOM, XMLHttpRequest, fetch ๋“ฑ)๋ฅผ ์•„์šฐ๋ฅด๋Š” ๊ฐœ๋…์ด๋‹ค.

 

๐Ÿ“‘ 2.5 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์ง•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML, CSS์™€ ํ•จ๊ป˜ ์›น์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ ์ค‘ ํ•˜๋‚˜๋กœ

์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ์œ ์ผํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ณ„๋„์˜ ์ปดํŒŒ์ผ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š” ์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด๋‹ค.

๋Œ€๋ถ€๋ถ„์˜ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์ธํ„ฐํ”„๋ฆฌํ„ฐ์™€ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์žฅ์ ์„ ๊ฒฐํ•ฉํ•ด ๋น„๊ต์  ์ฒ˜๋ฆฌ ์†๋„๊ฐ€ ๋Š๋ฆฐ ์ธํ„ฐํ”„๋ฆฌํ„ฐ์˜ ๋‹จ์ ์„ ํ•ด๊ฒฐํ–ˆ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ•๋ ฅํ•œ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋Šฅ๋ ฅ์„ ์ง€๋‹ˆ๊ณ  ์žˆ๋‹ค.

๊ฐ„ํ˜น ํด๋ž˜์Šค(ES6์—์„œ ๋„์ž…๋จ), ์ƒ์†, ์ •๋ณด ์€๋‹‰์„ ์œ„ํ•œ ํ‚ค์›Œ๋“œ๊ฐ€ ์—†์–ด์„œ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋ผ๊ณ  ์˜คํ•ดํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ์ง€๋งŒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋ณด๋‹ค ํšจ์œจ์ ์ด๋ฉด์„œ ๊ฐ•๋ ฅํ•œ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜์˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋‹ค.

 

๐Ÿ“‘ 2.6 ES6 ๋ธŒ๋ผ์šฐ์ € ์ง€์› ํ˜„ํ™ฉ

์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋˜ ๋ธŒ๋ผ์šฐ์ €์˜ ES6 ์ง€์› ๋น„์œจ์€ 96~99%๋กœ ๊ฑฐ์˜ 100%์— ์œก๋ฐ•ํ•˜์ง€๋งŒ

์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋‚˜ ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €๋Š” ES6์„ ๋Œ€๋ถ€๋ถ„ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค.

 

๋ธŒ๋ผ์šฐ์ €์—์„œ ์•„์ง ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ตœ์‹  ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋‚˜ ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ณ ๋ คํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด๋ผ๋ฉด

๋ฐ”๋ฒจ๊ณผ ๊ฐ™์€ ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•ด ES6 ์ด์ƒ์˜ ์‚ฌ์–‘์œผ๋กœ ๊ตฌํ˜„ํ•œ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ES5 ์ดํ•˜์˜ ์‚ฌ์–‘์œผ๋กœ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

728x90