์ง๋ ์คํ๋ฒ ์ค ์์ ์์ ๋ฃจํธ ํด๋์ favicon.ico ๋ผ๋ icon ํ์ผ์ด ์กด์ฌํ๋ฉด ๋ฐ๋ก link ํ๊ทธ๋ฅผ ํตํด ์ฐ๊ฒฐํด์ฃผ์ง ์์๋
์๋์ ์ผ๋ก favicon์ผ๋ก ์ธ์์ ํ๋ค๊ณ ๋ฐฐ์ ๋ค.
ํ์ง๋ง ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด npm run dev๋ฅผ ํตํด ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ด์ด์ ํ์ธํด๋ณธ ๊ฒฐ๊ณผ ๋ฃจํธ ํด๋์ favicon.ico ํ์ผ์ด ์กด์ฌํจ์๋ favicon์ผ๋ก ์ธ์๋์ง๊ฐ ์์๋ค.
vs code์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ธ open with live server๋ฅผ ํตํด ์๋ฒ๋ฅผ ์ด์ด์ ํ์ธํ์ ๋๋ ์ ์ธ์์ด ๋์๋๋ฐ num run dev๋ฅผ ํตํด ํ์ธ ํ ๊ฒฐ๊ณผ๋ ์ ๋ค๋ฅผ๊น??
parcel bundler๋ฅผ ํตํด ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ด๊ฑฐ๋ ์ ํํ๋ฅผ ์ํค๊ฒ ๋๋ฉด ์ฐ๋ฆฌ๊ฐ ์์ฑํ html, css, sass, js ํ์ผ ๋ฑ์ ๊ธฐ๋ณธ์ผ๋ก dist๋ผ๋ ํด๋์ ์๋ก ํ์ผ์ ๋ง๋ค์ด์ dist ํด๋ ์์ ์๋ ํ์ผ์ ์คํ์์ผ์ ์๋ฒ๋ฅผ ์ด๊ฒ ๋๋ค.
์ฆ, npm run dev๋ฅผ ํ๊ฒ ๋๋ฉด dist ํด๋ ์์ ์๋ index.html ํ์ผ์ ์คํ์์ผ์ ์น ํ์ด์ง๋ฅผ ์ด๊ฒ ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ dist ํด๋ ๋ด์ favicon.ico ๊ฐ ์์ผ๋ฉด favicon์ด ์๋์ผ๋ก ์ธ์๋์ง ์๋๋ค๋ ๋ป์ด๋ค.
๊ทธ๋ ๋ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น??
๋จ์ํ๊ฒ favicon.ico ํ์ผ์ dist ํด๋์์ ๋ฃ์ด์ฃผ๋ฉด ๋์ง๋ง
distํด๋๋ parcel ๋ฒ๋ค๋ฌ์ ๊ฐ๋ฐ ์๋ฒ ์คํ์ ํตํด์ ์๋กญ๊ฒ ์์ฑํ๊ณ ์ง์ธ ์๋ ์์ด์ผ ํ๊ธฐ ๋๋ฌธ์
์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ํ์ผ์ ์ง์ ํด๋์ ๋ฃ๋ ๊ฒ์ ์ข์ ํ๋์ ์๋๋ค.
ํด๋นํ๋ ํ์ผ์ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ด๊ฑฐ๋ ์ ํํ๋ฅผ ์ํฌ ๋ dist ํด๋๋ก ์๋์ผ๋ก ๋ฃ์ด์ค ์ ์๋ ํจํค์ง์ ๋์์ ๋ฐ์ ์ ์๋ค.
parcel plugin static files copy ๋ผ๊ณ ๊ฒ์ํด์ npmjs ์ฌ์ดํธ๋ฅผ ์ฝ์ด๋ณด์.
npm i -D parcel-plugin-static-files-copy ๋ผ๊ณ ํฐ๋ฏธ๋์ ์ ๋ ฅํ์ฌ ํ๋ฌ๊ทธ์ธ์ ์ค์นํ ํ,
"staticFiles"๋ผ๋ property ๋ด์ object ํ์์ผ๋ก "staticPath" ์์ฑ์ ๊ฐ์ผ๋ก ์ด๋์ํฌ ํ์ผ์ด ๋ค์ด์๋ ํด๋ ์ด๋ฆ์ ์ค์ ํ๋ค. ๋๋ static์ด๋ผ๋ ํด๋๋ฅผ ์ง์ ํ๊ธฐ ๋๋ฌธ์, static ํด๋ ๋ด์ favicon.ico ํ์ผ์ ๋ฃ์ด๋๋ฉด
parcel bundler๋ฅผ ํตํด ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ด๊ฑฐ๋ ์ ํํ๋ฅผ ์ํฌ ๋ ํ์ผ์ด ์๋์ ์ผ๋ก dist ํด๋ ๋ด์ ๋ณต์ฌ๋๋ค.
์ด๋ ๊ฒ ์ค์ ํ ํ, npm run dev๋ฅผ ํตํด ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ด์ด๋ณธ ๊ฒฐ๊ณผ ํ๋น์ฝ์ด ์ ์ธ์๋์ด ์ ์ฉ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
'๊ฐ๋ฐ > HTML, CSS, JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
autoprefixer (0) | 2023.02.14 |
---|---|
๋ฒ๋ค๋ฌ ๊ฐ์ (0) | 2023.02.13 |
JavaScript Essentials (0) | 2023.02.05 |
Type annotation (0) | 2023.02.04 |
BEM (0) | 2023.01.13 |