μ΄ κΈμ λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive λ°νμΌλ‘ μ 리ν λ΄μ©μ λλ€.
2.1 μλ°μ€ν¬λ¦½νΈμ νμ
μλ°μ€ν¬λ¦½νΈλ 1996λ 3μ λ·μ€μΌμ΄ν μΉ λΈλΌμ°μ μ νμ¬λμκ³ , μ΄λ¦μ΄ λ°λμ΄ μ΅μ’ μ μΌλ‘ μλ°μ€ν¬λ¦½νΈκ° λμμ΅λλ€.
2.2 μλ°μ€ν¬λ¦½νΈμ νμ€ν
κ²½μμΌλ‘ μΈν΄ λΈλΌμ°μ μ λ°λΌ μΉ νμ΄μ§κ° μ μμ μΌλ‘ λμνμ§ μλ ν¬λ‘μ€ λΈλΌμ°μ§ μ΄μκ° λ°μνκΈ° μμνλ©΄μ, μΉν¨μ΄μ§λ₯Ό κ°λ°νκΈ° λ§€μ° μ΄λ €μμ‘μ΅λλ€. λ°λΌμ νμ€νλ μλ°μ€ν¬λ¦½νΈμ νμμ±μ΄ λλλκ³ νμ€νλ μλ°μ€ν¬λ¦½νΈλ‘ μ νλμμ΅λλ€.
2.3 μλ°μ€ν¬λ¦½νΈ μμ§μ μμ¬
λ λλ§μ΄λ? HTML, CSS, JSλ‘ μμ±λ λ¬Έμλ₯Ό ν΄μν΄μ λΈλΌμ°μ μ μκ°μ μΌλ‘ μΆλ ₯νλ κ²μ λ§ν©λλ€. μλ²μμ λ°μ΄ν°λ₯Ό HTMLλ‘ λ³νν΄μ λΈλΌμ°μ μκ² μ λ¬νλ κ³Όμ (SSR: Server Sid Rendering)μ κ°λ¦¬ν€κΈ°λ ν©λλ€.
2.3.1 Ajax
1999λ JSλ₯Ό μ΄μ©ν΄ μλ²μ λΈλΌμ°μ κ° λΉλκΈ° λ°©μμΌλ‘ λ°μ΄ν°λ₯Ό κ΅νν μ μλ Ajax(Asynchronous JavaScript and XML)κ° λ±μ₯νμ΅λλ€. μΉνμ΄μ§μμ λ³κ²½ν νμκ° μλ λΆλΆμ λ€μ λ λλ§νμ§ μμ λΉ λ₯Έ μ±λ₯κ³Ό λΆλλ¬μ΄ νλ©΄ μ νμ΄ κ°λ₯ν΄μ‘μ΅λλ€.
2.3.2 jQuery
2006λ jQueryμ λ±μ₯μΌλ‘ DOMμ λμ± μ½κ² μ μ΄ν μ μκ² λμμ΅λλ€.
2.3.3 V8 μλ°μ€ν¬λ¦½νΈ μμ§
μλ°μ€ν¬λ¦½νΈλ 2008λ ꡬκΈμ V8 μλ°μ€ν¬λ¦½νΈ μμ§μ λ±μ₯μΌλ‘ UXλ₯Ό μ 곡ν μ μλ μΉ μ ν리μΌμ΄μ νλ‘κ·Έλλ° μΈμ΄λ‘ μ μ°©νκ² λμμ΅λλ€.
2.3.4 Node.js
2009λ λ°νλ Node.jsλ V8 μλ°μ€ν¬λ¦½νΈ μμ§μΌλ‘ λΉλλ μλ°μ€ν¬λ¦½νΈ λ°νμ νκ²½μ λλ€. Node.jsλ λΉλκΈ° I/Oλ₯Ό μ§μνλ©° λ¨μΌ μ€λ λ μ΄λ²€νΈ 루ν κΈ°λ°μΌλ‘ λμν¨μΌλ‘μ¨ μ±λ₯μ΄ μ’μ΅λλ€. λ°μ΄ν°λ₯Ό μ€μκ°μΌλ‘ μ²λ¦¬νκΈ° μν΄ I/Oκ° λΉλ²νκ² λ°μνλ SPA(Single PAge Application)μ μ ν©ν©λλ€.
2.3.5 SPA νλ μμν¬
CBD(Component based development) λ°©λ²λ‘ μ κΈ°λ°μΌλ‘ νλ SPA(Single Page Application)κ° λμ€νλλ©΄μ Angular, Readt, Vue.js, Svelte λ± λ€μν νλ μμν¬/λΌμ΄λΈλ¬λ¦¬κ° λ±μ₯νμ΅λλ€.
2.4 μλ°μ€ν¬λ¦½νΈμ ECMAScript
ECMAScriptλ μλ°μ€ν¬λ¦½νΈμ νμ€ μ¬μμ λ§ν©λλ€. νμ§λ§ μλ°μ€ν¬λ¦½νΈλ ECMAScriptμ λΈλΌμ°μ κ° λ³λ μ§μνλ ν΄λΌμ΄μΈνΈ μ¬μ΄λ Web API, μ¦ DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFram, SVG, Web Storage, Web Component, Web Worker λ±μ λͺ¨λ ν¬ν¨νλ κ°λ μ λλ€.
2.5 μλ°μ€ν¬λ¦½νΈμ νΉμ§
- μλ°μ€ν¬λ¦½νΈλ μΉ λΈλΌμ°μ μμ λμνλ μ μΌν νλ‘κ·Έλλ° μΈμ΄μ λλ€.
- κ°λ°μκ° λ³λμ μ»΄νμΌ μμ μ μννμ§ μλ μΈν°νλ¦¬ν° μΈμ΄ (interpreter language)μ λλ€. μΈν°ν리ν°λ μμ€μ½λλ₯Ό μ¦μ μ€ννκ³ μ»΄νμΌλ¬λ λΉ λ₯΄κ² λμνλ λ¨Έμ μ½λλ₯Ό μμ±νκ³ μ΅μ ν ν©λλ€.
- λͺ λ Ήμ΄, ν¨μν, νλ‘ν νμ κΈ°λ° κ°μ²΄μ§ν₯ νλ‘κ·Έλλ°μ μ§μνλ λ©ν° ν¨λ¬λ€μ νλ‘κ·Έλλ° μΈμ΄μ λλ€.
μ»΄νμΌλ¬ μΈμ΄ vs μΈν°νλ¦¬ν° μΈμ΄
μ»΄νμΌλ¬ | μΈν°νλ¦¬ν° |
μ€ν νμΌμ μμ±νλ€ | μ€ν νμΌμ μμ±νμ§ μλλ€. |
μ»΄νμΌ λ¨κ³μ μ€ν λ¨κ³κ° λΆλ¦¬λμ΄ μλ€. | μΈν°νλ¦¬νΈ λ¨κ³μ μ€ν λ¨κ³κ° λΆλ¦¬λμ΄ μμ§ μλ€. |
μ»΄νμΌκ³Ό μ€νλ¨κ³κ° λΆλ¦¬λμ΄ μμΌλ―λ‘ μ½λ μ€ν μλκ° λΉ λ₯΄λ€. | μΈν°νλ¦¬νΈ λ¨κ³μ μ€ν λ¨κ³κ° λΆλ¦¬λμ΄ μμ§ μκ³ λ°λ³΅ μνλλ―λ‘ μ½λ μ€ν μλκ° λΉκ΅μ λ리λ€. But λͺ¨λ μλ°μ€ν¬λ¦½νΈ μμ§ (V8 μμ§)κ³Ό κ²°ν©νμ¬ μλκ° λλ¦° μΈν°νλ¦¬ν° λ¨μ ν΄κ²° ν¨ |
'Programming > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive] 04μ₯ λ³μ (0) | 2023.05.16 |
---|---|
[λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive] 03μ₯ μλ°μ€ν¬λ¦½νΈ κ°λ° νκ²½κ³Ό μ€ν λ°©λ² (0) | 2023.05.15 |
[λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive] 01μ₯ νλ‘κ·Έλλ° (0) | 2023.05.14 |
[Node.js] npm κ³Ό npx μ μ°¨μ΄μ (0) | 2023.05.03 |
[JavaScript] Moment.js μ€μ /μ€ν νκΈ° μμΉ μ‘°μ νλ λ°©λ² (0) | 2023.03.15 |