์น ์ฌ์ดํธ ๊ฐ๋ฐ์ ๋งฅ๋ฝ์์ 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์ ํตํด ์น ๊ฐ๋ฐ์ ๋ฏธ๋๋ ์ฐธ์ผ๋ก ๋ฐ๊ณ ์ ์ฌ๋ ฅ์ด ๊ฐ๋ํฉ๋๋ค.