๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Web

ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž! (feat. Webpack)

๐Ÿ“Œ ์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์ „, ์•Œ๊ณ  ์žˆ์œผ๋ฉด ์ข‹์€ ๋ฐฐ๊ฒฝ ์ง€์‹๋“ค

์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์ „, Node.js & NPM์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋„๊ตฌ๋“ค์— ๋Œ€ํ•œ ๋ฐฐ๊ฒฝ ์ง€์‹์ด ์žˆ์œผ๋ฉด ์›นํŒฉ์„ ๋‹ค๋ฃจ๋Š”๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ฐฐ๊ฒฝ ์ง€์‹์ด ์žˆ๋Š” ๋ถ„๋“ค์€ ์›นํŒฉ์œผ๋กœ ๋ฐ”๋กœ ๋„˜์–ด๊ฐ€์…”๋„ ์ข‹์Šต๋‹ˆ๋‹ค.

โœจ Node.js

๋ธŒ๋ผ์šฐ์ € ๋ฐ–์—์„œ๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

โœจ NPM(Node Package Manager)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €์ž…๋‹ˆ๋‹ค.

์ฃผ์š” ๋ช…๋ น์–ด

  • npm init : ๋ช…๋ น์–ด ์‹คํ–‰ ์‹œ, package.json ํŒŒ์ผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  • npm init -y : ๋ช…๋ น์–ด ์‹คํ–‰ ์‹œ, package.json ํŒŒ์ผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  • npm install ${๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด๋ฆ„} : ํ•ด๋‹น ๋ช…๋ น์–ด๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ ์‹œ, ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์— node_modules ํด๋”๊ฐ€ ์ƒ๊น๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์ฐธ๊ณ ๋กœ install ๋ช…๋ น์–ด๋Š” i๋กœ ์ถ•์•ฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค)
    • ์ฃผ์š” ์˜ต์…˜ --save-dev & --global
      • --save-dev ์˜ต์…˜ : ํ•ด๋‹น ์˜ต์…˜์˜ ์—ฌ๋ถ€๊ฐ€ ๊ฐœ๋ฐœ์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋ฐฐํฌ์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•ด๋‹น ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐฐํฌํ•  ๋•Œ, ๊ฐœ๋ฐœ์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋น ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. (์ฐธ๊ณ ๋กœ --save-dev ์˜ต์…˜์€ -D๋กœ ์ถ•์•ฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค)
      • --global ์˜ต์…˜ : node_modules ํŒจํ‚ค์ง€๊ฐ€ ์•„๋‹Œ ์ „์—ญ์œผ๋กœ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. (์ฐธ๊ณ ๋กœ --global ์˜ต์…˜์€ -g๋กœ ์ถ•์•ฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค)
  • npm uninstall ${๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด๋ฆ„} : ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๊ด€๋ จ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ชจ๋‘ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.

NPM์€ ์™œ ์‚ฌ์šฉํ•˜๋ฉฐ, ์–ด๋–ค ์žฅ์ ์ด ์žˆ์„๊นŒ?

  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ HTML ์ค‘๊ฐ„์— ์‚ฝ์ž…ํ•œ๋‹ค๋ฉด(CDN ๋ฐฉ์‹) ์ง์ ‘ ์ฐพ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ต๊ณ , ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์˜์กด์„ฑ์ด ์—ฎ์˜€์„ ๋•Œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊น๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ NPM์„ ์‚ฌ์šฉํ•ด์„œ package.json ํ•œ ๊ณณ์—์„œ ๊ด€๋ฆฌํ•œ๋‹ค๋ฉด ์ข€ ๋” ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค.
  • CDN ๋ฐฉ์‹์€ ์ผ์ผ์ด ์ง์ ‘ ํƒœ๊ทธ๋ฅผ ์ฐพ์•„์„œ ๋“ค๊ณ  ์™€์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฒˆ๊ฑฐ๋กญ์Šต๋‹ˆ๋‹ค. NPM์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋ช…๋ น์–ด ํ•œ ์ค„๋กœ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ๊ด€๋ จ๋œ ๋„๊ตฌ๋“ค

Path

ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.

var path = require('path');
 

Path | Node.js v16.9.1 Documentation

Path# Source Code: lib/path.js The path module provides utilities for working with file and directory paths. It can be accessed using: const path = require('path'); Windows vs. POSIX# The default operation of the path module varies based on the operating s

nodejs.org

AMD & Common.js

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“ˆํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์„ ๋‘ ์ฃผ์ž์ž…๋‹ˆ๋‹ค.

  • Common.js : ๋ธŒ๋ผ์šฐ์ € ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๊ฐœ๋ฐœ์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ธฐ ์šฉ์ดํ•˜๋„๋ก ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. node.js์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. (require, module exports๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค)
  • AMD : ๋น„๋™๊ธฐ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ํ‘œ์ค€์•ˆ์ž…๋‹ˆ๋‹ค. ๋ชจ๋“ˆ์ด ๋กœ๋”ฉ๋  ๋•Œ๊นŒ์ง€ ๋™๊ธฐ๋กœ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ , ๋น„๋™๊ธฐ ๋ชจ๋“ˆ ๋ฐฉ์‹์œผ๋กœ ํšจ๊ณผ๋ฅผ ๋ฐœํœ˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (define(), require()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค)

ES6 Modules

import & export๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ฝ”๋“œ๋ฅผ ๋ชจ๋“ˆํ™” ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ๋ชจ๋“ˆํ™”๋Š” ๋‹ค๋ฅธ ํŒŒ์ผ์— ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋Šฅ์„ ํŠน์ • ํŒŒ์ผ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

  • export ๋ณ€์ˆ˜, ํ•จ์ˆ˜ : ๋‹ค๋ฅธ ํŒŒ์ผ์—์„œ ๊ฐ€์ ธ๋‹ค ์“ธ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜์˜ ์•ž์— export๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ๋ถ™์ž…๋‹ˆ๋‹ค. export๋œ ํŒŒ์ผ์€ ์ž„ํฌํŠธ๋กœ ๋ถˆ๋Ÿฌ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • import { ๋ถˆ๋Ÿฌ์˜ฌ ๋ณ€์ˆ˜ or ํ•จ์ˆ˜ ์ด๋ฆ„ } form 'ํŒŒ์ผ ๊ฒฝ๋กœ'; : ์ต์ŠคํฌํŠธ๋œ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋ฅผ ์ค‘๊ด„ํ˜ธ {}์— ์„ ์–ธํ•˜๊ณ , ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ๋ช…์‹œํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ES6 ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๋“ค์ด ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋˜์ง€๋งŒ, import & export๋Š” ์•„์ง ๋ณด์กฐ ๋„๊ตฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ์ ์„ ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ Webpack

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

โœจ '์šฉ์–ด' ํ—ท๊ฐˆ๋ฆฌ์ง€ ๋ง์ž

๋ชจ๋“ˆ์ด๋ž€?

ํŠน์ • ๊ธฐ๋Šฅ์„ ๊ฐ–๋Š” ์ž‘์€ ์ฝ”๋“œ ๋‹จ์œ„๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“ˆ ๋ฒˆ๋“ค๋ง์ด๋ž€?

์—ฌ๋Ÿฌ ์ž์›๋“ค์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ๋ณ‘ํ•ฉ ๋ฐ ์••์ถ• ํ•ด์ฃผ๋Š” '๋™์ž‘'์„ ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋ง์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋ž€?

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์„ฑํ•˜๋Š” ์ž์›(HTML, CSS, JS ๋“ฑ)์„ ๊ฐ๊ฐ์˜ ๋ชจ๋“ˆ๋กœ ๋ณด๊ณ  ์ด๋ฅผ ์กฐํ•ฉํ•ด์„œ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“œ๋Š” '์ฃผ์ฒด'์ž…๋‹ˆ๋‹ค.

โœจ ๋ฌด์—‡์„ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ํ–ˆ์„๊นŒ?

1. ํŒŒ์ผ ๋‹จ์œ„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ๊ด€๋ฆฌ ํ•„์š”์„ฑ

์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ „์—ญ ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์–ด๋””์„œ๋“  ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ถ€๋ถ„์—์„œ ์žฅ์ ๋„ ์žˆ์ง€๋งŒ, ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ธ ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์ž๋ฉด ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ณ€์ˆ˜๊ฐ€ ์˜๋„์น˜ ์•Š์€ ๊ฐ’์„ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ํฐ ๋ฒ„๊ทธ๋กœ ์ด์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํŒŒ์ผ ๋‹จ์œ„๋กœ ๋ชจ๋“ˆํ™”๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด AMD, Common.js์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋“ฑ์žฅํ–ˆ๊ณ , ์›นํŒฉ์€ ์ด ๋‘ ๊ฐ€์ง€ ๋ชจ๋‘ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

2. ์›น ๊ฐœ๋ฐœ ์ž‘์—… ์ž๋™ํ™” ๋„๊ตฌ

์›น ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ๋ฐฐํฌํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์€ ์ž‘์—…์„ ๋งค๋ฒˆ ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

  1. HTML, CSS, JS ์••์ถ•
  2. ์ด๋ฏธ์ง€ ์••์ถ•
  3. CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ๋ณ€ํ™˜

์ด๋ฅผ ์ž๋™ํ™”ํ•˜๊ธฐ ์œ„ํ•ด Grunt, Gulp ๊ฐ™์€ ๋„๊ตฌ๋“ค์ด ๋“ฑ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค. ์›นํŒฉ์€ ์ด๋Ÿฐ ๋„๊ตฌ๋ฅผ ํฌํ•จํ•˜๊ณ , ๋” ๋งŽ์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋น ๋ฅธ ๋กœ๋”ฉ ์†๋„์™€ ๋†’์€ ์„ฑ๋Šฅ

์›น ์‚ฌ์ดํŠธ ๋กœ๋”ฉ ์†๋„์— ๋”ฐ๋ผ์„œ ์‚ฌ์šฉ์ž ์ดํƒˆ๊นŒ์ง€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋Œ€ํ‘œ์ ์ธ ๋ฐฉ๋ฒ•์€ ํŒŒ์ผ์„ ์„œ๋ฒ„๋กœ ์š”์ฒญํ•˜๋Š” ํšŸ์ˆ˜๋ฅผ ์ค„์ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ง€์—ฐ ๋กœ๋”ฉ(Lazy Loading)์ด ๋“ฑ์žฅํ–ˆ์Šต๋‹ˆ๋‹ค. ์›นํŒฉ์€ ์ด๋ฅผ ์ฑ„์šฉํ•˜์—ฌ ํŒŒ์ผ์ด ํ•„์š”ํ•  ๋•Œ ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ๋ฏธ๋ฆฌ ๋กœ๋”ฉํ•˜์ง€ ์•Š๊ณ  ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์š”์ฒญํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœจ ์›นํŒฉ ๋ช…๋ น์–ด ๊ฐ„์†Œํ™”ํ•˜๊ธฐ

webpack.config.js ํŒŒ์ผ์€ ๋งค๋ฒˆ ๋ช…๋ น์–ด๋กœ entry, output ๋“ฑ ์—ฌ๋Ÿฌ ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ํ•ด๋‹น ํŒŒ์ผ์—์„œ ๊ธฐ๋ณธ ์„ค์ •์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๊ธฐ์กด ๋ช…๋ น์–ด๋ฅผ ๊ฐ„์†Œํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=none --entry=src/index.js --output=public/output.js"
},

 

//webpack.config.js
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: './public/output.js'
};

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

โœจ ์›นํŒฉ ์ ์šฉํ•˜๊ธฐ ์ „๊ณผ ํ›„๋กœ '๋„คํŠธ์›Œํฌ ์š”์ฒญ ํšŸ์ˆ˜' ๋น„๊ตํ•˜๊ธฐ

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ์˜ '๋„คํŠธ์›Œํฌ'๋ฅผ ํ†ตํ•ด ์–ด๋–ค ๋ณ€ํ™”๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€์žฅ ํฐ ๋ณ€ํ™”๋Š” '๋„คํŠธ์›Œํฌ ์š”์ฒญ ํšŸ์ˆ˜' ์ž…๋‹ˆ๋‹ค. ์›นํŒฉ์€ ์—ฌ๋Ÿฌ ์ž์›์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ํ•ฉ์นฉ๋‹ˆ๋‹ค. ์ฆ‰, ์—ฌ๋Ÿฌ ์ž์›์„ ๋ฌถ์€ ํŒŒ์ผ๋งŒ ์š”์ฒญํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋„คํŠธ์›Œํฌ ์š”์ฒญ ํšŸ์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์›นํŒฉ ์ ์šฉํ•˜๊ธฐ ์ „, ์š”์ฒญ ํšŸ์ˆ˜ → 3ํšŒ
์›นํŒฉ ์ ์šฉํ•œ ํ›„, ์š”์ฒญ ํšŸ์ˆ˜ → 1ํšŒ

๋งŒ์•ฝ์— ์ง€๊ตฌ ๋ฐ˜๋Œ€ํŽธ์— ์žˆ๋Š” ๊ณณ์—์„œ ์š”์ฒญํ•œ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”? ๋„คํŠธ์›Œํฌ ์ƒํ™ฉ์ด ์ข‹์ง€ ์•Š์€ ๊ฒฝ์šฐ ์ง€์—ฐ ์‹œ๊ฐ„์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. N๊ฐœ์˜ ์ž์›์„ ์š”์ฒญํ–ˆ์„ ๋•Œ, ์ง€์—ฐ์‹œ๊ฐ„์— ์˜ํ•ด ์‹œ๊ฐ„์ด ๋” ๊ฑธ๋ฆฌ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋„คํŠธ์›Œํฌ ์š”์ฒญ ํšŸ์ˆ˜๋ฅผ ์ค„์ด๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ๋ธŒ๋ผ์šฐ์ €๋ณ„๋กœ HTTP ์š”์ฒญ ํšŸ์ˆ˜๋Š” ์ œ์•ฝ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด์— ๋Œ€ํ•œ ์ตœ์ ํ™”๋Š” ๊ผญ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

โœจ ์›นํŒฉ3์—์„œ 4๋กœ ๋‹ฌ๋ผ์ง„ ์ ์€ ๋ฌด์—‡์ผ๊นŒ?

mode

์›นํŒฉ 4๋ถ€ํ„ฐ ๋ชจ๋“œ(mode)๋ผ๋Š” ๊ฐœ๋…์ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“œ๋Š” ์•„๋ž˜ 3๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. none: ์„ค์ • ์•ˆ ํ•จ
  2. development: ๊ฐœ๋ฐœ ๋ชจ๋“œ
  3. production: ๋ฐฐํฌ ๋ชจ๋“œ

๊ฐ ์‹คํ–‰ ๋ชจ๋“œ์— ๋”ฐ๋ผ ๊ฒฐ๊ณผ๋ฌผ๋„ ๋‹ฌ๋ผ์ง€๋Š”๋ฐ ๊ทธ์— ๋งž๊ฒŒ ์›นํŒฉ์—์„œ ์ตœ์ ํ™”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ๊ธฐ๋ณธ ๊ฐ’์€ production ๋ชจ๋“œ๋กœ ์„ค์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

ETC

  • ๋นŒ๋“œ ์†๋„๊ฐ€ ๋นจ๋ผ์กŒ์Šต๋‹ˆ๋‹ค.
  • CommonsChunkPlugin์ด deprecated ๋˜๊ณ , SplitChunksPlugin์œผ๋กœ ๋Œ€์ฒด๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
  • ๊ทธ ์™ธ์— deprecated ๋œ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
 

To v4 from v3 | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

โœจ ์›นํŒฉ ์ฃผ์š” ์†์„ฑ 4๊ฐ€์ง€

entry

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

output

์›นํŒฉ์„ ๋Œ๋ฆฌ๊ณ  ๋‚œ ๊ฒฐ๊ณผ๋ฌผ์˜ ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

  • filename : ์›นํŒฉ์œผ๋กœ ๋นŒ๋“œํ•œ ํŒŒ์ผ ์ด๋ฆ„์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ์†์„ฑ์˜ ์˜ต์…˜์˜ ์˜ˆ์‹œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.
    • '[name].bundle.js' : ํŒŒ์ผ ์ด๋ฆ„์— entry ์†์„ฑ์„ ํฌํ•จํ•˜๋Š” ์˜ต์…˜
    • '[id].bundle.js' : ํŒŒ์ผ ์ด๋ฆ„์— ์›นํŒฉ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“ˆ ID๋ฅผ ํฌํ•จํ•˜๋Š” ์˜ต์…˜
    • '[name].[hash].bundle.js' : ๋นŒ๋“œ๋งˆ๋‹ค ๊ณ ์œ  ํ•ด์‹œ ๊ฐ’์„ ๋ถ™์ด๋Š” ์˜ต์…˜
    • '[chunkhash].bundle.js' : ๊ฐ ๋ชจ๋“ˆ ๋‚ด์šฉ์„ ๊ธฐ์ค€์œผ๋กœ ์ƒ์„ฑ๋œ ํ•ด์‹œ ๊ฐ’์„ ๋ถ™์ด๋Š” ์˜ต์…˜
  • path : ํ•ด๋‹น ํŒŒ์ผ์˜ ๊ฒฝ๋กœ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
//webpack.config.js
var path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist') // './dist/bundle.js'์™€ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.
  }
}

loader

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํ•ด์„ํ•  ๋•Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ์•„๋‹Œ ์›น ์ž์›๋“ค์„ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. (HTML, CSS, ์ด๋ฏธ์ง€, ํฐํŠธ ๋“ฑ) ํ•ด๋‹น ์†์„ฑ์€ module์ด๋ผ๋Š” ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์ ์šฉํ•ด๋ณด๋ฉด css ํŒŒ์ผ์— ์žˆ๋Š” ์ฝ”๋“œ๋“ค์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

"๋ชจ๋“  css ํŒŒ์ผ์— style-loader๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ css-loader๊นŒ์ง€ ์ ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค."

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    }
  ]
},

loader๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”๋ฐ ์™œ ๊ทธ๋Ÿด๊นŒ์š”? CSS ํŒŒ์ผ์„ ์›นํŒฉ์„ ์ ์šฉํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์•ˆ์— CSS๋ฅผ ๋„ฃ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ loader๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด CSS ํŒŒ์ผ์„ ํ•ด์„ํ•˜๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์•ˆ์— ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ ๋กœ๋”์˜ ์ˆœ์„œ๋„ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋กœ ๋“ค์ž๋ฉด style-loader์™€ css-loader์˜ ์ˆœ์„œ๋ฅผ ๋ฐ”๊พผ๋‹ค๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ ์ˆœ์„œ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. ์ด ์ ์„ ๊ผญ ์œ ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • css-loader : CSS๊ฐ€ ์›นํŒฉ์œผ๋กœ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.
  • style-loader : ์›นํŒฉ ์•ˆ์— ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ์Šคํƒ€์ผ์„ ํ—ค๋” ์•ˆ์— ๋„ฃ์–ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

๋กœ๋” ์ข…๋ฅ˜๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์ข€ ๋” ์•Œ์•„๋ณด๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด ์•„๋ž˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

 

Loaders | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

plugin

์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ํ•ด๋‹น ๊ฒฐ๊ณผ๋ฌผ์˜ ํ˜•ํƒœ๋ฅผ ๋ฐ”๊พธ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜๋ฉฐ ๊ฐ ์š”์†Œ๋“ค์€ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค๋งŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

ํ”Œ๋Ÿฌ๊ทธ์ธ ์ข…๋ฅ˜๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์ข€ ๋” ์•Œ์•„๋ณด๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด ์•„๋ž˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

 

Plugins | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

์š”์•ฝ

  • Entry : ์›นํŒฉ์„ ์‹คํ–‰ํ•  ๋Œ€์ƒ ํŒŒ์ผ ํ˜น์€ ์ง„์ž…์ ์ž…๋‹ˆ๋‹ค.
  • Output : ์›นํŒฉ์˜ ๊ฒฐ๊ณผ๋ฌผ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๋Š” ์†์„ฑ, ์ผ๋ฐ˜์ ์œผ๋กœ filename, path๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
  • Loader : CSS, ์ด๋ฏธ์ง€์™€ ๊ฐ™์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•„๋‹Œ ํŒŒ์ผ์„ ์›นํŒฉ์ด ์ธ์‹ํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. (์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ ์ˆœ์œผ๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค)
  • Plugin : ์›นํŒฉ์œผ๋กœ ๋ณ€ํ™˜ํ•œ ํŒŒ์ผ์— ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์„ ๋”ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.

โœจ Webpack Dev Server

๊ฐœ๋ฐœํ•˜๋Š” ๊ณผ์ •์—์„œ ์“ฐ์ด๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์›นํŒฉ์˜ ๋นŒ๋“œ ๋Œ€์ƒ ํŒŒ์ผ์ด ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ, ์›นํŒฉ์œผ๋กœ ๋นŒ๋“œํ•œ ํ›„ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ƒˆ๋กœ๊ณ ์นจ ํ•ด์ค๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์›นํŒฉ ๋ฐ๋ธŒ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋นŒ๋“œํ•œ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์™œ ๊ทธ๋Ÿด๊นŒ์š”? ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํŒŒ์ผ ์ž…์ถœ๋ ฅ๋ณด๋‹ค ๋ฉ”๋ชจ๋ฆฌ ์ž…์ถœ๋ ฅ์ด ๋” ๋น ๋ฅด๊ณ , ์ปดํ“จํ„ฐ ์ž์›์ด ๋œ ์†Œ๋ชจ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์˜ ๋„คํŠธ์›Œํฌ๋ฅผ ๋ณด๋ฉด bundle.js ํŒŒ์ผ์„ ์š”์ฒญํ•˜๊ณ  ์žˆ์ง€๋งŒ, ๋ˆˆ์œผ๋กœ ํ™•์ธํ•  ์ˆ˜ ์—†๋Š” ๊ฒƒ์ด ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ ์ฐธ๊ณ  ์ž๋ฃŒ

 

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

 

To v4 from v3 | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

 

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

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

www.inflearn.com

 

์›นํŒฉ ํ•ธ๋“œ๋ถ

 

joshua1988.github.io

 

Modules | Vue.js + ES6

Import & Export ์ž„ํฌํŠธ(Import)์™€ ์ต์ŠคํฌํŠธ(Export)๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ฝ”๋“œ๋ฅผ ๋ชจ๋“ˆํ™” ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๋ชจ๋“ˆํ™”๋ž€ ์‰ฝ๊ฒŒ ๋งํ•ด์„œ ๋‹ค๋ฅธ ํŒŒ์ผ์— ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋Šฅ์„ ํŠน์ • ํŒŒ์ผ์—์„œ ์‚ฌ

joshua1988.github.io