-
[MJDD] 2์ฅ ์๋ฐ์คํฌ๋ฆฝํธ๋?Language/JavaScript 2024. 11. 28. 16:57728x90
๐จ ์ด ๊ธ์ '๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive (์ด์ ๋ชจ ์ )'๋ฅผ ์ฝ๊ณ , ์ ๋ฆฌํ ๊ธ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋?
2.1 ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์
1995๋ ๋น์ ์น๋ธ๋ผ์ฐ์ ๋ฅผ ์ง๋ฐฐํ๋ ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ(Netscape ommunications)๊ฐ ์นํ์ด์ง์ ๋ณด์กฐ์ ์ธ ๊ธฐ๋ฅ์ ์ํํ๊ธฐ ์ํด ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ๊ฒฝ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ๋์ ํ๋ค.
์ด๊ฒ์ด ๋ธ๋๋ ์์ดํฌ(Brandan Eich)๊ฐ ๊ฐ๋ฐํ ์๋ฐ์คํฌ๋ฆฝํธ์ด๋ค.1996๋ 3์ "Mocha"๋ก ๋ท์ค์ผ์ดํ์ ๋ค๋น๊ฒ์ดํฐ2์ ํ์ฌ๋๊ณ , 9์ "LiveScript"๋ก ๋ช ๋ช ๋์๋ค๊ฐ ๋ค์ ๋น์ ์ ํํ๋ Java์ ํธ์นํ๊ณ ์ "JavaScript"๋ก ์ต์ข ๋ช ๋ช ๋์๋ค.
2.2 ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ
๊ทธ๋ฌ๋ค 1996๋ 8์์ "๋" ๋ง์ดํฌ๋ก์ํํธ ์ฌ๊ป์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ ๋ฒ์ ์ธ "JScript"๋ฅผ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์ ํ์ฌํ๋ค.
๋ฌธ์ ๋ ์ด JScript์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํธํ์ฑ์ด ๋จ์ด์ง๋ค๋ ๊ฒ์ด์๋ค.๋ ํ์ฌ๋ ๋ธ๋ผ์ฐ์ ์ ์ ์ ์จ์ ๋์ด๊ธฐ ์ํด ๊ฒฝ์์ ์ผ๋ก ๊ธฐ๋ฅ์ ๊ฐ ์ธ์ด์ ์ถ๊ฐํ๋ค. ์ด๋ฌํ ๊ฒฝ์ํ ์ฌํด์ง๋ฉด์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๊ฐ ๋ฐ์ํ๊ธฐ ์์ํ๊ณ , ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์ ์ ์์ ์ผ๋ก ํ ์ฝ๋๋ก ๋์ํ๋ ์นํ์ด์ง๋ฅผ ๊ฐ๋ฐํ๊ธฐ ์ด๋ ค์ ๊ฐ๊ฐ์ ๋์๋ ์ธ์ด๋ก ์ง์ผ๋ง ํ๋ค.
๋ฐ๋ผ์ 1996๋ 11์ ๋ท์ค์ผ์ดํ๋ ์ปดํจํฐ ์์คํ ํ์ค์ ๊ด๋ฆฌํ๋ ๋น์๋ฆฌํ์คํ ๊ธฐ๊ตฌ์ธ ECMA ์ธํฐ๋ค์ ๋์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ๋ฅผ ์์ฒญํ๋ค.
1997๋ 7์ ECMA-262๋ผ๋ ํ์คํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ดํ(ECMAScript 1)์ด ์์ฑ๋์๋ค.
์ํ๊ถ ๋ฌธ์ ๋ก ์ธํด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ECMAScript๋ก ๋ช ๋ช ๋์๋ค.์ดํ 1999๋ ECMAScript 3(ES3)์ด ๊ณต๊ฐ๋๊ณ , 10๋ ๋ง์ธ 2009๋ ์ ์ถ์๋ ECMAScript(ES5)๋ HTML5์ ํจ๊ป ์ถํํ ํ์ค ์ฌ์์ด๋ค.
2015๋ ์ ๊ณต๊ฐ๋ ECMAScript 6(ECMAScript 2015, 2016)๋
let
/const
, ํ์ดํ ํจ์, ํด๋์ค, ๋ชจ๋ ๋ฑ๊ณผ ๊ฐ์ด ๋ฒ์ฉ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก์ ๊ฐ์ถฐ์ผ ํ ๊ธฐ๋ฅ๋ค์ ๋๊ฑฐ ๋์ ํ๋ ํฐ ๋ณํ์๋ค.2.3 ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ์ฅ์ ์ญ์ฌ
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ง ๋ฑ์ฅํ์ ์์ ์๋ ๋๋ถ๋ถ์ ๋ก์ง์ด ์น์๋ฒ์์ ์คํ๋์๊ณ , ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ๋ก๋ถํฐ ์ ๋ฌ๋ฐ์ HTML๊ณผ CSS๋ฅผ ๋จ์ํ ๋ ๋๋งํ๋ ์์ค์ด์๋ค.
๊ทธ๋ ๋ค๋ฉด ๊ณผ๊ฑฐ์๋ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ด ์ฃผ์๋ ๊ฒ์ผ๊น?
2.3.1 Ajax
1999๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด์ ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋น๋๊ธฐ(asynchronous)๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ ํต์ ๊ธฐ๋ฅ์ธ Ajax(Asynchronous JavaScript and XML)๊ฐ
XMLHttpRequest
๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฑ์ฅํ๋ค.[!NOTE]
๐ก ๋น๋๊ธฐ(asynchronous) ๋ฐฉ์์ ํต์ ์ด๋?
๋น๋๊ธฐ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ด๋ค. ์ด๋ ์์ฒญ์ ๋ณด๋ธ ํ ๊ฒฐ๊ณผ๊ฐ ๋์ฐฉํ ๋๊น์ง ์ฝ๋ ์คํ์ด ๋ฉ์ถ์ง ์๊ณ , ๋ค๋ฅธ ์์ ์ ๊ณ์ ์ํํ ์ ์๋๋ก ํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์async
๋ ์์ฒญ๊ณผ ์๋ต์ด ์๋ฃ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ค์ ์ฝ๋๋ฅผ ์คํํ๋ค. ์๋ต์ด ์ค๋น๋๋ฉด ์ฝ๋ฐฑ ํจ์๋ Promise๋ฅผ ํตํด ๊ฒฐ๊ณผ๋ฅผ ์ฒ๋ฆฌํ๋ค.์ด์ ์ ์นํ์ด์ง๋
html
ํ๊ทธ๋ก ์์ํด์html
ํ๊ทธ๋ก ๋๋๋ ์์ ํ ์ฝ๋๋ฅผ ์๋ฒ๋ก๋ถํฐ ์ ์ก๋ฐ์์ ๋ณ๊ฒฝ์ฌํ์ด ์๋ค๋ฉด ์น ํ์ด์ง ์ ์ฒด๋ฅผ ๋ ๋๋ง ํ๋ ๋ฐฉ์์ผ๋ก ๋์ํ์๋ค. ์ด๋ ๋ถํ์ํ ๋ฐ์ดํฐ ํต์ ๋ ๋ฐ์ํ๊ณ ๋ฐ๋ ๋ถ๋ถ ๋ฟ๋ง ์๋๋ผ ์ ์ฒด ํ์ด์ง๋ฅผ ๋ ๋๋งํด์ผ ํ๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ ๋ฉด์์๋ ๋ถ๋ฆฌํ๋ค.ํ์ง๋ง Ajax์ ๋ฑ์ฅ์ผ๋ก ๋ถ๋ถ์ ์ธ ๋ ๋๋ง์ด ๊ฐ๋ฅํด์ง๋ฉด์, ์น ๋ธ๋ผ์ฐ์ ์์๋ ๋ฐ์คํฌํฑ ์ดํ๋ฆฌ์ผ์ด์ ๊ณผ ๊ฐ์ด ๋น ๋ฅด๊ณ ๋ถ๋๋ฌ์ด ์ฑ๋ฅ์ ๋ณด์ด๊ฒ ๋์๋ค.
2005๋ ๊ตฌ๊ธ์ด ๋ฐํํ Google Maps๊ฐ ๊ทธ ์์๋ค.
2.3.2 JQuery
2006๋ , JQuery์ ๋ฑ์ฅ์ผ๋ก ๋ฒ๊ฑฐ๋ก์ ๋ DOM(Document Object Model) ์ ๋์ฑ ์ฝ๊ฒ ์ ์ดํ ์ ์๊ฒ ๋์๊ณ , ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๋ ํด๊ฒฐ๋์๋ค.
2.3.3 V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง
2008๋ ๊ตฌ๊ธ์ V8์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ฐํํ์๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ค๋ ์ฆ๊ฐํ ์์๋ฅผ ๋ง์กฑ์ํฌ ์ ์์๋ค.
V8์ ๋ฑ์ฅ์ผ๋ก ์น ์๋ฒ์์ ์ํ๋๋ ๋ก์ง๋ค์ด ๋๊ฑฐ ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ )๋ก ์ด๋ํ๊ณ ์น ํ๋ก ํธ์๋ ์์ญ์ด ์ฃผ๋ชฉ๋ฐ๋ ๊ณ๊ธฐ๊ฐ ๋์๋ค.SSR๊ณผ CSR์ ๋ํด์ ๋ ์์ธํ ์ ๋ฆฌํด๋ณด์.
2.3.4 Node.js
2009๋ , ๋ผ์ด์ธ ๋ฌ(Ryan Dahl)์ด ๋ฐํํ Node.js๋ ๊ตฌ๊ธ์ V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ๋ง๋ค์ด์ง, ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ (Runtime environment) ์ด๋ค.
Node.js๋ ๋ธ๋ผ์ฐ์ ์ด์ธ์ ํ๊ฒฝ์์๋ JS๊ฐ ๋์ํ ์ ์๋๋ก ๋ ๋ฆฝ์ํจ ์คํ ํ๊ฒฝ์ด๋ค.
๋น๋๊ธฐI/O๋ฅผ ์ง์ํ๊ณ , ๋จ์ผ์ค๋ ๋(Single Thread) ์ด๋ฒคํธ ๋ฃจํ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ์ฌ ์์ฒญ์ฒ๋ฆฌ ์ฑ๋ฅ์ด ์ข๋ค.
๋ฐ๋ผ์ ๋ฐ์ดํฐ๋ฅผ ์ค์๊ฐ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด I/O๊ฐ ๋น๋ฒํ๊ฒ ๋ฐ์ํ๋ SPA(Single Page Application) ์ ์ ํฉํ์ง๋ง, CPU ์ฌ์ฉ๋ฅ ์ด ๋์ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ถ์ฅํ์ง ์๋๋ค.๋น๋๊ธฐI/O, ๋จ์ผ์ค๋ ๋ ์ด๋ฒคํธ ๋ฃจํ, SPA์ ๋ํ์ฌ ๋์ค์ ๋ ์์ธํ ์์๋ณด์
์ด Node.js์ ๋ฑ์ฅ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ฒ์ด๋ ์๋ฒ ์ฌ์ด๋ ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์๋ ์ฌ์ฉํ ์ ์๋ ๋ฒ์ฉ ์ธ์ด๊ฐ ๋์๋ค.
2.3.5 SPA ํ๋ ์์ํฌ
๊ฐ๋ฐ ๊ท๋ชจ์ ๋ณต์ก๋๊ฐ ์์นํ๋ฉด์, ์ด์ ์ ๊ฐ๋ฐ ๋ฐฉ์๋ค๋ง์ผ๋ก๋ ๋ถ์กฑํ๊ณ ์ด์ ๋ค์ํ ๋ผ๋ฆฌ๋ธ๋ฌ๋ฆฌ๋ค๊ณผ ํ๋ ์์ํฌ๋ค์ด ๋ฑ์ฅํ๋ค.
CBD(Component Based Development) ๋ฐฉ๋ฒ๋ก ์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ SPA๊ฐ ๋์คํ ๋๋ฉด์ ๋ค์ํ SPA ํ๋ ์์ํฌ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ์ฌ์ฉ๋๊ณ ์๋ค.CBD ๋ฐฉ๋ฒ๋ก ์ ๋ํ์ฌ ๋์ค์ ๋ ์์ธํ ์์๋ณด์
2.4 ์๋ฐ์คํฌ๋ฆฝํธ์ ECMAScript
ECMAScript๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ค ์ฌ์์ธ ECMA-262๋ฅผ ๋งํ๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ํ๋ฐฉํ๋ ๊ฐ, ํ์ , ๊ฐ์ฒด์ ํ๋กํผํฐ, ํจ์, ํ์ค ๋นํธ์ธ ๊ฐ์ฒด ๋ฑ์ ํต์ฌ ๋ฌธ๋ฒ์ผ๋ก ๊ท์ ํ๋ค.
์ฐ๋ฆฌ๊ฐ ํํ ์ผ์ปซ๋ JavaScript๋ผ๋ ๊ฒ์ ์ด ECMAScript์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์ Web API๊ฐ ํฉ์ณ์ง, ์ด ๋์ ์์ฐ๋ฅด๋ ๊ฐ๋ ์ด๋ผ๊ณ ๋ณผ ์ ์๋ค.
- DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker
๋ฑ์ด Web API์ ์ผ๋ถ์ด๋ค.
์ด ํด๋ผ์ด์ธํธ ์ฌ์ด๋์ Web API๋ ECMAScript์๋ ๋ณ๊ฐ๋ก ๊ด๋ฆฌ๋๊ณ ์๋ค.
2.5 ์๋ฐ์คํฌ๋ฆฝํธ์ ํน์ง
์๋ฐ์คํฌ๋ฆฝํธ๋ ์น ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ ์ผํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ด๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ์ C, ์๋ฐ์ ์ ์ฌํ๊ณ ,
Self
๋ ํ๋กํ ํ์ ๊ธฐ๋ฐ ์์์,Scheme
์์๋ ์ผ๊ธ ํจ์์ ๊ฐ๋ ์ ์ฐจ์ฉํ๋ค.์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ๋ฐ์๊ฐ ๋ณ๋์ ์ปดํ์ผ ์์ ์ ์ํํ์ง ์๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด์ด๋ค.
๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์ ํต์ ์ธ ์ปดํ์ผ๋ฌ ์ธ์ด์ฒ๋ผ ๋ช ์์ ์ธ ์ปดํ์ผ ๋จ๊ณ๋ฅผ ๊ฑฐ์น์ง๋ ์์ง๋ง ๋ณต์กํ ๊ณผ์ ์ ๊ฑฐ์ณ ์ผ๋ถ ์์ค์ฝ๋๋ฅผ ์ปดํ์ผํ๊ณ ์คํํ๋ ๋ฐฉ์์ผ๋ก ๋น๊ต์ ์ฒ๋ฆฌ ์๋๊ฐ ๋๋ฆฐ ์ธํฐํ๋ฆฌํฐ ์ธ์ด์ ๋จ์ ์ ํด๊ฒฐํ๋ค๊ณ ํ๋ค.ํ ์ค๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ค๋ช ํ์๋ฉด, ๋ช ๋ นํ, ํจ์ํ, ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํ๋ ๋ฉํฐ ํจ๋ฌ๋ค์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ด๋ค.
๊ฐ์ฒด์งํฅ ์ธ์ด์์ ์ค์ํ ํด๋์ค, ์์, ์ ๋ณด ์๋์ ์ํ ํค์๋๊ฐ ์์ด์ ๊ฐ์ฒด์งํฅ ์ธ์ด๊ฐ ์๋๋ผ๊ณ ์คํด๋ฐ์ง๋ง ์ค์ ๋ก๋ ํด๋์ค ๊ธฐ๋ฐ์ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ณด๋ค ํจ์จ์ ์ด๊ณ ๊ฐ๋ ฅํ ํ๋กํ ํ์ ๊ธฐ๋ฐ์ ๊ฐ์ฒด์งํฅ ์ธ์ด์ด๋ค.
์ธํฐํ๋ฆฌํฐ ์ธ์ด, ์ปดํ์ผ ์ธ์ด์ ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ๋ฑ์ ๋ํด์๋ ๋์ค์ ๋ ์์ธํ ์์๋ณด์
2.6 ES6 ์ง์ํํฉ
IE๋ฅผ ์ ์ธํ ๋๋ถ๋ถ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๋ ES6๋ฅผ ์ง์ํ์ง๋ง 100%๋ ์๋๋ค.
Node๋ v4๋ถํฐ ์ง์ํ๊ธฐ ์์ํ๋ค.ES5๋ก์ ๋ค์ด๊ทธ๋ ์ด๋๊ฐ ํ์ํ๋ค๋ฉด Babel๊ณผ ๊ฐ์ ํธ๋์คํ์ผ๋ฌ๋ฅผ ์ด์ฉํ๋ฉด ๋๋ค.
๋ ์์๋ณผ๋งํ ๊ฒ
- ๋น๋๊ธฐ ํต์ ๊ณผ ๋๊ธฐ ํต์
https://yozm.wishket.com/magazine/detail/1982/ - SSR๊ณผ CSR
- ๋น๋๊ธฐ I/O
- ๋จ์ผ์ค๋ ๋ ์ด๋ฒคํธ ๋ฃจํ
- SPA
- CBD
- ์ปดํ์ผ / ์ธํฐํ๋ฆฌํฐ ์ธ์ด
- ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ถ๋ฅ(ํจ์ํ, ๋ช ๋ นํ ๋ฑ)
- ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ
'Language > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[MIFB_22] Javascript ๋ฐฐ์ด ํ์ฉ์์ (0) 2024.12.10 [MJDD] 3์ฅ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ์คํ ๋ฐฉ๋ฒ (1) 2024.12.05 [MJDD] 1์ฅ ํ๋ก๊ทธ๋๋ฐ (0) 2024.11.28 [MJDD] ๋ค์ด๊ฐ๋ฉฐ (0) 2024.11.26 [JavaScript] ์ค์ฝํ (0) 2024.11.24 - DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker