๐ฉ๐ป 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 ์ดํ์ ์ฌ์์ผ๋ก ๋ค์ด๊ทธ๋ ์ด๋ํ ํ์๊ฐ ์๋ค.
'Programming Language > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive] 4์ฅ ๋ณ์ (1) | 2024.08.21 |
---|---|
[๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive] 3์ฅ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ์คํ ๋ฐฉ๋ฒ (0) | 2024.08.17 |