Vue.js 강의노트 03. [디렉티브, npm, Vue-CLI, component]

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/03.html

Directives, npm, Vue CLI, Component | Vuejs Lecture Note

---

디렉티브

디렉티브(v- 로 시작하는 것) 는 화면에 뿌려주는 과정을 편하게 하기 위함.

 

v-bind : 값을 연결할 때

v-on : 이벤트를 연결할 때 

v-if (조건) : false, true로 변경함에 따라 tag의 보이는 유무 제어 (false일 때 element tag에서 아예 제외된다)

v-show : v-if와 같이 화면에 보이는 유무 제어 (다른 점은, v-show는 css의 display 속성이 none으로 바뀌는 것이기 때문에, DOM으로는 남아 있다)

---

npm

- https://joshua1988.github.io/webpack-guide/build/npm-module-install.html#npm-%EC%84%A4%EC%B9%98-%EB%AA%85%EB%A0%B9%EC%96%B4

- 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