์›น ์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ์˜ ๋งฅ๋ฝ์—์„œ Babel์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ๊ณผ ์ด์ „ ์›น ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์ง€์›์„ ๋ณด์žฅํ•˜๋ฉด์„œ JavaScript ์–ธ์–ด(ECMAScript)์˜ ์ตœ์‹  ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์ธ๊ธฐ๊ฐ€ ๋†’๊ณ  ๋„๋ฆฌ ์ฑ„ํƒ๋˜๋Š” JavaScript ์ปดํŒŒ์ผ๋Ÿฌ์ž…๋‹ˆ๋‹ค. Babel์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊นจ๋—ํ•˜๊ณ  ํšจ์œจ์ ์ด๋ฉฐ ๋ฏธ๋ž˜ ์ง€ํ–ฅ์ ์ธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•˜๋ฏ€๋กœ ์ตœ์‹  ์›น ๊ฐœ๋ฐœ์— ์—†์–ด์„œ๋Š” ์•ˆ ๋  ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ์ด ์ฝ”๋“œ๋Š” ์ด์ „ ๋ธŒ๋ผ์šฐ์ €์™€ ํ˜ธํ™˜๋˜๋Š” ๋ณด๋‹ค ๋„๋ฆฌ ์ง€์›๋˜๋Š” JavaScript ๋ฒ„์ „์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์„ธ์Šค๋Š” ์‚ฌ์šฉํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋‚˜ ํ”Œ๋žซํผ์— ๊ด€๊ณ„์—†์ด ๊ฐ€์žฅ ๊ด‘๋ฒ”์œ„ํ•œ ์ฒญ์ค‘์„ ์ˆ˜์šฉํ•˜๋Š” ๋น ๋ฅด๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋ฉฐ ์•ˆ์ •์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ฐœ๋ฐœ์— ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค.

์ตœ๊ทผ ํ†ต๊ณ„์— ๋”ฐ๋ฅด๋ฉด Babel์€ ์ „ ์„ธ๊ณ„ JavaScript ๊ฐœ๋ฐœ์ž์˜ 60% ์ด์ƒ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„์—์„œ ๋‘๋“œ๋Ÿฌ์ง„ ์กด์žฌ๊ฐ์„ ๋ˆ„๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. AppMasterno-code ํ”Œ๋žซํผ์˜ ๊ฐœ๋ฐœ์ž๋Š” Babel์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ๋ชจ๋ฒ” ์‚ฌ๋ก€์™€ ECMAScript์˜ ์ตœ์‹  ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜๋Š” ๊ณ ์„ฑ๋Šฅ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ง€์†์ ์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ๋™์‹œ์— ๊ธฐ์กด ๋ฐ ์‹ ๊ทœ ์›น ๋ธŒ๋ผ์šฐ์ € ๋ชจ๋‘์™€์˜ ๊ด‘๋ฒ”์œ„ํ•œ ์ƒํ˜ธ ์šด์šฉ์„ฑ์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ด‘๋ฒ”์œ„ํ•œ ์ฑ„ํƒ๊ณผ ๋‹ค์–‘์„ฑ ๋•๋ถ„์— Babel์€ ์ตœ์ฒจ๋‹จ ์›น ๊ฐœ๋ฐœ ํˆดํ‚ท์˜ ์ค‘์š”ํ•œ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Babel์€ ์›น ๊ฐœ๋ฐœ ํŒŒ์ดํ”„๋ผ์ธ์˜ ํ•ต์‹ฌ ๋ถ€๋ถ„์œผ๋กœ ์ž‘๋™ํ•˜์—ฌ Webpack, Gulp ๋ฐ Grunt์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ๋‹ค๋ฅธ ๋„๊ตฌ์™€์˜ ์›ํ™œํ•œ ํ†ตํ•ฉ์„ ๋‹ฌ์„ฑํ•˜๊ณ  ์›น ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๋ฅผ ํฌ๊ฒŒ ๊ฐ„์†Œํ™”ํ•˜๋Š” ์ˆ˜๋งŽ์€ ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ฐ ์‚ฌ์ „ ์„ค์ •์— ๋Œ€ํ•œ ์ง€์›์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ƒํ˜ธ ์šด์šฉ์„ฑ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ๊ฐœ์ธ์˜ ํ•„์š”์™€ ์„ ํ˜ธ๋„์— ๋งž๋Š” ๋งž์ถคํ˜• ๊ฐœ๋ฐœ ์›Œํฌํ”Œ๋กœ๋ฅผ ํŽธ๋ฆฌํ•˜๊ณ  ์‰ฝ๊ฒŒ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ Babel์ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ œ๊ณตํ•˜๋Š” ์ฃผ์š” ์ด์  ์ค‘ ํ•˜๋‚˜๋Š” JavaScript ๋‚ด์— XML๊ณผ ์œ ์‚ฌํ•œ ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋Š” ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ๊ตฌ๋ฌธ ํ™•์žฅ์ธ JSX์— ๋Œ€ํ•œ ๊ด‘๋ฒ”์œ„ํ•œ ์ง€์›์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋งˆํฌ์—…๊ณผ ์ฝ”๋“œ์˜ ๊ฒฐํ•ฉ์œผ๋กœ ์ธํ•ด ํ‘œํ˜„๋ ฅ์ด ๋›ฐ์–ด๋‚˜๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ์šฉ์ดํ•œ ๊ตฌ๋ฌธ์ด ์ƒ์„ฑ๋˜์–ด ๋ณต์žกํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์™€ ๋Œ€ํ™”ํ˜• ๊ตฌ์„ฑ ์š”์†Œ์˜ ๊ฐœ๋ฐœ์ด ํฌ๊ฒŒ ๋‹จ์ˆœํ™”๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Babel์˜ ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” JSX ์ง€์›์„ ํ†ตํ•ด React ๋ฐ Vue์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ์ธ๊ธฐ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์›ํ™œํ•˜๊ฒŒ ํ†ตํ•ฉ๋˜์–ด AppMaster ์˜ ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ์ •๊ตํ•˜๊ณ  ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๋ฒ”์œ„๋ฅผ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

AppMaster ์—์„œ Babel์˜ ์ฑ„ํƒ์€ Vue3 ํ”„๋ ˆ์ž„์›Œํฌ์™€ JavaScript/TypeScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋ฒˆ๋“ค๋ง ๋ฐ ์ฝ”๋“œ ๋ถ„ํ• ์„ ์œ„ํ•œ Webpack, ์ฝ”๋“œ ํ’ˆ์งˆ์„ ๋ณด์žฅํ•˜๊ณ  ๋ชจ๋ฒ” ์‚ฌ๋ก€ ์ค€์ˆ˜๋ฅผ ์œ„ํ•œ ESLint์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ๋„๊ตฌ์™€ ํ•จ๊ป˜ Babel์€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ตœ์‹  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์‰ฝ๊ฒŒ ์ถฉ์กฑํ•˜๋Š” ํšจ์œจ์ ์ด๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ ๊ฐ€๋Šฅํ•˜๋ฉฐ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ตœ์ฒจ๋‹จ JavaScript ๊ธฐ๋Šฅ๊ณผ ๋ธŒ๋ผ์šฐ์ € ์ง€์› ํ˜„์‹ค ์‚ฌ์ด์˜ ๊ฒฉ์ฐจ๋ฅผ ํ•ด์†Œํ•จ์œผ๋กœ์จ Babel์€ ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ๊ณผ ์žฅ์น˜์—์„œ ์ตœ์ ์˜ ์ผ๊ด€๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ Babel ์ƒํƒœ๊ณ„๋Š” ์ง€์†์ ์œผ๋กœ ์›น ๊ฐœ๋ฐœ์˜ ๊ฒฝ๊ณ„๋ฅผ ๋„“ํžˆ๋Š” ๊ธฐ์—ฌ์ž์™€ ์œ ์ง€๊ด€๋ฆฌ์ž๋กœ ๊ตฌ์„ฑ๋œ ํ™œ๋ฐœํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ†ตํ•ด ์ง€์†์ ์œผ๋กœ ์„ฑ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฒˆ์ฐฝํ•˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” Babel์ด ์ง€์†์ ์œผ๋กœ ๋ฐœ์ „ํ•˜๊ณ  ๋Š์ž„์—†์ด ๋ณ€ํ™”ํ•˜๋Š” JavaScript ๋ฐ ์›น ๊ธฐ์ˆ  ํ™˜๊ฒฝ์— ๋ณด์กฐ๋ฅผ ๋งž์ถœ ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Babel์€ ๋ชจ๋“  ์›น ๊ฐœ๋ฐœ ์Šคํƒ์— ๋Œ€ํ•œ ์•ˆ์ •์ ์ด๊ณ  ๋ฏธ๋ž˜ ์ง€ํ–ฅ์ ์ธ ์„ ํƒ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด async/await, ์ƒ์„ฑ๊ธฐ, ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋งคํ•‘ ๋ฐ ์„ค์ •๊ณผ ๊ฐ™์€ ์ตœ์‹  ECMAScript ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ๊ฐํ•ด ๋ณด์„ธ์š”. Babel์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋Š” ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ๋ณด๋‹ค ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ํ˜ธํ™˜๋˜๋Š” JavaScript ๋ฒ„์ „์œผ๋กœ ์ž๋™ ๋ณ€ํ™˜๋˜๋Š” ๊ฐ„๊ฒฐํ•˜๊ณ  ์ฝ๊ธฐ ์‰ฝ๊ณ  ์„ฑ๋Šฅ์ด ๋›ฐ์–ด๋‚œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ด์ „ ๋ธŒ๋ผ์šฐ์ €์— ๋งž๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ˆ˜๋™์œผ๋กœ ๋ฆฌํŒฉํ„ฐ๋งํ•  ํ•„์š”๊ฐ€ ์—†์–ด์ ธ ๊ฐœ๋ฐœ ์‹œ๊ฐ„๊ณผ ๋…ธ๋ ฅ์ด ํฌ๊ฒŒ ์ค„์–ด๋“ค๋ฉด์„œ ์ตœ์ ์˜ ์„ฑ๋Šฅ๊ณผ ์‚ฌ์šฉ์ž ๋งŒ์กฑ๋„๋ฅผ ๊ณ„์† ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ Babel์€ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์˜ ํ•ต์‹ฌ ๊ตฌ์„ฑ ์š”์†Œ ์—ญํ• ์„ ํ•˜๋ฉฐ AppMaster ๋ฐ ๊ธฐํƒ€ ์ฃผ์š” ํ”Œ๋žซํผ์ด ์ „ ์„ธ๊ณ„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ ํ•ฉํ•œ ๊ณ ํ’ˆ์งˆ, ์„ฑ๋Šฅ ๋ฐ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. Babel์„ ์›น ๊ฐœ๋ฐœ ์Šคํƒ์— ํ†ตํ•ฉํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ์ž๋Š” ECMAScript์˜ ์ตœ์‹  ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ํšจ์œจ์ ์ด๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋ฏธ๋ž˜ ์ง€ํ–ฅ์ ์ธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋™์‹œ์— ๋‹ค์–‘ํ•œ ๋ธŒ๋ผ์šฐ์ €์™€ ํ”Œ๋žซํผ์—์„œ ์›ํ™œํ•˜๊ณ  ์ผ๊ด€๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Babel์„ ํ†ตํ•ด ์›น ๊ฐœ๋ฐœ์˜ ๋ฏธ๋ž˜๋Š” ์ฐธ์œผ๋กœ ๋ฐ๊ณ  ์ž ์žฌ๋ ฅ์ด ๊ฐ€๋“ํ•ฉ๋‹ˆ๋‹ค.