λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
"곡뢀" π‘Ÿπ‘’π‘π‘œπ‘Ÿπ‘‘/πΉπ‘Ÿπ‘œπ‘›π‘‘π‘’π‘›π‘‘

[TIL] Babelμ΄λž€ 무엇인가?

by ΰ·† Yoni ΰ·† 2023. 6. 15.
728x90

 

바벨(Babel)μ΄λž€?

 
ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ„ ν•˜λŠ” μ‚¬λžŒμ΄λΌλ©΄ ν•œ 번쯀 바벨에 λŒ€ν•΄μ„œ λ“€μ–΄λ³Έ 적은 μžˆμ„ 것이닀.
바벨(Babel)은 μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό λ³€ν™˜ν•΄ μ£ΌλŠ” μ»΄νŒŒμΌλŸ¬μ΄λ‹€.
 

μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό λ³€ν™˜?
μ™œ ν•΄μ•Όν•˜λŠ”λ°?

 
 
바벨은 JavaScript ES6 문법이 λ“±μž₯ν•˜λ©΄μ„œ λ‚˜μ˜€κ²Œ λ˜μ—ˆλ‹€. ES6 문법이 막 λ“±μž₯ν–ˆμ„ λ•ŒλŠ” λŒ€λΆ€λΆ„μ˜ λΈŒλΌμš°μ €κ°€ ES5 λ¬Έλ²•λ§Œ μ§€μ›ν•˜κ³  μžˆμ—ˆλ‹€. λ•Œλ¬Έμ— κ°œλ°œμžλ“€μ΄ ES6 문법을 μ‚¬μš©ν•˜λ”λΌλ„ μ΅œμ‹  문법을 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” λΈŒλΌμš°μ €λΌλ©΄ λ™μž‘μ΄ λΆˆκ°€λŠ₯ν–ˆλ‹€.
 
κ·Έλž˜μ„œ ES6 문법을 ES5 λ¬Έλ²•μœΌλ‘œ λ³€ν™˜ν•΄μ€„ νŠΈλžœμŠ€νŒŒμΌλŸ¬κ°€ ν•„μš”ν–ˆλŠ”λ°, 이 것이 λ°”λ‘œ 바벨(Babel)이닀. κ·Έ λ•Œλ¬Έμ— 바벨이 처음 λ“±μž₯ν–ˆμ„ λ•Œ λ‹Ήμ‹œ 이름은 Babel이 μ•„λ‹ˆλΌ 6to5μ˜€λ‹€κ³  ν•œλ‹€.
 
ν•˜μ§€λ§Œ, μ΄μ œλŠ” ES6λ₯Ό ν¬ν•¨ν•˜μ—¬ ES7 문법 λ˜ν•œ ES5 μ½”λ“œλ‘œ λ³€ν™˜μ΄ κ°€λŠ₯ν•˜λ‹€. 바벨을 톡해 ES6+ λ²„μ „μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈλ‚˜ νƒ€μž…μŠ€ν¬λ¦½νŠΈ, JSX λ“± λ‹€λ₯Έ μ–Έμ–΄λ‘œ λΆ„λ₯˜λ˜λŠ” 언어듀에 λŒ€ν•΄μ„œλ„ λͺ¨λ“  λΈŒλΌμš°μ €μ—μ„œ ν˜Έν™˜μ΄ κ°€λŠ₯ν•œ 것이닀. μ›Ή 개발자라면 λ‹Ήμ—°νžˆ μ˜›λ‚  λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•˜λŠ” μ‚¬μš©μžλ“€λ„ κ³ λ €ν•΄μ€˜μ•Ό ν•˜κΈ° λ•Œλ¬Έμ— 이 바벨을 μ‚¬μš©ν•˜λŠ” 것이닀.
 
[μ°Έκ³ ]
https://babeljs.io/docs/

728x90

λŒ“κΈ€