일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- jQuery
- SQL
- 디자인패턴
- mvc
- c#
- IT 관련
- It
- 제네릭
- ASP.NET
- delegate
- angularJS
- 메소드
- di
- 구글
- ADO.NET
- 동적dom
- csv
- asp.net mvc
- IT관련
- XML
- JavaScript
- LINQ
- Generic
- cookie
- 클래스
- MSSQL
- Excel
- iframe
- Today
- 7
- Total
- 1,436,555
심재운 블로그
ReactJS 를 mac 환경에서 설치해보기 본문
ReactJS 작업환경 설정하기
webpack2 입문 가이드 및 설치
https://hyunseob.github.io/2017/03/21/webpack2-beginners-guide/
위의 사이트를 참고로 구성해 봤습니다.
폴더를 만들고, 해당 폴더 안에서 webpack 를 설치합니다.
yarn add --dev webpack
CSS 를 bundle 로 처리하기 위해서...
yarn add --dev style-loader css-loader
ie 환경에서도 ES2015 사용하기 위해 babel 설치합니다..
yarn add --dev babel-loader babel-core babel-preset-env
유명한 JavaScript 라이브러리인 Lodash 를 설치해 봅니다.
yarn add lodash
package.json
webpack.config.js
/public/index.html
/src/text.css
/src/common.css
/src/index.js
npm run start 를 터미널에 실행하면 아래와 같이 http://0.0.0.0:7777 로 접속이 가능합니다.
sim-ui-MacBook-Air:react-tutorial shimjaewoon$ npm run start
> @ start /Users/shimjaewoon/react-tutorial
> webpack-dev-server --hot --host 0.0.0.0
Project is running at http://0.0.0.0:7777/
webpack output is served from /
Content not from webpack is served from /Users/shimjaewoon/react-tutorial/public
Hash: 2933b7d81e13582d1603
Version: webpack 3.4.1
Time: 2754ms
Asset Size Chunks Chunk Names
bundle.js 534 kB 0 [emitted] [big] main
[48] ./node_modules/webpack/hot/log.js 1.04 kB {0} [built]
[59] multi ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/client?http://0.0.0.0:7777 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built]
[60] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/client?http://0.0.0.0:7777 5.83 kB {0} [built]
[61] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack/node_modules/url/url.js 23.3 kB {0} [built]
[67] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[69] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack-dev-server/node_modules/loglevel/lib/loglevel.js 6.74 kB {0} [built]
[107] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[109] ../.nvm/versions/node/v7.9.0/lib/node_modules/webpack/hot/emitter.js 77 bytes {0} [built]
[110] ./node_modules/webpack/hot/dev-server.js 1.61 kB {0} [built]
[111] ./node_modules/webpack/hot/log-apply-result.js 1.31 kB {0} [built]
[112] ./node_modules/webpack/hot/emitter.js 77 bytes {0} [built]
[113] ./src/index.js 132 bytes {0} [built]
[114] ./node_modules/react/react.js 56 bytes {0} [built]
[132] ./node_modules/lodash/random.js 2.37 kB {0} [built]
[148] ./src/common.css 1 kB {0} [built]
+ 137 hidden modules
webpack: Compiled successfully.
'프로그래밍 > ReactJS, React Native' 카테고리의 다른 글
React 의 props 활용하기 - codepen (0) | 2018.06.07 |
---|---|
react.js 로 gatsby.js 를 활용하여 IIS 환경에 구동시키기 (0) | 2018.04.20 |
expo 에서 push notifications tool 활용하기 (1) | 2018.04.01 |
React Native 와 Expo 연동하여 맥 환경에서 ios 애뮬레이터 실행해보기 (0) | 2018.03.11 |
mac 환경에서 create-react-app 으로 react 실행해 보기 (0) | 2017.09.29 |
ReactJS 를 mac 환경에서 설치해보기 (0) | 2017.07.30 |