ํฐ์คํ ๋ฆฌ ๋ทฐ
[JavaScript] ์๋ฐ์คํฌ๋ฆฝํธ๋?
๊ฐ๋ฐ๊ฐ๊ตด๐ธ 2022. 7. 11. 22:03์๋ฐ์คํฌ๋ฆฝํธ์ ํ์
๋ณดํต ์ธ์ด๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ๊ธฐ ์ํ ๋ฒ์ฉ์ ์ธ ์ฉ๋๋ก ์ค๊ณ๋๋ ๋ฐ๋ฉด, ์๋ฐ์คํฌ๋ฆฝํธ๋ ์นํ์ด์ง์ ๋จ์ํ ๋ณด์กฐ ๊ธฐ๋ฅ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ ํ์ ์ธ ์ฉ๋๋ก ํ์๋์์ต๋๋ค.
1995๋ , ์น ๋ธ๋ผ์ฐ์ ์์ฅ์ ์ง๋ฐฐํ๋ ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ๊ฐ ๋ธ๋ ๋ ์์ดํฌ๊ฐ ๊ฐ๋ฐํ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์ ํ๋ฉฐ ์์๋์์ต๋๋ค.
์ด๊ธฐ์ ๋ชจ์นด๋ก ๋ช ๋ช ๋์์ผ๋ ์ถํ ๋ผ์ด๋ธ์คํฌ๋ฆฝํธ๋ฅผ ๊ฑฐ์ณ ์๋ฐ์คํฌ๋ฆฝํธ๋ผ๋ ์ต์ข ์ด๋ฆ์ด ํ์ํ์์ต๋๋ค.
ํ์ฌ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์ ํ์ค ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ์๋ฆฌ์ก์์ผ๋ฉฐ, ๋ค์ํ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๋ฉฐ ๋ช ์ค์๋ถํ ๋ฒ์ฉ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ ์ธ์ด๋ก ์ฑ์ฅํ๊ฒ ๋์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ
1996๋ 8์, ๋ท์ค์ผ์ดํ ์ปค๋ฎค๋์ผ์ด์ ์ฆ์ ๊ฒฝ์์ฌ์๋ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ ๋ฒ์ ์ธ JScript๋ฅผ IE 3.0์ ํ์ฌํ๋ฉฐ ํ์คํ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์์ต๋๋ค. JScript๋ ๋ง์ดํฌ๋ก์ํํธ์ ๋ธ๋ผ์ฐ์ ์์ฅ ์ ์ ์จ์ ๋์ด๊ธฐ ์ํด ํ์ํ์์ผ๋ฏ๋ก ์๋ฐ์คํฌ๋ฆฝํธ์ ์ผ๋ถ ํธํ๋์ด ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ์นํ์ด์ง๊ฐ ๋์ํ์ง ์๊ธฐ๋ ํ๋ "ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์"๊ฐ ๋ฐ์ํ์์ต๋๋ค.
๋ฐ๋ผ์ 1997๋ 7์, ECMA ์ธํฐ๋ด์ ๋ ๋น์๋ฆฌ ํ์คํ ๊ธฐ๊ตฌ์์ ํ์คํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ธ ECMAScript(ES)๋ฅผ ๊ณต๊ฐํ์์ต๋๋ค. ํ์ฌ์ 2015๋ ์ ๊ณต๊ฐ๋ ES6์ ๊ธฐ๋ฐ์ผ๋ก let/const ํค์๋, ํ์ดํ ํจ์, ํด๋์ค, ๋ชจ๋ ๋ฑ๊ณผ ๊ฐ์ด ๋ฒ์ฉ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก์ ๊ฐ์ถฐ์ผ ํ ๊ธฐ๋ฅ๋ค์ ๋๊ฑฐ ๋์ ๋ ES6 ์ดํ ๋ฒ์ ๋ค์ด ๋๋ฆฌ ์ฌ์ฉ๋๊ณ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ์ฅ์ ์ญ์ฌ
์ด์ฐฝ๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋ฒ๋ก๋ถํฐ ์ ๋ฌ๋ฐ์ HTML๊ณผ CSS๋ฅผ ๋จ์ํ *๋ ๋๋งํ๋ ์์ค์ด์์ง๋ง Ajax, jQuery, V8, Node.js, SPA๋ฑ์ ๋ฑ์ฅ์ผ๋ก ์ธํด ๊พธ์คํ ๋ฐ์ ํด ์์ต๋๋ค.
*๋ ๋๋ง : HTML, CSS, JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํด์ํด์ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅ
Ajax(Asynchronous JavaScript and XML)
- 1999๋ ์ XMLHttpRequest๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฑ์ฅ
- ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ ํต์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณต
- ์๋ฒ๋ก๋ถํฐ ํ์ํ ๋ฐ์ดํฐ๋ง ์ ์ก๋ฐ์ ๋ถ๋ถ ๋ ๋๋ง์ด ๊ฐ๋ฅํด์ง (์ด์ ์ HTML์ฝ๋๋ฅผ ๋ค์ ์ ์ก๋ฐ์ ์ฒ์๋ถํฐ ๋ค์ ๋ ๋๋งํด์ผํ๋ ๋ฐฉ์)
- ๊ตฌ๊ธ ๋งต์ค์ ๋์ ๋ฉฐ ์ด๋ฅผ ํตํด ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ ์ฌํ ๋น ๋ฅธ ์ฑ๋ฅ๊ณผ ๋ถ๋๋ฌ์ด ํ๋ฉด ์ ํ์ ๋ณด์ฌ์ค
jQuery
- 2006๋ ๋ฑ์ฅ
- DOM(Document Object Model)์ ๋์ฑ ์ฝ๊ฒ ์ ์ด
- ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์๋ฅผ ์ด๋์ ๋ ํด๊ฒฐ
- ๋ฐฐ์ฐ๊ธฐ ์ฝ๊ณ ์ง๊ด์ ์
- ํ์ฌ๋ ์ฌ์ฉ ๋น๋๊ฐ ๋ง์ด ์ค์๋ค๊ณ ์๊ณ ์์
V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง
- ๋น ๋ฅด๊ฒ ๋์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํ์์ฑ์ ์ถฉ์กฑ
- ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ ์ฌํ UX์ ์ ๊ณตํ ์ ์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ์ ์ฐฉ์ํด
- FE ์์ญ์ด ์ฃผ๋ชฉ๋ฐ๋ ๊ณ๊ธฐ
Node.js
- 2009๋ ๋ผ์ด์ธ ๋ฌ์ด ๋ฐํ
- ๊ตฌ๊ธ V8 ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ๋น๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ
- ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋ฆฝ์ํจ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ(์๋ฐ์คํฌ๋ฆฝํธ ๋ธ๋ผ์ฐ์ ์ด์ธ์ ํ๊ฒฝ์์๋ ๋์)
- ์๋ฒ ์ฌ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ฃผ๋ก ์ฌ์ฉ๋๋ฉฐ, ์ด์ ํ์ํ ๋ชจ๋๊ณผ ํ์ผ ์์คํ ๊ณผ HTTP ๋ฑ ๋ด์ฅ API๋ฅผ ์ ๊ณตํจ
- ๋น๋๊ธฐ I/O๋ฅผ ์ง์ํ๊ณ ๋จ์ผ ์คํ ๋ ์ด๋ฒคํธ ๋ฃจํ ๊ธฐ๋ฐ ๋์ํ์ฌ ์์ฒญ ์ฒ๋ฆฌ ์ฑ๋ฅ์ด ์ข์
SPA(Single Page Application) ํ๋ ์์ํฌ
- CBD(Component based development)๋ฐฉ๋ฒ๋ก ์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ํ๋ ์์ํฌ
- ๋ณ๊ฒฝ์ ์ ์ฐํ๋ฉฐ ํ์ฅํ๊ธฐ ์ฌ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ณ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํด ํ์
- SPA๊ฐ ๋์คํ๋๋ฉฐ Angular, React, Vue.js, Svelte ๋ฑ ๋ค์ํ ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ง์ด ์ฌ์ฉ๋๊ฒ ๋จ
ECMAScript
์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ค ์ฌ์์ธ ECMA-262๋ก, ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๊ฐ, ํ์ , ๊ฐ์ฒด, ํ๋กํผํฐ, ํจ์, ํ์ค ๋นํธ์ธ ๊ฐ์ฒด ๋ฑ ํต์ฌ ๋ฌธ๋ฒ์ ๊ท์ ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ผ๋ฐ์ ์ผ๋ก ๊ธฐ๋ณธ ๋ผ๋์ธ ECMAScript์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ณ๋ ์ง์ํ๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ Web API(Dom, XMLHttpRequest, fetch, Web Storage, Web Component ... ) ๋ฑ์ ํฌํจํ ๊ฐ๋ ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ํน์ง
์น ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ ์ผํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
HTML, CSS์ ํจ๊ป ์น์ ๊ตฌ์ฑํ๋ ์์ ์ค ํ๋๋ก ๋ค๋ฅธ ์ธ์ด์ ๋ง์ฐฌ๊ฐ์ง๋ก ๊ธฐ์กด์ ์ธ์ด๋ค์์ ๋ง์ ์ํฅ์ ๋ฐ์์ C, ์๋ฐ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ด ์ ์ฌํ๊ณ ์ ํ์์ ํ๋กํ ํ์ ๊ธฐ๋ฐ ์์์, ์คํด์์ ์ผ๊ธ ํจ์(์ผ๊ธ ๊ฐ์ฒด)์ ๊ฐ๋ ์ ์ฐจ์ฉํ์ต๋๋ค.
์ธํฐํ๋ฆฌํฐ ์ธ์ด
๋ํ, ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ๋ฐ์๊ฐ ๋ณ๋์ ์ปดํ์ผ ์์ ์ ์ํํ์ง ์๋ ์ธํฐํ๋ฆฌํฐ ์ธ์ด์ ๋๋ค. ๋๋ถ๋ถ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ธํฐํ๋ฆฌํฐ์ ์ปดํ์ผ๋ฌ์ ์ฅ์ ์ ๊ฒฐํฉํด, ์ธํฐํ๋ฆฌํฐ์ ๋๋ฆฐ ์คํ์๋๋ฅผ ๊ทน๋ณตํ์์ต๋๋ค.
๋ฉํฐ ํจ๋ฌ๋ค์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
๋ช ๋ นํ, ํจ์ํ, ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํ๋ ๋ฉํฐ ํจ๋ฌ๋ค์ ์ธ์ด์ ๋๋ค.
*ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ ๊ดํด์ ๋ ์์ธํ ์์๋ณด๊ณ ์ถ๋ค๋ฉด ์๋์ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
[์ถ์ฒ] ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive
'JavaScript > ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] ์ ์ด๋ฌธ (0) | 2022.07.15 |
---|---|
[JavaScript] ์ฐ์ฐ์ (0) | 2022.07.15 |
[JavaScript] ๋ฐ์ดํฐ ํ์ (0) | 2022.07.14 |
[JavaScript] ๋ณ์ (0) | 2022.07.13 |
[JavaScript] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ํ๊ฒฝ (0) | 2022.07.12 |
- Total
- Today
- Yesterday
- ํฌํฌ์ธํฐ
- JavaScript
- ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ deep dive
- ์๊ณ ๋ฆฌ์ฆ
- ํจ์ํ ํ๋ก๊ทธ๋๋ฐ
- ์ ์ญ ๋ณ์
- ๋ฐฑ์ค javascript
- ๋์์ธ ํจํด
- Baekjoon
- ํ๋กํ ์ฝ
- ๋ค์ด๋๋ฏน ํ๋ก๊ทธ๋๋ฐ
- fp
- ๋ ์์ปฌ ํ๊ฒฝ
- ๋ฐฑ์ค node.js
- ์๋ฐ
- ์ฝ๋ฉํ ์คํธ
- ํ๋ก๊ทธ๋๋จธ์ค
- git
- ๋คํธ์ํฌ
- ์ด์์ฒด์
- ์นด์นด์ค ์ธํด
- http
- ํ๋กํผํฐ
- TDD
- ๋ฐฑ์ค
- 2019 ์นด์นด์ค ๊ฐ๋ฐ์ ๊ฒจ์ธ ์ธํด
- ์๋ฐ์คํฌ๋ฆฝํธ
- map
- ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ
- ์ด๋ถํ์
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |