๐Ÿ“ฆ ์• ์…‹

Parcel์€ ์• ์…‹(assets)์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ์• ์…‹์€ ์–ด๋–ค ํŒŒ์ผ๋กœ๋“  ํ‘œํ˜„๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค๋งŒ, Parcel์€ JavaScript, CSS, ๊ทธ๋ฆฌ๊ณ  HTML ํŒŒ์ผ๊ณผ ๊ฐ™์€ ํŠน์ • ์œ ํ˜•์˜ ์• ์…‹์„ ํŠน๋ณ„ ์ง€์› ํ•ฉ๋‹ˆ๋‹ค. Pacel์€ ์ด ํŒŒ์ผ๋“ค ์•ˆ์˜ ์ฐธ์กฐ์—์„œ ์ž๋™์œผ๋กœ ์˜์กด์„ฑ์„ ๋ถ„์„ํ•˜๊ณ  ์ถœ๋ ฅ ๋ฒˆ๋“ค์— ํฌํ•จ์‹œํ‚ต๋‹ˆ๋‹ค. ๋น„์Šทํ•œ ์œ ํ˜•์˜ ์• ์…‹๋“ค์€ ๊ฐ™์€ ์ถœ๋ ฅ ๋ฒˆ๋“ค๋กœ ํ•จ๊ป˜ ๊ทธ๋ฃนํ™” ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ๋‹ค๋ฅธ ์œ ํ˜•์˜ ์• ์…‹์„ ์ž„ํฌํŠธ ํ–ˆ๋‹ค๋ฉด (์˜ˆ๋ฅผ ๋“ค๋ฉด, JS ํŒŒ์ผ์—์„œ CSS ํŒŒ์ผ์„ ์ž„ํฌํŠธ ํ–ˆ๋‹ค๋ฉด), ์ž์‹ ๋ฒˆ๋“ค์ด ๋งŒ๋“ค์–ด์ง€๊ณ  ๋ถ€๋ชจ ๋ฒˆ๋“ค์—๊ฒŒ ์ฐธ์กฐ๋ฅผ ๋‚จ๊น๋‹ˆ๋‹ค. ํ›„์† ์„น์…˜์—์„œ ์ด์— ๋Œ€ํ•ด ์„ค๋ช…ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

JavaScript

์›น ๋ฒˆ๋“ค๋Ÿฌ์— ์žˆ์–ด JavaScript๋Š” ๊ฐ€์žฅ ์ „ํ†ต์ ์ธ ํŒŒ์ผ ์œ ํ˜•์ž…๋‹ˆ๋‹ค. ํŒŒ์ผ ์ž„ํฌํŒ…์„ ์œ„ํ•ด Parcel์€ CommonJS์™€ ES6 ๋ชจ๋“ˆ ๊ตฌ๋ฌธ์„ ๋ชจ๋‘ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋น„๋™๊ธฐ์ ์ธ ๋ชจ๋“ˆ ๋กœ๋“œ๋ฅผ ์œ„ํ•ด ๋‹ค์ด๋‚˜๋ฏน import() ํ•จ์ˆ˜ ๊ตฌ๋ฌธ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด์— ๋Œ€ํ•ด์„  ์ฝ”๋“œ ๋ถ„ํ• ์„น์…˜์—์„œ ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

// CommonJS ๊ตฌ๋ฌธ์œผ๋กœ ๋ชจ๋“ˆ ์ž„ํฌํŠธ
const dep = require('./path/to/dep');

// ES6 import ๊ตฌ๋ฌธ์œผ๋กœ ๋ชจ๋“ˆ ์ž„ํฌํŠธ
import dep from './path/to/dep';

JavaScript ํŒŒ์ผ์— JavaScript๊ฐ€ ์•„๋‹Œ ์• ์…‹ ๋˜ํ•œ ์ž„ํฌํŠธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. CSS๋‚˜ ์ด๋ฏธ์ง€ ํŒŒ์ผ๋„ ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ํŒŒ์ผ๋“ค์„ ์ž„ํฌํŠธ ํ•  ๋•Œ, ๋‹ค๋ฅธ ๋ฒˆ๋“ค๋Ÿฌ๋“ค์ฒ˜๋Ÿผ ์ธ๋ผ์ธํ™” ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ , ๊ทธ ํŒŒ์ผ์˜ ๋ชจ๋“  ์˜์กด ํ•ญ๋ชฉ๊ณผ ํ•จ๊ป˜ ๋ณ„๋„์˜ ๋ฒˆ๋“ค(์˜ˆ๋กœ CSS ํŒŒ์ผ)์†์— ์œ„์น˜ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. CSS Modules์„ ์‚ฌ์šฉํ•  ์‹œ, ์ถ”์ถœ ๋œ ํด๋ž˜์Šค๋“ค์€ JavaScript ๋ฒˆ๋“ค์— ์œ„์น˜ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์• ์…‹ ์œ ํ˜•์€ ์ถœ๋ ฅ ํŒŒ์ผ์— ๋Œ€ํ•œ URL์„ JavaScript ๋ฒˆ๋“ค์— ๋‚ด๋ณด๋ƒ…๋‹ˆ๋‹ค. ์ด๋กœ์จ ๊ทธ ํŒŒ์ผ๋“ค์— ๋Œ€ํ•œ ์ฐธ์กฐ๋ฅผ ์ฝ”๋“œ์•ˆ์— ๊ฐ–๊ณ  ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

// CSS ํŒŒ์ผ ์ž„ํฌํŠธ
import './test.css';

// CSS modules๋กœ CSS ํŒŒ์ผ ์ž„ํฌํŠธ
import classNames from './test.css';

// ์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ URL์„ ์ž„ํฌํŠธ
import imageURL from './test.png';

๋งŒ์•ฝ ํŒŒ์ผ์„ ์ฐธ์กฐ URL์ด ์•„๋‹Œ ์ธ๋ผ์ธ์œผ๋กœ JavaScript ๋ฒˆ๋“ค์— ํฌํ•จ์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด, Node.js์˜ fs.readFileSync API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ด ๋•Œ URL์€ ์ •์ ์œผ๋กœ ๋ถ„์„ ๊ฐ€๋Šฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ง์ธ ์ฆ‰, ๊ทธ ์•ˆ์— ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์—†๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค. (๋‹จ, __dirname ์™€ __filename ๋Š” ์˜ˆ์™ธ์ž…๋‹ˆ๋‹ค.)

import fs from 'fs';

// ๋‚ด์šฉ์„ ๋ฌธ์ž์—ด ๊ฐ’์œผ๋กœ ์ฝ์Šต๋‹ˆ๋‹ค.
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8');

// ๋‚ด์šฉ์„ ๋ฒ„ํผ๋กœ ์ฝ์Šต๋‹ˆ๋‹ค.
const buffer = fs.readFileSync(__dirname + '/test.png');

CSS

CSS ์• ์…‹์€ JavaScript๋‚˜ HTML ํŒŒ์ผ๋กœ๋ถ€ํ„ฐ ์ž„ํฌํŠธ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. CSS์• ์…‹์—๋Š” @import ๊ตฌ๋ฌธ์„ ํ†ตํ•ด ์ฐธ์กฐ๋˜๋Š” ์˜์กด์„ฑ๊ณผ url() ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ฐธ์กฐ๋˜๋Š” ์ด๋ฏธ์ง€, ํฐํŠธ๋“ฑ์ด ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. @import๋œ ๋‹ค๋ฅธ CSS ํŒŒ์ผ์€ ๋™์ผํ•œ CSS ๋ฒˆ๋“ค์— ์ธ๋ผ์ธ์œผ๋กœ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. url()์ฐธ์กฐ๋Š” ๊ทธ๊ฒƒ๋“ค์˜ ์ถœ๋ ฅ ํŒŒ์ผ ์ด๋ฆ„์œผ๋กœ ์žฌ์ž‘์„ฑ ๋ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ํŒŒ์ผ ์ด๋ฆ„์€ ํ˜„์žฌ CSS ํŒŒ์ผ๊ณผ ๊ด€๋ จ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

/* ๋‹ค๋ฅธ CSS ํŒŒ์ผ ์ž„ํฌํŠธ */
@import './other.css';

.test {
  /* ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ฐธ์กฐ */
  background: url('./images/background.png');
}

ํ‰๋ฒ”ํ•œ CSS ์™ธ์— LESS, SASS, Stylus ๊ฐ™์€ ๋‹ค๋ฅธ ์ปดํŒŒ์ผ-ํˆฌ-CSS ์–ธ์–ด ์—ญ์‹œ ์ง€์›ํ•˜๋ฉฐ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

SCSS

SCSS๋ฅผ ์ปดํŒŒ์ผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” node-sass ๋ชจ๋“ˆ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ ๋ช…๋ น์–ด๋กœ ์„ค์น˜ํ•ด์ฃผ์„ธ์š”.

npm install node-sass

node-sass๋ฅผ ์„ค์น˜ํ–ˆ๋‹ค๋ฉด ์ด์ œ SCSS ํŒŒ์ผ์„ JavaScript ํŒŒ์ผ์—์„œ import ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import './custom.scss'

SCSS์—์„œ @import ๊ตฌ๋ฌธ์œผ๋กœ ํฌํ•จ๋œ ์˜์กด์„ฑ๋„ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.

HTML

HTML ์• ์…‹์€ ์ฃผ๋กœ Parcel ์ง„์ž… ํŒŒ์ผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ JavaScript ํŒŒ์ผ์— ์˜ํ•ด์„œ, ์˜ˆ๋กœ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ๋งํฌ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ์œ„ํ•ด ์ฐธ์กฐ ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋ฆฝํŠธ, ์Šคํƒ€์ผ, ๋ฏธ๋””์–ด, ๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ HTML ํŒŒ์ผ์˜ URL์€ ์œ„์—์„œ ์„ค๋ช…ํ•œ๊ฒƒ ์ฒ˜๋Ÿผ ์ถ”์ถœ๋˜๊ณ  ์ปดํŒŒ์ผ๋ฉ๋‹ˆ๋‹ค. ์ฐธ์กฐ๋Š” HTML ์•ˆ์—์„œ ์žฌ์ž‘์„ฑ ๋จ์œผ๋กœ์จ ์ •ํ™•ํ•œ ์ถœ๋ ฅ ํŒŒ์ผ๋กœ ์—ฐ๊ฒฐ ๋ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ํŒŒ์ผ ์ด๋ฆ„์€ ํ˜„์žฌ์˜ HTML ํŒŒ์ผ๊ณผ ๊ด€๋ จ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

<html>
<body>
  <!-- ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ฐธ์กฐ -->
  <img src="./images/header.png">

  <a href="./other.html">๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์—ฐ๊ฒฐ</a>

  <!-- ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค ์ž„ํฌํŠธ -->
  <script src="./index.js"></script>
</body>
</html>