캡틴 판교(장기효) 님의 [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.
아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.
https://nuatmochoi.github.io/notesite/03.html
Directives, npm, Vue CLI, Component | Vuejs Lecture Note
Directives, npm, Vue CLI, Component 디렉티브 디렉티브는 화면에 뿌려주는 과정을 편하게 하기 위함. v-bind : 값(data)을 연결할 때 v-on : 이벤트를 연결할 때 v-if : false와 true로 변경함에 따라 tag의 보이는 유무를 제어 (false일 때 element tag에서 완전히 제외된다) v-show : v-if와 비슷하게 화면에 보이는 유무를 제어 (v-if와 다른점은 css의 display 속성이 n
nuatmochoi.github.io
디렉티브
디렉티브(v- 로 시작하는 것) 는 화면에 뿌려주는 과정을 편하게 하기 위함.
v-bind : 값을 연결할 때
v-on : 이벤트를 연결할 때
v-if (조건) : false, true로 변경함에 따라 tag의 보이는 유무 제어 (false일 때 element tag에서 아예 제외된다)
v-show : v-if와 같이 화면에 보이는 유무 제어 (다른 점은, v-show는 css의 display 속성이 none으로 바뀌는 것이기 때문에, DOM으로는 남아 있다)
npm
- http://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html
npm
- https://www.npmjs.com/package/vue
- 버전 관리를 용이하게 하기 위함
- 버전이 다르다면 가져온 라이브러리가 호환이 안될 수도 있기 때문에, 그것을 해결하기 위해 npm이 필요함
npm i @vue/cli -g로 설치한다 ( === npm install @vue/cli -global)
npm init -y (모든 option을 yes로 처리) -> package.json 생성
package-lock.json : 특정 라이브러리를 설치할 때 또다른 라이브러리를 설치해야 할 수도 있기 때문에 생기는 것
npm i jquery와 같이 라이브러리를 install 하면
"dependencies": {
"jquery": "^3.4.1"
}
node_modules 폴더 밑에 jquery 폴더가 생기고, 가져다 쓸 수 있음
ES6 에서는 CDN 방식(script)로 접근하지 않고, import로 라이브러리에 접근한다.
npm i jquery-ui@1.10.5 처럼 @+ (버전) 으로 특정 버전을 설치할 수 있다.
package.json에 필요한 모든 패키지가 명시가 되어 있으므로, node_modules를 제외하고 새로운 폴더로 옮긴 후에, npm i 명령어를 통해 옮긴 후에 node_modules를 생성하는 식으로 프로젝트 위치 변경 용이하다. 따라서 git으로 올릴 때에도 package.json과 package-lock.json을 같이 올리는 것이 좋다.
Vue CLI
CDN은 인터넷 연결이 되지 않으면 사용 불가
setup된 project에서 개발하기 위해 Vue CLI를 쓰는 것임 (명령어로 프로젝트 구성하는 도구)
1. vue create todo-app (프로젝트 생성, 생성 option은 사전 설정 없으면 defalut로 하면 된다)
2. cd todo-app
3. npm run serve (프로젝트 실행)
vue! : vscode에서 .vue 파일로 개발할 때 single file component(html+css+js) 자동 생성 단축키
vue cli가 live server로 열리지 않는 이유 : HTML, CSS, JS는 브라우저가 인식 가능하지만, Vue 파일은 인식할 수 없기 때문이다.
vue cli에서 서버 명칭 : webpack-dev-server
로딩해주는 것 : vue-loader
-> 이러한 잡다한 부분을 vue-cli의 최신 버전들은 @vue-cli 폴더 등에 넣어놓음
eslint error overlay 해제
VS Code에서 eslint 관련 에러를 뜨지 않게 하려면
project에 vue.config.js 파일 생성한 후에 아래와 같이 타이핑하고 저장
module.exports = {
devServer: {
overlay: false,
}
}
Javascript 모듈화
(function(){
...
})();
즉시 실행함수 : function 전체를 ()로 감싸고 끝날 때 ()를 붙여준다.
Component
component는 components 폴더 안에 작성할 것으로 권고됨
app.vue에서 component를 들고 오기 위해
app.vue에서
import TodoHeader from "./components/TodoHeader.vue";(vim + tab으로 자동완성 쉽게 가능)
export default {
components: {
"todo-header": TodoHeader
}
};
이렇게 컴포넌트 등록할 수 있음
component가 data를 참조하지 않게 하기 위해
//data : {} 객체로 만들면 에러가 난다.
//컴포넌트에 data를 선언할 때는 function 형태여야 한다.
data() {
return {
inputText: '',
};
},
v-model
v-model : 양방향 데이터 바인딩
<input type="text" v-model="inputText" />
<button v-on:click="addItem">add</button>
addItem: function() {
var value = this.inputText;
localStorage.setItem(value, value);
this.clearInput();
},
localStorage.setItem(‘1’, ‘item 1’)
: 껐다가 다시 켜도 local storage에 저장되어 있음
v-for
<li v-for="(item, index) in todoItems" :key="index">
{{ item }}
</li>
v-for를 돌 때에 key값은 idx 혹은 id로 구별한다.
created (in 라이프사이클)
component가 생성되자마자 호출된다.
Container presentational component
- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
'Web > Vue' 카테고리의 다른 글
| Vue.js 강의노트 05.[Render, Webpack, Vuex] (0) | 2020.02.25 |
|---|---|
| Vue.js 강의노트 04. [Event bus, 라이프사이클, ES6] (0) | 2020.02.15 |
| Vue.js 강의노트 02. [Event, Instance, Component, Axios] (0) | 2020.01.22 |
| VuePress 실습 이후 추가 공부 사항들 (0) | 2020.01.13 |
| gh-page에 VuePress를 deploy할 때 template 깨짐 에러 해결 (0) | 2020.01.13 |
