뷰 플러그인 - axios 사용하기
1. axios 란?
- 동적으로 데이터를 가져오기 위한 라이브러리
- axios 와 vue-ressource 가 있다. axios 가 업데이트가 빠르고 커뮤니티가 활성화 되어 있어 많은 사람들이 추천한다
2. 설치
- npm install --save axios vue-axios
3. 설정
- src/main.js
4. 사용
- app.vue
| [VueJs] 뷰 플러그인 - Veux 사용하기 (2) | 2018.06.03 |
|---|
리딩리드
뷰 플러그인 - Veux 사용하기
1. Vuex 란?
- Vue.js의 상태관리 패턴 플러그인.
- 애플리케이션의 모든 컴포넌트의 글로벌 저장소 역할한다.
- 여러 컴포넌트가 하나의 데이터를 공유하거나, 수평적인 컴포넌트 간의 데이터 공유시 사용
2. Vuex의 예제
1) 설치
- vuex는 vue-cli 에 기본적으로 포함되어 있지 않기 때문에 따로 설치 해야한다.
2) 설정
- src/main.js
3) 사용
- Counter.vue
- App.vue
| [VueJs] 뷰 플러그인 - axios 사용하기 (0) | 2018.06.03 |
|---|
리딩리드
웹팩 기본 사용법 - webpack HelloWorld
(https://webpack.js.org/guides/getting-started/ 번역)
1. 웹팩 로컬 설치
- 웹팩을 설치하기 이전에 node.js를 설치해야한다.
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev2. 프로젝트 구조설정
1) 프로젝트 구조
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js2) src/index.js
- 해당 프로젝트에서 lodash 라이브러리를 사용했다.
function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());3) index.html
- lodash 라이브러리를 html문서에 직접 참조했다.
- webpack을 이용하여 차후에 script 소스들을 관리한다.
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>4) package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}- private 을 true로 설정하고 엔트리 포인트인 main 을 제거하였다. 이유는 해당 소스가 배포될때 발생할 수 있는 사고를 미연에 방지 할 수 있다.
3. 번들 만들기
- webpack에서 모든 단위는 모듈에서 시작한다. js, image, css etc...모든 것은 모듈이 된다. 그리고 이런 모듈을 모아서 컴파일 단계를 거치면 하나의 묶음인 번들(bundle)이 생성되는 것이다.
- 번들을 사용 함으로서 서버의 request를 줄이고 모듈들의 의존관리를 쉽게 할 수 있다
1) 프로젝트 구조 변경과 lodash 의존성 포함
- 앞의 예제에서 lodash를 html문서에 삽입하였지만 웹팩을 이용하여 의존성 관리가 되도록 추가한다
- --save로 설치한다면 package.json 설정에서 product 레벨에서 사용가능하게 된다. (--save-dev 는 개발환경시 필요)
npm install --save lodash- dist 폴더를 추가하여 번들링된 파일을 담을 수 있도록 변경한다
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js2) 소스 수정
- lodash를 의존관리가 가능하도록 추가 했으니 소스도 변경해야 한다.
- src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());- dist/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>- 기존에 추가했던 js 파일을 제거하고 bundle.js 라는 최종 번들 파일만을 참조하고 있다.
(현재는 webpack.config.js 를 설정하지 않아서 run 할 시 main.js 가 생성 될 것이다)
3) 화면 확인
npx webpack
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 3003ms
Built at: 2018-2-26 22:42:11
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.- npx webpack
- npx는 node 버전 8.2 이상부터 가능하다
- 이후에 dist에 있는 html 파일을 클릭하면 해당 문구가 출력된다.(단 bundle.js 가 없으므로 main.js를 참조해야한다)
4. 설정파일 작성 - webpack.config.js
- 웹팩은 프로젝트마다 설정을 다르게 할 수 있도록 설정파일을 제공한다.
1) project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js2) webpack.config.js
- output의 파일명이 bundle.js 로 되었다. 위에서 main.js가 생성되었다면 설정파일 이후로 bundle.js가 생성된다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};3. run
npx webpack --config webpack.config.js
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.- npx webpack --config webpack.config.js
5. npm script
- npx 커맨드를 간단하게 줄이기 위하여 NPM 커맨드를 설정한다
1) package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}- npm run build 명령어를 npx 대신 사용 할 수 있다
npm run build
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 323ms
Built at: 2018-2-26 22:50:25
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.| [webpack] 웹팩 멀티 번들관리 (0) | 2018.06.21 |
|---|---|
| [webpack] 웹팩의 로더사용(webpack Loader) (0) | 2018.06.20 |
리딩리드
960 그리드 시스템
1. 위와 같이 화면을 만드시오
- html, css만사용
- 960 그리드 시스템을 검색하여 이해한다.
- 가로는 960px로 한다.
- 점선은 outline 속성을 이용한다
- outline 속성과 border 속성을 사용할 때 차이점은?
| 자바스크립트 클릭이벤트 click() (0) | 2018.02.09 |
|---|---|
| 요소 가운데 정렬 (0) | 2018.02.02 |
| [study] 2017-04-16 더블링크드리스트 (0) | 2017.04.16 |
| [Study] 2017-04-09 링크드리스트 (0) | 2017.04.09 |
리딩리드
