๋ ๋ก ๋ณต์กํด์ง๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ํ๊ณ์์
NPM๊ณผ Webpack์ ๋น ๋ฅด๊ฒ ๋ฐฐ์์ โจ
ํ๋ก ํธ์๋ ๋น๋ ์์คํ
์ ํต์ฌ,
NPM๊ณผ Webpack โ
์ค๋ฌด์์ ์
๋ฌธ์์๊ฒ ๊ฐ์ฅ ์ด๋ ต๋ค๊ณ ๋ค ํ๋ NPM๊ณผ Webpack์ ์์์ผ ํผ์์ ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ ์ ์์ด์. ๋ชจ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ ๋ ๊ผญ ํ์ํ ๋ ๊ฐ๋
์ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๋ฐฐ์๋ด์.
์ ์ ๋ง์ ๊ธฐ์
์์ ์ต์ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๊ณ ์๊ณ , ์ด ์ค์ฌ์๋ NPM๊ณผ Webpack์ ์ด์ฉํ ํ๋ก ํธ์๋ ๋น๋ ์์คํ
์ด ์๋ ๊ฒ์ด์ฃ . ๋ง์ ๊ธฐ์
๋ค์ด ์ด ๋น๋ ์์คํ
์ ์ ํํ๊ฒ ์ดํดํ๊ณ ์ค์ค๋ก ๊ตฌ์ถํ ์ ์๋ ๊ฐ๋ฐ์๋ฅผ ์ฐพ๊ณ ์๊ธฐ์, ์ด ๊ฐ์๋ฅผ ํตํด ์ฐจ๋ณํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ ๊ฑฐ์์.
์ด ๊ฐ์๋ง์ ํน์ง โ๏ธ
- NPM๊ณผ ์นํฉ์ ์ด๋์๋ ํ์ตํ๊ณ ๋ฐฐ์ธ ์ ์๊ฒ ์น ์ฌ์ดํธ๋ก ์ ์๋ ๊ต์์ ์ ๊ณตํฉ๋๋ค.
(๊ฐ์ ๊ต์์ PWA๋ก ์ ์๋์ด ์์ด, ๋ชจ๋ฐ์ผ์์๋ ์ค์น ํ ํธํ๊ฒ ๋ณด์ค ์ ์์ต๋๋ค.)
- ํ์ฌ์์ ์๊ฐ์ ์ซ๊ฒจ ๋น ๋ฅด๊ฒ ํ์ตํ์
์ผ ํ๋ ์ค๋ฌด์ ๋ถ๋ค, ์นํฉ์ ์ฒ์ ์ ํ๋ ๋ถ๋ค ๋ชจ๋๊ฐ ๋ง์กฑํ ์ ์๋๋ก ์ด๋ก ์ค๋ช
์ ์งง๊ฒ, ์ค์ต์ ๊ฐ๋จํ๋ฉด์๋ ์์ธํ๊ฒ ์ ์ํ์ต๋๋ค.
๊ฐ์์์ ๋ค๋ฃจ๋ ํด ๐จ
- VSCode
- Node.js LTS ๋ฒ์ (v10 ์ด์)
- NPM
- Git
์์
์์๋ VSCode๋ก ์งํํ์ง๋ง, ์ ํธํ์๋ ๊ฐ๋ฐ ํด์ด ์๋ค๋ฉด ๊ทธ๊ฑธ ์ฐ์
๋ ๋ฌด๋ฐฉํฉ๋๋ค.
์์๋๋ QnA ๐๐ปโโ๏ธ
Q. ๋น๋ ์์คํ
, ๋ชจ๋, ๋ฒ๋ค๋ง ๋ฑ์ ์ฉ์ด ํ๋๋ ๋ชจ๋ฅธ๋๋ฐ ์ ๊ฐ ๋ค์ ์ ์์๊น์?
๋ฒ๋ค๋ง์ ์ฌ๋ฌ ๊ฐ์ ํ์ผ์ ํ๋๋ก ํฉ์น๋ ๊ฒ์ด๊ณ , ๋น๋ ์์คํ
์ ๋ด๊ฐ ๋ง๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ฌ์ฉ์์๊ฒ ๋ฐฐํฌํ ์ ์๋ ํํ๋ก ๋ณํํ๋ ์ฒด๊ณ๋ฅผ ์๋ฏธํฉ๋๋ค. ์ด๋ ค์ธ ์ ์๋ ์ฉ์ด๋ค์ ๋น์ ๊ณต์, ์
๋ฌธ์ ๊ด์ ์์ ์น์ ํ๊ฒ ํ์ด์ ์ค๋ช
์ ๋๋ฆฌ๊ณ ์์ผ๋ ๊ฑฑ์ ํ์ง ๋ง์๊ณ ํธํ๊ฒ ๋ค์ด์ฃผ์ธ์.
์งํํ์๋ค๊ฐ ๋งํ๋ ๋ถ๋ถ๊ณผ ์ดํด๊ฐ ์๋๋ ๋ถ๋ถ์ ์ง์ ๊ฒ์ํ์ ๋จ๊ฒจ์ฃผ์๋ฉด ์์ธํ๊ณ ์น์ ํ๊ฒ ๋ต๋ณ ํด๋๋ฆฝ๋๋ค :)
Q. ์ด ๊ฐ์๋ง์ ํน๋ณํ ์ฅ์ ์ด ์์๊น์?
์ด ๊ฐ์๋ ์ต๋ํ ๊ฐ๋จํ๊ฒ ์ด๋ก ์ ์ค๋ช
ํ๊ณ ๋ฐ๋ก ์ค์ต์ ๊ฐ์ด ํด๊ฐ๋ฉด์ ๋ฐฐ์ ๋ ์ด๋ก ์ ์ค์ค๋ก ์ดํดํ๋ ๊ฐ์ข์
๋๋ค. ์ฅํฉํ ์ค๋ช
๋ณด๋ค๋ ์งง๊ณ ๊ฐ๊ฒฐํ ์ค๋ช
์ผ๋ก ๋น ๋ฅด๊ฒ ์ง์์ ์ ๋ฌํ ํ์ ์ค์ต ์ค์ฌ์ผ๋ก ๊ฐ๋
์ ์ ํํ ๋ฐฐ์๋ณด๋๋ก ํ ๊ฒ์. ์ง๊ธ ๋ฐ๋ก ์์ํด๋ณผ๊น์?
Q. ์ด ๊ฐ์๋ฅผ ์์ํ๊ฒ ๋ ๊ณ๊ธฐ๊ฐ ์๋์?
3๋
์ ๋ถํฐ ์นํฉ ์คํ๋ผ์ธ ๊ฐ์ข๋ฅผ ์งํํด์์ต๋๋ค. ์ด ๊ฐ์ข๋ 500๋ช
์ด ๋๋ ์คํ๋ผ์ธ ์๊ฐ์๋ค์ ํผ๋๋ฐฑ๊ณผ ์
๋ฌธ์์ ๊ด์ ์์ ์๋กญ๊ฒ ๊ตฌ์ฑํ ๊ฐ์ข์
๋๋ค. ์นํฉ ์ค์ ๊ณผ ํ๋ฐํธ์๋ ๋น๋ ์์คํ
์ด ๋ ์ด์ ์ด๋ ต๊ฒ ๋๊ปด์ง์ง ์๊ฒ ๋์๋๋ฆฌ๊ฒ ์ต๋๋ค!
์ฐ๊ด ๋ก๋๋งต ๐
์ง์๊ณต์ ์ ์๊ฐ ๐จโ๐ซ
์บกํดํ๊ต
"์ธํ๋ฐ์ด ๋ง๋ ์ฌ๋" ์ธํฐ๋ทฐ
โ๊ฐ์ ์์ต์ผ๋ก Vue.js ์คํ์์ค +
์ํ์ฝ๋ฉ์ ํ์ํฉ๋๋ค ๐โ
๊ฐ์ ํ ์ธ์ ์ ๊ณตํฉ๋๋ค!
์๋ฆฌ์ฆ "Vue.js๋ก ์์ฑํ๋ ํ๋ก ํธ์๋
๊ฐ๋ฐ์ ๋ก๋๋งต" 25% ํ ์ธ (ํด๋ฆญ)
์์
์ด ์๋ ์คยท๊ณ ๋ฑํ์,
๋ํ์์ ์ํ ํ์ 50% ํ ์ธ (ํด๋ฆญ)