[Webpack] babel

kokoball0ยท2022๋…„ 3์›” 28์ผ
0

Webpack

๋ชฉ๋ก ๋ณด๊ธฐ
3/5
post-thumbnail

๐Ÿ’ก webpack๊ณผ babel์ด ์„œ๋กœ ํŠน๋ณ„ํ•œ ๊ด€๊ณ„๊ฐ€ ์žˆ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ webpack์„ ์„ค์ •ํ•  ๋•Œ ์ฃผ๋กœ babel์„ ์ถ”๊ฐ€ํ•˜๋ฏ€๋กœ ์„ค๋ช…ํ•˜๊ณ  ๋„˜์–ด๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค.

Babel์€ JavaScript ์ปดํŒŒ์ผ๋Ÿฌ์ž…๋‹ˆ๋‹ค.

compiler?

๐Ÿ“– In computing, a compiler is a computer program that translates computer code written in one programming language into another language

  • ํ’€์–ด์„œ ์„ค๋ช…ํ•˜์ž๋ฉด, ์‚ฌ๋žŒ์ด ์ฝ๊ธฐ ํŽธํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์ปดํ“จํ„ฐ๊ฐ€ ์ฝ๊ธฐ ํŽธํ•œ ์ฝ”๋“œ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ๊ฒƒ์„ ์ปดํŒŒ์ผ๋Ÿฌ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด,


  • ์•„๋ž˜์™€ ๊ฐ™์ด ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ์ฝ”๋“œ๋Š” ์‚ฌ๋žŒ์ด ์ฝ๊ธฐ ํŽธํ•˜์ง€๋งŒ, ์ปดํ“จํ„ฐ๋Š” ์•Œ์•„๋“ฃ๊ธฐ ์–ด๋ ค์›Œ ํ•ฉ๋‹ˆ๋‹ค. ์ตœ์ข…์ ์œผ๋กœ๋Š” 01010011์™€ ๊ฐ™์€ ์ด์ง„๋ฒ•์œผ๋กœ๋‚˜ ๋ณ€ํ™˜ ๋˜์–ด์•ผ ์ปดํ“จํ„ฐ๊ฐ€ ์•Œ์•„๋“ฃ์Šต๋‹ˆ๋‹ค.
    a = 1
  • ์ด๋ ‡๊ฒŒ ์‚ฌ๋žŒ์ด ์ฝ๊ธฐ ํŽธํ•œ ๊ณ ๊ธ‰์–ธ์–ด์—์„œ ์ปดํ“จํ„ฐ๊ฐ€ ์ต์ˆ™ํ•ด ํ•˜๋Š” low level ์–ธ์–ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์„ ์ปดํŒŒ์ผ๋Ÿฌ๋ผ๊ณ  ์ฃผ๋กœ ๋งํ•ฉ๋‹ˆ๋‹ค.
    • ์ปดํŒŒ์ผ ์–ธ์–ด๋Š” ๋”ฐ๋กœ ์žˆ์Šต๋‹ˆ๋‹ค. c, c++, java ๋“ฑ์ž…๋‹ˆ๋‹ค.
  • JavaScript๋‚˜ Python์€ ์ปดํŒŒ์ผ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋ฉฐ, ์‚ฌ๋žŒ์ด ์“ด ๋Œ€๋กœ ์ปดํ“จํ„ฐ๊ฐ€ ํ•ด์„ํ•˜๋Š” "์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด"๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค.

๋ฐ”๋ฒจ์ด ํ•„์š”ํ•œ ์ด์œ ?

Babel์€ JavaScript ์ปดํŒŒ์ผ๋Ÿฌ์ด๋‹ค.

  • JavaScript๋Š” ์ปดํŒŒ์ผ ์–ธ์–ด๊ฐ€ ์•„๋‹Œ๋ฐ?
  • Babel์€ ๋ฐฉ๊ธˆ ๋‚˜์˜จ ๋”ฐ๋ˆ๋”ฐ๋ˆํ•œ ์‹ ์ƒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒ„์ „์„ ์–ด๋Š ๋ธŒ๋ผ์šฐ์ €์—๋‚˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ES5 ๋ฒ„์ „์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ค๋‹ˆ๋‹ค. ์ฆ‰, ๋ธŒ๋ผ์šฐ์ €๋Š” ์•„์ง ์ƒˆ๋กœ์šด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒ„์ „์„ ๋งž์ดํ•  ์ค€๋น„๊ฐ€ ์•ˆ ๋๋Š”๋ฐ, ๊ฐœ๋ฐœ์ž๋Š” ์ƒˆ๋กœ์šด ๋ฒ„์ „์œผ๋กœ ํšจ์œจ์ ์ธ ๋ฌธ๋ฒ•์„ ๋ฏธ๋ฆฌ ์“ฐ๋ฉด ์ข‹์œผ๋‹ˆ๊นŒ ์ด๋Ÿฐ Babel์ด ๋‚˜์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์ด์ง€๋งŒ, ๋†’์€ ๋ฒ„์ „์—์„œ ๋‚ฎ์€ ๋ฒ„์ „์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ณ , ๊ทธ ๋‚ฎ์€ ๋ฒ„์ „์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„์ „์ด๋ฏ€๋กœ ์ปดํŒŒ์ผ์ด๋ผ๋Š” ๋‹จ์–ด๋ฅผ ์“ฐ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, c, c++, java์—๋งŒ ์‚ฌ์šฉํ•˜๋Š” ์ปดํŒŒ์ผ์ด๋ผ๋Š” ๋‹จ์–ด์— ์ต์ˆ™ํ•œ ์‚ฌ๋žŒ์€ ์ปดํŒŒ์ผ๋Ÿฌ ๋Œ€์‹  "ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ"๋ผ๊ณ  ํ•˜๋Š” ์‚ฌ๋žŒ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์šฐ๋ฆฌ๊ฐ€ create react app์œผ๋กœ ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ ์•„์ง ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐ›์•„๋“œ๋ฆฌ์ง€ ๋ชปํ•˜๋Š” ๊ฐ์ข… ์ตœ์‹  ๋ฉ”์„œ๋“œ ๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. create react app์—์„œ๋Š” ์ด๋ฏธ Babel ์„ค์ •์ด ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋Š” ๋ฒ„์ „์„ ๊ณ ๋ คํ•˜์ง€ ์•Š๊ณ  ๋งˆ์Œ๋Œ€๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ์ด์ฃ !

๋ฐ”๋ฒจ๊ณผ ๊ด€๋ จ๋œ ํ•„์ˆ˜ module


  • babel-loader: ๋ฐ”๋ฒจ๊ณผ ์›นํŽ™์ด ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€
  • @babel/core: babel๋กœ ์ปดํŒŒ์ผํ•ด์„œ ๊ฒฐ๊ณผ๋ฌผ ํŒŒ์ผ์ด ๋‚˜์˜ค๋„๋ก babel๊ด€๋ จํ•œ ํ•ต์‹ฌ ๋ชจ๋“ˆ
  • @babel/preset-env: ES2015?6?7 ๋“ฑ ์–ด๋–ค ๋ฒ„์ „์„ ์“ธ์ง€์— ๊ด€ํ•œ ๋ชจ๋“ˆ
  • @babel/preset-react: jsx ๋ฅผ js๋กœ!

0๊ฐœ์˜ ๋Œ“๊ธ€