5. Parcel & ESLint
Last updated
Last updated
๐ฆ ๋ฒ๋ค๋ฌ
์์กด์ฑ์ด ์๋ ๋ชจ๋ ์ฝ๋๋ฅผ ํ๋(๋๋ ์ฌ๋ฌ ๊ฐ)์ ํ์ผ๋ก ๋ง๋ค์ด์ฃผ๋ ๋๊ตฌ ์ง๊ธ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ํ๋ ES Modules์ ํ์ค์ธ import, export ๋ฑ์ด ์์ ์๋ ๋ฏธ์ง์ ํ์ผ์ ํ๋๋ก ํฉ์ณ์ฃผ๋ ์์ ์ด ํ์ โ ๋ฒ๋ค๋ง
๋น๋(build)๋ ์์ค ์ฝ๋ ํ์ผ์ ์ปดํจํฐ๋ ํด๋ํฐ์์ ์คํํ ์ ์๋ ๋ ๋ฆฝ ์ํํธ์จ์ด ๊ฐ๊ณต๋ฌผ๋ก ๋ณํํ๋ ๊ณผ์ ๋๋ ๊ทธ ๊ฒฐ๊ณผ๋ฌผ ์ฝ๋ ํ์ผ์ด ์คํ ์ฝ๋๋ก ๋ณํ๋๋ ์ปดํ์ผ ๊ณผ์ ์ด ํต์ฌ
The zero configuration build tool Zero Configuration : ํน๋ณํ ์ค์ ์์ด ๋ฐ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ ๋น๋ ๋๊ตฌ
์ต์ ๋ฒ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด, ์์ ๋ฒ์ ์ JS๋ฅผ ์๋ ๋ฒ์ ์ผ๋ก ๋ณํํด์ฃผ๋
ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํ
๋ด๋ถ์ ์ผ๋ก SWC๋ฅผ ์ฌ์ฉํด ๊ธฐ์กด ๋๊ตฌ๋ณด๋ค ๋น ๋ฆ
cf. โก๏ธ ES Module, ๋ฅผ ์ ๊ทน ํ์ฉํ๋ ๋ ๋งค์ฐ ๋น ๋ฆ
package.json
ํ์ผ์ source ์์ฑ ์ถ๊ฐ์๋ npx parcel index.html --port 8080
๋ฅผ ์
๋ ฅํ๋ฉด ์ํ๋ ํฌํธ๋ก ์๋ฒ๋ฅผ ์ด ์ ์์
๋งค๋ฒ ์น๊ธฐ ๋ฒ๊ฑฐ๋กญ๊ธฐ ๋๋ฌธ์ "source": "./index.html",
์ค์ ์ ์ถ๊ฐ
โ npx parcel --port 8080
๋ง ์
๋ ฅํด๋ ๋จ
static ํด๋์ ํ์ผ์ ์ ์ ํ์ผ๋ก Serving ๊ฐ๋ฅ(์ด๋ฏธ์ง ๋ฑ Assets)
.parcelrc
ํ์ผ
๊ธฐ๋ณธ์ผ๋ก ์ฌ์ฉํ๋ ํด๋ ์ด๋ฆ์ ๋ฐ๊ฟ ์ ์์ง๋ง static
์ผ๋ก ์ค์
static ํ์ผ์ ๋ณต์ฌํด์ ์ฒ๋ฆฌํด์ค
./dist ํด๋๊ฐ ์์ฑ๋จ
./dist๋ฅผ ์คํ
๋ค์ ๊ฐ๋ฐํ๊ณ ์ถ์ผ๋ฉด ํด๋ ์ญ์ ํ ๋ค์ ์์ฑํ๋ฉด ๋จ
cf. ๋์ ๋ถ์ : ์คํ ์ค์ธ ํ๋ก๊ทธ๋จ์ ๋ถ์ํ๋ ๊ฒ
๐งถ lint [๋ช ์ฌ]
๋ฆฐํธ(๋ถ๋์ฉ์ผ๋ก ์ฐ๋ ๋ถ๋๋ฌ์ด ๋ฉด์ง๋ฌผ์ ์ผ์ข )
(์ง๋ฌผ ์ง์กฐ ๋ ๋น์ด์ ธ ๋์จ) ๋ณดํธ๋ผ๊ธฐ์ค
๋ณดํ
TSlint๊ฐ ๋ฐ๋ก ์์์ง๋ง ESLint์ ํก์๋จ
์ ์ฌ์ ๋ฌธ์ ๋ฐ๊ฒฌ
๋ฒ ์คํธ ํ๋ํฐ์ค ์ถ์ฒ โ ์ต์ ํธ๋ ๋๋ฅผ ํ์ตํ๋๋ฐ ํ์ฉ ๊ฐ๋ฅ
Ex. const { value } = data;
.vscode
ํด๋ ์์ฑ ํ settings.json
ํ์ผ ์ถ๊ฐ
"source.fixAll.eslint": true
: JS/TS ํ์ผ์ ์ ์ฅํ ๋๋ง๋ค ESLint๋ฅผ ์คํํ๊ณ fixํ๋๋ก ์ค์
"trailing-spaces.trimOnSave": true
: ๋ถํ์ํ ๊ณต๋ฐฑ์ ์ญ์
npm run lint && npm run check
๋ฆฐํธ fix & ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ ์ฒดํฌ
Rust๋ก ๋ง๋ ํ์ ์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ
: config๊ฐ ์๋ ์๋ฒ
์ฝ๋๋ฅผ ๋ถ์ํด ํ๋ก๊ทธ๋จ ์ค๋ฅ, ๋ฒ๊ทธ, ์คํ์ผ ์ค๋ฅ ๋ฑ์ ํ์๋ฅผ ๋ฌ์๋๊ธฐ ์ํ ๋๊ตฌ โ ์คํ ์์ด ํ๋ก๊ทธ๋จ์ ๋ถ์, ์๊ฐ์ด ์งง์
์คํ์ผ ํต์ผ โ ์ฝ๋ฉ ์ปจ๋ฒค์ () ์ ์ง ๊ฐ๋ฅ