Dva: dva๋กœ ๊ฐœ๋ฐœ ๋ฐ ๋นŒ๋“œ ํ•œ ๋Œ€์ƒ ํŒŒ์ผ์ด ๋งค์šฐ ํฝ๋‹ˆ๋‹ค (1.3M) ํŒจํ‚ค์ง€์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด์‹ญ๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2016๋…„ 12์›” 13์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

์•ˆ๋…•ํ•˜์„ธ์š”!

์ตœ๊ทผ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด dva๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”๋ฐ, dva ์ž‘๊ฐ€๋“ค์˜ ๋…ธ๊ณ ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค ~
ํ˜„์žฌ ์ œ๊ฐ€ ๊ฒช์€ ๋ฌธ์ œ๋Š” ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์ด ๋งŽ์ง€ ์•Š์ง€๋งŒ ํŒจํ‚ค์ง€ ํŒจํ‚ค์ง€๊ฐ€ ๋งค์šฐ ํฌ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค (index.js๊ฐ€ 1.3MB์— ๋„๋‹ฌํ–ˆ์Šต๋‹ˆ๋‹ค). dva ๋นŒ๋“œ๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ์—ฌ๋Ÿฌ ํ•ญ๋ชฉ์œผ๋กœ ๋ถ„ํ• ํ•˜๊ณ  ๊ธฐ๋Šฅ๋ณ„๋กœ ํŽ˜์ด์ง€๋ฅผ ๋ถ„ํ• ํ•˜๋Š” ๊ฒƒ์„ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ•ด๋‹น ๋ชจ๋“ˆ์€ ์š”์ฒญ์‹œ ๋„์ž… ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๆŠ˜็บฟๅ›พ , ๆŸฑ็Šถๅ›พ , ้ฅผๅ›พ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋„์ž…


// ==== ไปฅไธ‹ๅฟ…้กปๅผ•ๅ…ฅ ====
// core
import echarts from 'echarts/lib/echarts'
// for ie8
//import 'zrender/lib/vml/vml'
// ๆŸฑ็Šถๅ›พ
import 'echarts/lib/chart/bar'
// ๆŠ˜็บฟๅ›พ
import 'echarts/lib/chart/line'
// ้ฅผๅ›พ
import 'echarts/lib/chart/pie'

// ==== ไปฅไธ‹ไธๅผ•ๅ…ฅไนŸๅฏไปฅ๏ผŒๅชๆ˜ฏๆฒกๆ•ˆๆžœ๏ผŒไนŸไธไผšๆŠฅ้”™ ====
// tooltip
import 'echarts/lib/component/tooltip'
// legend
import 'echarts/lib/component/legend'
// title
import 'echarts/lib/component/title'


echarts.init(...)

๋” ์„ฑ๊ฐ€์‹  ๊ฒƒ์€ ์ด๋Ÿฌํ•œ ๋ชจ๋“ˆ์ด ๊ฐ•๋ ฅํ•œ ์ข…์†์„ฑ์ด ์•„๋‹ˆ๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ผ๋ถ€ ๋ชจ๋“ˆ์€ ๋„์ž…๋˜์ง€ ์•Š์œผ๋ฉด ํšจ๊ณผ๊ฐ€์—†๊ณ  ์ผ๋ถ€ ๋ชจ๋“ˆ์€ ๋ Œ๋”๋ง ์ค‘์— ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•˜์—ฌ ํŠน์ • ๋ชจ๋“ˆ์„ ๋„์ž…ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๋ฐ”๋ฒจ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. . . . .

๋ชจ๋“  5 ๋Œ“๊ธ€

package.json ๊ฒŒ์‹œ

@nikogu ์•„๋ž˜๋Š” ๋‚ด package.json์ž…๋‹ˆ๋‹ค.

 {
  "private": true,
  "entry": {
    "index": "./src/index.js"
  },
  "peerDependencies": {
  },
  "dependencies": {
    "antd": "^2.4.3",
    "dva": "^1.1.0",
    "echarts": "^3.3.1",
    "echarts-for-react": "^1.1.6",
    "moment-timezone": "^0.5.10",
    "path-to-regexp": "^1.7.0",
    "qs": "^6.3.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "reqwest": "^2.0.5"
  },
  "devDependencies": {
    "atool-build": "^0.9.0",
    "atool-test-mocha": "^0.1.5",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-dva-hmr": "^0.2.0",
    "babel-plugin-import": "^1.1.0",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "dora": "^0.4.3",
    "dora-plugin-proxy": "^0.8.4",
    "dora-plugin-webpack": "^0.8.1",
    "dora-plugin-webpack-hmr": "^0.2.1",
    "expect": "^1.20.2",
    "redbox-react": "^1.3.2"
  },
  "scripts": {
    "start": "dora --plugins \"proxy?watchDirs=./mock,webpack?port=8000,webpack-hmr\"",
    "build": "atool-build",
    "test": "atool-test-mocha ./src/**/*-test.js"
  }
}

dvacli๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

dva new myproject

echarts๋Š” ์ด๋ฏธ ํฝ๋‹ˆ๋‹ค

@codering echarts3 ๊ณต์‹ ์›น ์‚ฌ์ดํŠธ๋Š” ์••์ถ• ํ›„ 170k ์ด์ƒ์ด๋ผ๊ณ  ๋งํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น ๋ชจ๋“ˆ์€ ์š”์ฒญ์‹œ ๋„์ž… ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๆŠ˜็บฟๅ›พ , ๆŸฑ็Šถๅ›พ , ้ฅผๅ›พ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋„์ž…


// ==== ไปฅไธ‹ๅฟ…้กปๅผ•ๅ…ฅ ====
// core
import echarts from 'echarts/lib/echarts'
// for ie8
//import 'zrender/lib/vml/vml'
// ๆŸฑ็Šถๅ›พ
import 'echarts/lib/chart/bar'
// ๆŠ˜็บฟๅ›พ
import 'echarts/lib/chart/line'
// ้ฅผๅ›พ
import 'echarts/lib/chart/pie'

// ==== ไปฅไธ‹ไธๅผ•ๅ…ฅไนŸๅฏไปฅ๏ผŒๅชๆ˜ฏๆฒกๆ•ˆๆžœ๏ผŒไนŸไธไผšๆŠฅ้”™ ====
// tooltip
import 'echarts/lib/component/tooltip'
// legend
import 'echarts/lib/component/legend'
// title
import 'echarts/lib/component/title'


echarts.init(...)

๋” ์„ฑ๊ฐ€์‹  ๊ฒƒ์€ ์ด๋Ÿฌํ•œ ๋ชจ๋“ˆ์ด ๊ฐ•๋ ฅํ•œ ์ข…์†์„ฑ์ด ์•„๋‹ˆ๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ผ๋ถ€ ๋ชจ๋“ˆ์€ ๋„์ž…๋˜์ง€ ์•Š์œผ๋ฉด ํšจ๊ณผ๊ฐ€์—†๊ณ  ์ผ๋ถ€ ๋ชจ๋“ˆ์€ ๋ Œ๋”๋ง ์ค‘์— ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•˜์—ฌ ํŠน์ • ๋ชจ๋“ˆ์„ ๋„์ž…ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๋ฐ”๋ฒจ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. . . . .

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰