# 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 속성이 none으로 바뀌는 것이기 때문에, DOM으로는 남아 있다)

# npm

• npmjs

• 버전 관리를 용이하게 하기 위함.

• 버전이 다르다면 가져온 라이브러리가 호환이 안될 수도 있기 때문에, 그것을 해결하기 위해서 npm이 필요하다.

• npm i @vue/cli -g로 설치한다.

• npm init -y로 package.json 생성

• package-lock.json : 특정 라이브러리를 설치할 때 또 다른 라이브러리를 설치해야 할 수도 있기 때문에 생기는 것

npm i query와 같이 라이브러리를 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은 인터넷 연결이 되지 않으면 사용 불가하다.
• set-up된 project에서 개발하기 위해 Vue CLI를 쓰는 것이다. (명령어로 프로젝트 구성하는 도구)

1. vue create todo-app (프로젝트 생성, 생성 option은 사전 설정 없으면 defalut로 하면 된다)
2. cd todo-app
3. npm run serve (프로젝트 실행)

• 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를 들고 오기 위해서,

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

component가 생성되자마자 호출된다.

# Container presentational component

해당 내용이 잘 정리된 자료