Programming/JavaScript

[λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive] 02μž₯ μžλ°”μŠ€ν¬λ¦½νŠΈλž€?

yuri lee 2023. 5. 15. 00:02
λ°˜μ‘ν˜•
이 글은 λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ 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 엔진)κ³Ό κ²°ν•©ν•˜μ—¬ 속도가 느린 인터프리터 단점 ν•΄κ²° 함

 

λ°˜μ‘ν˜•