๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive ๋์์ 1์ฅ ํ๋ก๊ทธ๋๋ฐ, 2์ฅ ์๋ฐ์คํฌ๋ฆฝํธ๋? 3์ฅ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ์คํ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํ์์ต๋๋ค.
ํ๋ก๊ทธ๋๋ฐ์ด๋ ์ปดํจํฐ์๊ฒ ์คํ์ ์๊ตฌํ๋ ์ผ์ข ์ ์ปค๋ฎค๋์ผ์ด์ ์ด๋ค. ํ๋ก๊ทธ๋๋ฐ์ ์์ ํด๊ฒฐํด์ผ ํ ๋ฌธ์ ๋ฅผ ๋ช ํํ ์ดํดํ ํ ์ ์ ํ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ์์ ์ ์ํ ํ์๊ฐ ์๋ค.
๊ธฐ๊ณ์ด๋ก ์ง์ ๋ช ๋ น์ ์ ๋ฌํ๋ ๊ฒ์ ๋์ ํ ๊ฐ์ฅ ์ ์ฉํ ๋์์ ์ฌ๋์ด ์ดํดํ ์ ์๋ ์ฝ์๋ ๊ตฌ๋ฌธ์ผ๋ก ๊ตฌ์ฑ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ์ฌ์ฉํด ํ๋ก๊ทธ๋จ์ ์์ฑํ ํ, ๊ทธ๊ฒ์ ์ปดํจํฐ๊ฐ ์ดํดํ ์ ์๋ ๊ธฐ๊ณ์ด๋ก ๋ณํํ๋ ์ผ์ข ์ ๋ฒ์ญ๊ธฐ๋ฅผ ์ด์ฉํ๋ ๊ฒ์ด๋ค. ์ด ์ผ์ข ์ ๋ฒ์ญ๊ธฐ๋ฅผ ์ปดํ์ผ๋ฌ ํน์ ์ธํฐํ๋ฆฌํฐ๋ผ๊ณ ํ๋ค.
๋ฌธ๋ฒ์ ๋ง๋ ๋ฌธ์ฅ์ ๊ตฌ์ฑํ๋ ๊ฒ์ ๋ฌผ๋ก ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์์ด์ผ ์ธ์ด์ ์ญํ ์ ์ถฉ์คํ ์ํํ ์ ์๋ค.
๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ์ ํตํด ๋ง๋ค์ด๋ธ ํด๊ฒฐ ๋ฐฉ์์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ฌธ๋ฒ์ ์ฌ์ฉํด ํํํ๋ค. ์ฆ, ์์ฑ๋ ์ฝ๋๋ ํด๊ฒฐ ๋ฐฉ์์ ๊ตฌ์ฒด์ ๊ตฌํ๋ฌผ์ด๋ค.
๊ฒฐ๊ตญ ํ๋ก๊ทธ๋๋ฐ์ ์๊ตฌ์ฌํญ์ ์งํฉ์ ๋ถ์ํด์ ์ ์ ํ ์๋ฃ๊ตฌ์กฐ์ ํจ์์ ์งํฉ์ผ๋ก ๋ณํํ ํ, ๊ทธ ํ๋ฆ์ ์ ์ดํ๋ ๊ฒ์ด๋ค.
1995๋
, ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์
์ฆ๋ ์นํ์ด์ง์ ๋ณด์กฐ์ ์ธ ๊ธฐ๋ฅ์ ์ํํ๊ธฐ ์ํด ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ๊ฒฝ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ๋์
ํ๊ธฐ๋ก ๊ฒฐ์ ํ๋ค.
๊ทธ๋์ ํ์ํ ๊ฒ์ด ๋ฐ๋ก ๋ธ๋ ๋ ์์ดํฌ๊ฐ ๊ฐ๋ฐํ ์๋ฐ์คํฌ๋ฆฝํธ๋ค.
1996๋
8์, ๋ง์ดํฌ๋ก์ํํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ ๋ฒ์ ์ธ JScript๋ฅผ ์ธํฐ๋ท ์ต์คํ๋ก์ด 3.0์ ํ์ฌํ๋ค. JScript์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ํ์คํ๋์ง ๋ชปํ๊ณ ์ ๋นํ ํธํ๋์๋ค๋ ๊ฒ์ด๋ค.
์ฆ, ๊ฐ ํ์ฌ๋ ์์ฌ ๋ธ๋ผ์ฐ์ ์ ์์ฅ ์ ์ ์จ์ ๋์ด๊ธฐ ์ํด ์์ฌ ๋ธ๋ผ์ฐ์ ์์๋ง ๋์ํ๋ ๊ธฐ๋ฅ์ ๊ฒฝ์์ ์ผ๋ก ์ถ๊ฐํ๊ธฐ ์์ํ๋ค.
์ด๋ก ์ธํด ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๊ฐ ๋ฐ์ํ๊ธฐ ์์ํ๋ค.
*ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง? ์น ํ์ด์ง ์ ์ ์์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๊นจ์ง์ง ์๊ณ ์๋ํ ๋๋ก ์ฌ๋ฐ๋ฅด๊ฒ ๋์ค๊ฒ ํ๋ ์์ ์ ๋งํ๋ค.
1997๋ ์ํ๊ถ ๋ฌธ์ ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ECMAScript๋ก ๋ช ๋ช ๋์๊ณ 1999๋ ECMAScript 3(ES3)๊ฐ ๊ณต๊ฐ๋๊ณ 2009๋ ์ ECMAScript 5(ES5)๋ HTML๊ณผ ํจ๊ป ์ถํํ ํ์ค ์ฌ์์ด๋ค.
2015๋ ์ ๊ณต๊ฐ๋ ECMAScript 6(ES6)๋ let/const ํค์๋, ํ์ดํ ํจ์, ํด๋์ค, ๋ชจ๋ ๋ฑ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ๋ค์ ๋๊ฑฐ ๋์ ํ๋ ํฐ ๋ณํ๊ฐ ์์๋ค.
1999๋ , ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ ํต์ ๊ธฐ๋ฅ์ธ Ajax๊ฐ XMLHttpRequest๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฑ์ฅํ๋ค.
์นํ์ด์ง์์ ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ์ ๋ค์ ๋ ๋๋งํ์ง ์๊ณ , ์๋ฒ๋ก๋ถํฐ ํ์ํ ๋ฐ์ดํฐ๋ง ์ ์ก๋ฐ์ ๋ณ๊ฒฝํด์ผ ํ๋ ๋ถ๋ถ๋ง ํ์ ์ ์ผ๋ก ๋ ๋๋ง ํ๋ ๋ฐฉ์์ด ๊ฐ๋ฅํด์ก๋ค.
2006๋ , jQuery์ ๋ฑ์ฅ์ผ๋ก DOM์ ๋์ฑ ์ฝ๊ฒ ์ ์ดํ ์ ์๊ฒ ๋์๊ณ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๋ ์ด๋์ ๋ ํด๊ฒฐ๋์๋ค.
์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ค๋ ์๋๊ฐ ๋๋ฉด์ ๋์ฑ ๋น ๋ฅด๊ฒ ๋์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํ์์ฑ์ด ๋๋๋์๋ค. 2008๋ ๋ฑ์ฅํ ๊ตฌ๊ธ์ด V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ด๋ฌํ ์๊ตฌ์ ๋ถํฉํ๋ ๋น ๋ฅธ ์ฑ๋ฅ์ ๋ณด์ฌ์ฃผ์๋ค.
V8 ์์ง์ผ๋ก ์ด๋ฐ๋ JS์ ๋ฐ์ ์ผ๋ก ๊ณผ๊ฑฐ ์น ์๋ฒ์์ ์ํ๋๋ ๋ก์ง๋ค์ด ๋๊ฑฐ ํด๋ผ์ด์ธํธ๋ก ์ด๋ํ์๋ค.
๊ตฌ๊ธ V8 ์๋ฐ์คํฌ๋ฆฌ๋ธ ์์ง์ผ๋ก ๋น๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ์ด๋ค.
๋ธ๋ผ์ฐ์ ์์๋ง ๋์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ธ๋ผ์ฐ์ ์ด์ธ์ ํ๊ฒฝ์์๋ ๋์ํ ์ ์๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋ฆฝ์ํจ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ์ด๋ค.
Node.js
Node.js๋ ๋ฐ์ดํฐ๋ฅผ ์ค์๊ฐ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด I/O๊ฐ ๋น๋ฒํ๊ฒ ๋ฐ์ํ๋ SPA์ ์ ํฉํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ํฌ๋ก์ค ํ๋ซํผ์ ์ํ ๊ฐ์ฅ ์ค์ํ ์ธ์ด๋ก ์ฃผ๋ชฉ๋ฐ๊ณ ์๋ค.
์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ๋น๊ตํด๋ ์์์๋ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋๊ฒ์ด ํ์๊ฐ ๋์๊ณ ๋๋ถ์ด ๊ฐ๋ฐ ๊ท๋ชจ์ ๋ณต์ก๋๋ ์์นํ๋ค.
๋ฐ๋ผ์ ํ์ฐ์ ์ผ๋ก ํ๋ ์์ํฌ(React, Vue, Angular ๋ฑ)๊ฐ ๋์ํ๊ฒ ๋์๋ค.
ECMAScript๋ ์๋ฐ์คํฌ๋ฆฌ๋ธ ํ์ค ์ฌ์์ธ ECMA-262๋ฅผ ๋งํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๊ฐ, ํ์ , ๊ฐ์ฒด์ ํ๋กํผํฐ ๋ฑ ํต์ฌ ๋ฌธ๋ฒ์ ๊ท์ ํ๋ค. ๊ฐ ๋ธ๋ผ์ฐ์ ์ ์กฐ์ฌ๋ ECMAScript ์ฌ์์ ์ค์ํด์ ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๊ตฌํํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ECMAScript์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ณ๋ ์ง์ํ๋ ํด์์ด์ธํธ ์ฌ์ด๋ WebAPI(DOM, BOM, fetch ๋ฑ)๋ฅผ ์์ฐ๋ฅด๋ ๊ฐ๋ ์ด๋ค.
์น ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ ์ผํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ๋ฐ์๊ฐ ๋ณ๋์ ์ปดํ์ผ ์์
์ ์ํํ์ง ์๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด์ด๋ค.๋๋ถ๋ถ์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง(v8 ๋ฑ)์ ์ธํฐํ๋ฆฌํฐ์ ์ปดํ์ผ๋ฌ์ ์ฅ์ ์ ๊ฒฐํฉํด ๋น๊ต์ ์ฒ๋ฆฌ ์๋๊ฐ ๋๋ฆฐ ์ธํฐํ๋ฆฌํฐ์ ๋จ์ ์ ํด๊ฒฐํ๋ค.
์ธํฐํ๋ฆฌํฐ๋ ์์คํฌ๋๋ฅผ ์ฆ์ ์คํํ๊ณ ์ปดํ์ผ๋ฌ๋ ๋น ๋ฅด๊ฒ ๋์ํ๋ ๋จธ์ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ์ต์ ํํ๋ค. ์ด๋ฅผ ํตํด ์ปดํ์ผ ๋จ๊ณ์์ ์ถ๊ฐ์ ์ธ ์๊ฐ์ด ํ์ํจ์๋ ๋์ฑ ๋น ๋ฅด๊ฒ ์ฝ๋๋ฅผ ์คํํ ์ ์๋ค.
๋ํ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ช ๋ นํ, ํจ์ํ, ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํ๋ ๋ฉํฐ ํจ๋ฌ๋ค์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ด๋ค. ๋ํ ํ๋กํ ํ์ ๊ธฐ๋ฐ์ ๊ฐ์ฒด ์งํฅ ์ธ์ด์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ ๋๋ Node.js ํ๊ฒฝ์์ ์คํํ ์ ์๋ค. ์ฌ๊ธฐ์ ํ ๊ฐ์ง ์ฃผ์ํด์ผ ํ ์ ์ ๋ธ๋ผ์ฐ์ ์ Node.js๋ ์ฉ๋๊ฐ ๋ค๋ฅด๋ค๋ ๊ฒ์ด๋ค.
Ref
- ์ด์ ๋ชจ ์ , โ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Diveโ, ์ํค๋ถ์ค