Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์›นํŒฉ

1000๋ช…์ด ์„ ํƒํ•œ ์›นํŒฉ ๊ฐ•์˜! ์ƒˆ๋กญ๊ฒŒ ๋‚˜์˜จ ์›นํŒฉ ๋ฒ„์ „์— ๋งž์ถฐ ๋ฆฌ๋‰ด์–ผ๋œ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ์‹ค์Šต ์ค‘์‹ฌ์œผ๋กœ ๋” ์‰ฝ๊ฒŒ ์›นํŒฉ์„ ๋ฐฐ์›Œ๋ณด์„ธ์š” :)

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Front-End

  • Webpack

  • NPM

  • ํ”„๋ŸฐํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ

  • ES6 Import์™€ Export ๋ฌธ๋ฒ•

๋‚ ๋กœ ๋ณต์žกํ•ด์ง€๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„์—์„œ
NPM๊ณผ Webpack์„ ๋น ๋ฅด๊ฒŒ ๋ฐฐ์›Œ์š” โœจ

ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ์˜ ํ•ต์‹ฌ,
NPM๊ณผ Webpack โœŒ

์‹ค๋ฌด์ž์™€ ์ž…๋ฌธ์ž์—๊ฒŒ ๊ฐ€์žฅ ์–ด๋ ต๋‹ค๊ณ ๋“ค ํ•˜๋Š” NPM๊ณผ Webpack์„ ์•Œ์•„์•ผ ํ˜ผ์ž์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์–ด์š”. ๋ชจ๋˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ ๊ผญ ํ•„์š”ํ•œ ๋‘ ๊ฐœ๋…์„ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๋ฐฐ์›Œ๋ด์š”.

์ ์  ๋งŽ์€ ๊ธฐ์—…์—์„œ ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ , ์ด ์ค‘์‹ฌ์—๋Š” NPM๊ณผ Webpack์„ ์ด์šฉํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ์ด ์žˆ๋Š” ๊ฒƒ์ด์ฃ . ๋งŽ์€ ๊ธฐ์—…๋“ค์ด ์ด ๋นŒ๋“œ ์‹œ์Šคํ…œ์„ ์ •ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์Šค์Šค๋กœ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋ฅผ ์ฐพ๊ณ  ์žˆ๊ธฐ์—, ์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์ฐจ๋ณ„ํ™”๋œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์žˆ์„ ๊ฑฐ์˜ˆ์š”.

์ด ๊ฐ•์˜๋งŒ์˜ ํŠน์ง• โœ๏ธ

  • NPM๊ณผ ์›นํŒฉ์„ ์–ด๋””์„œ๋‚˜ ํ•™์Šตํ•˜๊ณ  ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ฒŒ ์›น ์‚ฌ์ดํŠธ๋กœ ์ œ์ž‘๋œ ๊ต์•ˆ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
    (๊ฐ•์˜ ๊ต์•ˆ์€ PWA๋กœ ์ œ์ž‘๋˜์–ด ์žˆ์–ด, ๋ชจ๋ฐ”์ผ์—์„œ๋„ ์„ค์น˜ ํ›„ ํŽธํ•˜๊ฒŒ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)

  • ํšŒ์‚ฌ์—์„œ ์‹œ๊ฐ„์— ์ซ“๊ฒจ ๋น ๋ฅด๊ฒŒ ํ•™์Šตํ•˜์…”์•ผ ํ•˜๋Š” ์‹ค๋ฌด์ž ๋ถ„๋“ค, ์›นํŒฉ์„ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ๋ถ„๋“ค ๋ชจ๋‘๊ฐ€ ๋งŒ์กฑํ•  ์ˆ˜ ์žˆ๋„๋ก ์ด๋ก  ์„ค๋ช…์€ ์งง๊ฒŒ, ์‹ค์Šต์€ ๊ฐ„๋‹จํ•˜๋ฉด์„œ๋„ ์ž์„ธํ•˜๊ฒŒ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.


๊ฐ•์˜์—์„œ ๋‹ค๋ฃจ๋Š” ํˆด ๐Ÿ”จ

  1. VSCode
  2. Node.js LTS ๋ฒ„์ „ (v10 ์ด์ƒ)
  3. NPM
  4. Git

์ˆ˜์—…์—์„œ๋Š” VSCode๋กœ ์ง„ํ–‰ํ•˜์ง€๋งŒ, ์„ ํ˜ธํ•˜์‹œ๋Š” ๊ฐœ๋ฐœ ํˆด์ด ์žˆ๋‹ค๋ฉด ๊ทธ๊ฑธ ์“ฐ์…”๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค.


์˜ˆ์ƒ๋˜๋Š” QnA
๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ

Q. ๋นŒ๋“œ ์‹œ์Šคํ…œ, ๋ชจ๋“ˆ, ๋ฒˆ๋“ค๋ง ๋“ฑ์˜ ์šฉ์–ด ํ•˜๋‚˜๋„ ๋ชจ๋ฅธ๋Š”๋ฐ ์ œ๊ฐ€ ๋“ค์„ ์ˆ˜ ์žˆ์„๊นŒ์š”?

๋ฒˆ๋“ค๋ง์€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ์„ ํ•˜๋‚˜๋กœ ํ•ฉ์น˜๋Š” ๊ฒƒ์ด๊ณ , ๋นŒ๋“œ ์‹œ์Šคํ…œ์€ ๋‚ด๊ฐ€ ๋งŒ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์ฒด๊ณ„๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์–ด๋ ค์šธ ์ˆ˜ ์žˆ๋Š” ์šฉ์–ด๋“ค์„ ๋น„์ „๊ณต์ž, ์ž…๋ฌธ์ž ๊ด€์ ์—์„œ ์นœ์ ˆํ•˜๊ฒŒ ํ’€์–ด์„œ ์„ค๋ช…์„ ๋“œ๋ฆฌ๊ณ  ์žˆ์œผ๋‹ˆ ๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์‹œ๊ณ  ํŽธํ•˜๊ฒŒ ๋“ค์–ด์ฃผ์„ธ์š”.
์ง„ํ–‰ํ•˜์‹œ๋‹ค๊ฐ€ ๋ง‰ํžˆ๋Š” ๋ถ€๋ถ„๊ณผ ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ๋ถ€๋ถ„์€ ์งˆ์˜ ๊ฒŒ์‹œํŒ์— ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด ์ž์„ธํ•˜๊ณ  ์นœ์ ˆํ•˜๊ฒŒ ๋‹ต๋ณ€ ํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค :)

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?

์ด ๊ฐ•์˜๋Š” ์ตœ๋Œ€ํ•œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ด๋ก ์„ ์„ค๋ช…ํ•˜๊ณ  ๋ฐ”๋กœ ์‹ค์Šต์„ ๊ฐ™์ด ํ•ด๊ฐ€๋ฉด์„œ ๋ฐฐ์› ๋˜ ์ด๋ก ์„ ์Šค์Šค๋กœ ์ดํ•ดํ•˜๋Š” ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ์žฅํ™ฉํ•œ ์„ค๋ช…๋ณด๋‹ค๋Š” ์งง๊ณ  ๊ฐ„๊ฒฐํ•œ ์„ค๋ช…์œผ๋กœ ๋น ๋ฅด๊ฒŒ ์ง€์‹์„ ์ „๋‹ฌํ•œ ํ›„์— ์‹ค์Šต ์ค‘์‹ฌ์œผ๋กœ ๊ฐœ๋…์„ ์ •ํ™•ํžˆ ๋ฐฐ์›Œ๋ณด๋„๋ก ํ• ๊ฒŒ์š”. ์ง€๊ธˆ ๋ฐ”๋กœ ์‹œ์ž‘ํ•ด๋ณผ๊นŒ์š”?

Q. ์ด ๊ฐ•์˜๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋œ ๊ณ„๊ธฐ๊ฐ€ ์žˆ๋‚˜์š”?

3๋…„ ์ „๋ถ€ํ„ฐ ์›นํŒฉ ์˜คํ”„๋ผ์ธ ๊ฐ•์ขŒ๋ฅผ ์ง„ํ–‰ํ•ด์™”์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์ขŒ๋Š” 500๋ช…์ด ๋„˜๋Š” ์˜คํ”„๋ผ์ธ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ”ผ๋“œ๋ฐฑ๊ณผ ์ž…๋ฌธ์ž์˜ ๊ด€์ ์—์„œ ์ƒˆ๋กญ๊ฒŒ ๊ตฌ์„ฑํ•œ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ์›นํŒฉ ์„ค์ •๊ณผ ํ”„๋ŸฐํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ์ด ๋” ์ด์ƒ ์–ด๋ ต๊ฒŒ ๋А๊ปด์ง€์ง€ ์•Š๊ฒŒ ๋„์™€๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค!


์—ฐ๊ด€ ๋กœ๋“œ๋งต ๐ŸšŽ

Vue.js๋กœ ์™„์„ฑํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋กœ๋“œ๋งต
์บกํ‹ดํŒ๊ต๋‹˜์˜ ์‰ฝ๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ณ , ์ƒ์‚ฐ์ ์ธ Vue.js๋ฅผ ํ†ตํ•ด
์‹ค๋ฌด ์›น ๊ฐœ๋ฐœ์— ๋„์ „ํ•ด๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋œ ๋กœ๋“œ๋งต์ž…๋‹ˆ๋‹ค.
์ด ๊ฐ•์˜ ํฌํ•จ


์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ ๐Ÿ‘จโ€๐Ÿซ

์žฅ๊ธฐํšจ (์บกํ‹ดํŒ๊ต)

"์ธํ”„๋Ÿฐ์ด ๋งŒ๋‚œ ์‚ฌ๋žŒ" ์ธํ„ฐ๋ทฐ

โ€œ๊ฐ•์˜ ์ˆ˜์ต์œผ๋กœ Vue.js ์˜คํ”ˆ์†Œ์Šค +
์ƒํ™œ์ฝ”๋”ฉ์„ ํ›„์›ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜โ€

๊ฐ•์˜ ํ• ์ธ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!

์‹œ๋ฆฌ์ฆˆ "Vue.js๋กœ ์™„์„ฑํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ
๊ฐœ๋ฐœ์ž ๋กœ๋“œ๋งต" 25% ํ• ์ธ (ํด๋ฆญ)

์ˆ˜์ž…์ด ์—†๋Š” ์ค‘ยท๊ณ ๋“ฑํ•™์ƒ,
๋Œ€ํ•™์ƒ์„ ์œ„ํ•œ ํ•™์ƒ 50% ํ• ์ธ (ํด๋ฆญ)

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • NPM์ด ๋ฌด์—‡์ธ์ง€ ๋ชจ๋ฅด์ง€๋งŒ ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์จ์•ผ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž

  • ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ž…๋ฌธ์ž

  • ํผ๋ธ”๋ฆฌ์…”

  • ์ฃผ๋‹ˆ์–ด ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

  • ์›นํŒฉ์„ ํ•ด๋ณด์ง€ ์•Š์€ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

  • ํ”„๋ŸฐํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ์ด ๊ถ๊ธˆํ•œ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML

  • CSS

  • Javascript

์•ˆ๋…•ํ•˜์„ธ์š”
์žฅ๊ธฐํšจ(์บกํ‹ดํŒ๊ต)์ž…๋‹ˆ๋‹ค.

47,132

๋ช…

์ˆ˜๊ฐ•์ƒ

4,507

๊ฐœ

์ˆ˜๊ฐ•ํ‰

3,812

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

17

๊ฐœ

๊ฐ•์˜

์ธํ”„๋Ÿฐ์—์„œ 8๋…„์งธ ์ง€์‹์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ  ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ, ๐Ÿ“ฃ ํŠธ์œ„ํ„ฐ, ๐Ÿ’ป ๊นƒํ—™

๐Ÿ“— Do it! Vue.js ์ž…๋ฌธ, ์‰ฝ๊ฒŒ ์‹œ์ž‘ํ•˜๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, ๋‚˜๋Š” ๋„ค์ด๋ฒ„ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ์ฑ… 3๊ถŒ ์ง‘ํ•„
๐Ÿ“– Cracking Vue.js, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ•ธ๋“œ๋ถ, ์›นํŒฉ ํ•ธ๋“œ๋ถ. ์˜จ๋ผ์ธ ๋ฌด๋ฃŒ ๊ฐ€์ด๋“œ๋ถ 3๊ถŒ ์ง‘ํ•„
๐Ÿ‘จโ€๐Ÿ’ป ์บกํ‹ดํŒ๊ต์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์œ ํŠœ๋ธŒ ์ฑ„๋„ ์šด์˜ - ์ทจ์ค€์ƒ, ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž๋“ค์˜ ๊ณ ๋ฏผ์„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ณณ
๐Ÿฅค ์บกํ‹ดํŒ๊ต์˜ ์นด์นด์˜คํ†ก ์˜คํ”ˆ ์ฑ„ํŒ…๋ฐฉ ์šด์˜ - ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ตœ์‹  ์ •๋ณด์™€ ์—…๊ณ„ ๋™๋ฃŒ๋“ค์˜ ์ƒ๊ฐ๊ณผ ๊ณ ๋ฏผ์„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ณณ

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

64๊ฐœ โˆ™ (3์‹œ๊ฐ„ 27๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!