๐Ÿš€ ์‹œ์ž‘ํ•˜๊ธฐ

Parcel[ํŒŒ์„ค, /parsษ™l/]์€ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์—์„œ ์ฐจ์ด๋ฅผ ๋Š๋‚„์ˆ˜ ์žˆ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฒˆ๋“ค๋Ÿฌ ์ž…๋‹ˆ๋‹ค. ๋ฉ€ํ‹ฐ์ฝ”์–ด ํ”„๋กœ์„ธ์‹ฑ์œผ๋กœ ๋ถˆ๊ฝƒ ํŠ€๊ฒŒ ๋น ๋ฅธ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜๊ณ  ๊ทธ ์–ด๋–ค ์„ค์ •๋„ ์š”๊ตฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋จผ์ € Yarn์ด๋‚˜ npm์œผ๋กœ Parcel์„ ์„ค์น˜ํ•˜์„ธ์š”.

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

๊ทธ ๋‹ค์Œ, package.jsonํŒŒ์ผ์„ ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ† ๋ฆฌ์— ๋งŒ๋“œ์„ธ์š”.

yarn init -y

๋˜๋Š”

npm init -y

Parcel์€ ์–ด๋–ค ์œ ํ˜•์˜ ํŒŒ์ผ์ด๋ผ๋„ ์ง„์ž…์ ์œผ๋กœ ์ทจํ•  ์ˆ˜ ์žˆ์ง€๋งŒ HTML์ด๋‚˜ JavaScript ํŒŒ์ผ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ HTML ํŒŒ์ผ ๋‚ด์— ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ๋ฉ”์ธ JavaScript ํŒŒ์ผ์„ ์—ฐ๊ฒฐ ํ–ˆ๋‹ค๋ฉด, Parcel์€ ์ด ๋˜ํ•œ ์ฒ˜๋ฆฌ ํ•  ๊ฒƒ์ด๊ณ , ์ถœ๋ ฅ ํŒŒ์ผ๋กœ์˜ URL ์ฐธ์กฐ๋ฅผ ๊ต์ฒดํ•  ๊ฒ๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ, index.html๊ณผ index.jsํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค.

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>
console.log("hello world");

Parcel์€ ํŒŒ์ผ ๋ณ€ํ™”๋ฅผ ์ž๋™์œผ๋กœ ๋‹ค์‹œ ๋นŒ๋“œ(rebuild) ํ•˜๊ณ  ํ•ซ ๋ชจ๋“ˆ ๋ฆฌํ”Œ๋ ˆ์ด์Šค๋จผํŠธ๋ฅผ ์ง€์›ํ•˜๋Š” ๋‚ด์žฅ ๊ฐœ๋ฐœ์šฉ ์„œ๋ฒ„๊ฐ€ ์žˆ์–ด ๋น ๋ฅธ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•ด ์ง‘๋‹ˆ๋‹ค. ๊ทธ์ € ์ง„์ž… ํŒŒ์ผ์„ ์ง€์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค:

parcel index.html

์ด์ œ ๋ธŒ๋ผ์šฐ์ €์—์„œ http://localhost:1234/ ์— ์ ‘์†ํ•˜์„ธ์š”. ๊ธฐ๋ณธ ํฌํŠธ๋ฒˆํ˜ธ๋ฅผ -p <port number> ์˜ต์…˜์œผ๋กœ ๋ฎ์–ด ์“ธ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณธ์ธ ์†Œ์œ ์˜ ์„œ๋ฒ„๊ฐ€ ์—†๊ฑฐ๋‚˜ ์™„์ „ํžˆ ํด๋ผ์ด์–ธํŠธ์—์„œ๋งŒ ๋ Œ๋”๋˜๋Š” ์•ฑ์ด๋ผ๋ฉด ๊ฐœ๋ฐœ์šฉ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. ๋งŒ์•ฝ ๋ณธ์ธ ์†Œ์œ ์˜ ์„œ๋ฒ„๊ฐ€ ์žˆ๋‹ค๋ฉด watch ๋ชจ๋“œ๋กœ Parcel์„ ๊ตฌ๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์—ญ์‹œ ํŒŒ์ผ ๋ณ€ํ™”๋ฅผ ์ž๋™ ๋ฆฌ๋นŒ๋“œ(rebuild) ํ•˜๊ณ  ํ•ซ ๋ชจ๋“ˆ ๋ฆฌํ”Œ๋ ˆ์ด์Šค๋จผํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์›น ์„œ๋ฒ„๋ฅผ ์‹œ๋™์‹œํ‚ค์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

parcel watch index.html

ํ”„๋กœ๋•์…˜์„ ์œ„ํ•œ ๋นŒ๋“œ๋ฅผ ํ•  ์ค€๋น„๊ฐ€ ๋˜์—ˆ๋‹ค๋ฉด, build ๋ชจ๋“œ๋กœ ๊ฐ์‹œ ๊ธฐ๋Šฅ์„ ๋„๊ณ  ํ•œ ๋ฒˆ๋งŒ ๋นŒ๋“œ ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๋•์…˜ ์„น์…˜์—์„œ ๋ณด๋‹ค ์ž์„ธํ•œ ์‚ฌํ•ญ๋“ค์„ ํ™•์ธํ•ด ๋ณด์„ธ์š”.