CLI를 통한 프로젝트 생성(6)

Dec 19, 2019 in vue, vue 기본문법

CLI는 .vue파일을 웹브라우저가 인식할수 있는 형태의 파일로 변환해주는 웹팩이나 브라우저리파이 같은 도구들이 적용된 초기 프로젝트 구조를 쉽게 구성하게 해주는 역할을 합니다.

설치 방법

1	npm install vue-cli -global

사용방법

고급 웹팩 기능을 활용한 구성입니다.

1	vue init webpack

웹팩의 최소 기능만을 구성합니다.

1	vue init webpack-simple

고급 브라우저리파이 기능을 활용합니다.

1	vue init browserify

브라우저리아피의 최소기능만을 구성합니다.

1	vue init browserify-simple

최소 뷰 기능만이 들어간 HTML 파일 1개를 생성합니다.

1	vue init simple

웹팩 기반의 프로그래시브 웹앱기능을 지원합니다.

1	vue init pwa

기타

고급기능들은 테스팅, 문법 검사등도 지원합니다.
CLI를 통해 설치 후에 npm install을 통해 뷰 애플리케이션 구동을 위한 라이브러리를 다운 받아야 합니다.
웹팩은 자체 서버(노드 서버)를 제공해 주기 때문에 npm run dev를 통해서 실행 가능합니다.

Comment and share

뷰 디렉티브(5)

Dec 18, 2019 in vue, vue 기본문법

1. v-if

v-if는 조건부로 렌더링을 할때 사용을 합니다. 조건부가 참이면 렌더링을 거짓이면 렌더링을 하지 않습니다. 조건을 만족하지 않으면 렌더링 자체를 하지 않기때문에 돔에 추가 되지 않습니다.

1	<div v-if="type === 'A'">v-if를 사용해보겠습니다.</div>

v-else도 사용 가능합니다.

1 2	<div v-if="type === 'A'">참이면 실행하세요.</div> <div v-else>거짓이면 실행하세요.</div>

v-else-if도 사용가능합니다.

1 2	<div v-if="type === 'A'">type이 A이면 실행하세요.</div> <div v-else-if="type === 'B'">type이 B이면 실행하세요.</div>

조건에 따라서 화면에 보이거나 숨겨야 하는 경우 v-if를 사용하면 좋습니다. 하지만 토글기능을 사용해야 할 경우에는 렌더링을 다시 해주어야 하기 때문에 v-if 보다는 v-show가 좋을수있습니다. template 태그에서도 사용가능합니다.(template 태그 그 자체는 사용해도 화면에 렌더링 되지 않고 내부 자식 태그들만 렌더링 해줍니다.)

2. v-show

v-show는 v-if랑 비슷한 역할을 합니다. v-if랑 다른 건 렌더링은 모두 하지만 숨기고 보이는 건 css의 display none 속성을 사용합니다. v-if와 마찬가지로 조건을 만족하면 화면에 보이고 만족하지 않으면 보이지 않습니다.

1	<div v-show="true">v-if를 사용해보겠습니다.</div>

잦은 보이거나 숨기는 기능을 사용하게 된다면 v-show를 사용하면 좋습니다(렌더링을 다시 하는 것보단 css로 none또는 block하는게 더 효율적). v-show는 초기 렌더링 비용이 높기 때문에 유의 해야 합니다.

3. v-for

v-for는 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복해서 출력 합니다. 대상은 Array뿐아니라 Object도 가능합니다.

1
2
3

<ul>
    <li v-for="item in list">{{item}}</li>
</ul>

for문에 대한 index도 사용 가능합니다.

1
2
3

<ul>
    <li v-for="(item, index) in list">{{index + ' : ' + item}}</li>
</ul>

정리

하나의 태그에 두개 이상의 다중 for문은 작성이 불가능합니다.
v-if랑 함께 사용은 가능 하나 공식가이드에서는 권고하지 않습니다.
for문을 사용할때는 :key 속성을 부여하는게 좋습니다(값은 유일값으로).
컴포넌트에도 v-for를 사용 가능합니다.
2.2 버전 이상부터는 :key 속성을 사용하여야 합니다(유일 값).
template 태그에서도 사용 가능합니다.
리스트뿐 아니라 객체도 사용가능 => Collection에서 사용가능

4. v-bind

v-bind는 HTML 속성 값에 데이터를 바인딩하거나 하위 컴포넌트의 props 속성에 값을 바인딩 할때 사용합니다. 사용방법은 v-bind:속성명="데이터" 또는 축약으로 :속성명="데이터"으로도 사용가능합니다.

1 2	<div v-bind:id="type"></div> <!-- 데이터 type의 값이 바인딩 됩니다. --> <div v-bind:id="'type'"></div> <!-- type이라는 문자열으로 설정합니다. -->

class 속성에 객체를 전달할 수도 있습니다. 객체를 활용하면 여러개의 class를 쉽게 바인딩 할수 있습니다. 객체의 값이 true면 해당 객체의 key명이 class로 지정됩니다.

1 2	<div v-bind:class="{active: true}"></div> <div v-bind:class="{active: true, on: true}"></div>

5. v-model

v-model은 form에서 주로 사용되는 속성입니다. 폼에 입력한 값을 뷰의 데이터와 바인딩하는 역할을 합니다. 다른 디렉티브와는 다르게 양방향으로 바인딩 되기 때문에 input에 값을 입력하면 뷰의 데이터도 변경이
됩니다. v-model에서 사용하는 태그는 input, select, textarea 등이 있습니다.

1	<input type="text" v-model="value">

여러 체크박스를 하나의 배열로 바인딩 할수 있습니다. 체크를 하게 되면 배열에 하나씩 추가 됩니다.

1
2
3

<input type="checkbox" value="김씨" v-model="checkboxNames">
<input type="checkbox" value="이씨" v-model="checkboxNames">
<input type="checkbox" value="박씨" v-model="checkboxNames">

.number 수식어를 사용하면 자동으로 숫자로 형변환은 해줍니다.

1	<input type="text" v-model.number="num">

.trim 수식어를 사용하면 자동으로 trim을 해줍니다.

1	<input type="text" v-model.trim="value">

6. v-on

v-on은 이벤트를 감지하는 기능입니다. 사용하는 방법은 v-on:이벤트명="실행부"이고 축약은 @이벤트명="실행부" 입니다. 이벤트가 발생해서 메서드를 호출하면 파라미터로 아무것도 넘기지 않았다면 event가 넘어옵니다.

1	<button v-on:click="onClick">클릭</button> <!-- onClick은 메서드로써 괄호()는 넣지 않아도 됨 -->

이벤트를 실행시킬때 파라미터를 넘겨줄수 있습니다.

1	<button v-on:click="onClick('type')"></button> <!-- 해당 버튼을 눌렀을 때 onClick 메서드를 호출하면서 type이라는 문자열을 파라미터로 전달 -->

사용자 파라미터를 넘겨주면서 이벤트 객체도 넘겨 줄때는 $event를 사용합니다.

1	<button v-on:click="onClick('type', $event)"></button>

.stop 수식어를 통해서 버블링을 막을수 있습니다.

1	<button v-on:click.stop="onClick">버튼</button>

.prevent 수식어를 통해서 event.preventDefault() 역할을 대신 할수있습니다.

1	<form v-on:submit.prevent="onSubmit"></form>

.once 수식어는 최대 한번만 실행 가능하도록 설정합니다.

1	<form v-on:submit.once="onSubmit"></form>

키에 대한 수식어를 사용 가능합니다. 종류에는 .enter, .tab, .delete(Delete와 Backspace 모두), .esc, .up, .down, .left, .right가 존재하며 config.keyCodes를 통해서 사용자 정의 키 수식어를 만들수도 있습니다.

1	<input type="text" v-on:keyup.enter="onSubmit">

수식어는 체이닝이 됩니다.
이벤트는 기본이벤트 뿐 아니라 사용자 정의 이벤트도 사용가능합니다.

Comment and share

뷰 옵션(4)

Dec 18, 2019 in vue, vue 기본문법

1. 인스턴스 생성시에 옵션

1) template

해당 하는 타겟에 HTML 요소를 삽입해줍니다.

사용방법

루트 태그는 오직 하나만 존재하여야 합니다. 하위 태그는 상관 없습니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>안녕하세요</p><button>클릭</button></div>'
    });
</script>
</body>
</html>

2) data

뷰 인스턴스의 데이터 값을 설정할때 사용합니다.

사용방법

데이터 바인딩 할때 사용이 가능합니다.
template 영역에도 {{}}를 사용해서 데이터 바인딩이 가능합니다.
데이터 타입은 number, string, object, array등 모두 가능합니다.
뷰 인스턴스의 메서드 속성에서 this.data키 로 접근 가능합니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{message}}</p><button>{{obj.button}}</button></div>',
        data: {
            message : '안녕하세요',
            obj : {
                button: '클릭'
            }
        }
    });
</script>
</body>
</html>

3) methods

말그대로 메서드를 정의 할수있는 속성입니다. 맨 뒤에 s를 잊지 맙시다.

사용방법

1
2

뷰 인스턴스의 각 메서드 내부에서 this.메서드이름으로 호출 가능합니다
{{}} 내부에서도 메서드를 호출 가능합니다. 이땐 this를 생략하고 메서드이름으로 호출 할수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{message + "" + add()}}</p></div>',
        data: {
            message: '10 곱하기 10은 ',
            num: 10
        },
        methods: {
            add() {
                return this.num * this.num
            }
        }
    });
</script>
</body>
</html>

4) computed

복잡한 계산을 처리 한 후에 데이터를 출력해야 하는 경우에 사용할수 있습니다. 메서드를 호출할때랑 다르게 ()를 사용하지 않습니다.

사용용도

데이터를 처리하는 로직을 실행한 후에 화면에 출력 해야 하는 경우 methods 대신에 computed를 사용하도록 합시다.
computed 내부에서 사용한 값의 변화가 발생 할때 재연산해서 결과를 다시 렌더링 해줍니다.

장점

동일한 연산은 반복해서 처리하지 않고 미리 저장해 놓은 값을 불러옵니다.
여러번 호출 되어도 캐싱에 의해서 한번만 처리하기 때문에 속도 상승
methods는 호출 할때마다 실행되기 때문에 computed를 사용할수 있는 경우에는 computed를 사용합시다.

주의 사항

computed 그 자체의 값은 data 처럼 변경이 불가능 하다
computed의 set 메서드를 활용하여 우회해서 값을 변경하는 것이 가능한데 이것 또한 직접 computed의 값을 변경하는게 아닌 computed와 연계되는 대상의 값을 변경하는 방식

data() {
    num1 : 10,
    num2 : 20
},
computed: {
    get sum() {
        return this.num1 + this.num2;
    },
    set sum() {
        this.num2 = 30;
    }
}

메소드는 호출 한 횟수만큼 실행되는 것을 알수있다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{sum()}}</p><p>{{sum()}}</p></div>',
        data: {
            num1: 10,
            num2: 20
        },
        methods: {
            sum() {
                console.log("sum을 실행합니다.");

                return this.num1 + this.num2;
            }
        }
    });
</script>
</body>
</html>

computed는 캐시 기능으로 값의 변화가 없으면 한번만 실행된다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{sum}}</p><p>{{sum}}</p></div>',
        data: {
            num1: 10,
            num2: 20
        },
        computed: {
            sum() {
                console.log("sum을 실행합니다.");

                return this.num1 + this.num2;
            }
        }
    });
</script>
</body>
</html>

5) watch

computed와 유사한 기능을 제공하지만 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합합니다. 값이 변경이 되면 포착하여 해당 메서를 호출해 줍니다.

사용방법

data 속성의 값을 메서드의 이름으로 작성하면 해당 data의 값이 변경이 되면 해당 메서드가 호출됩니다.

사용용도

사용자의 input 값 변경에 따른 로직을 처리할때 사용합니다.
DB등과 같은 비동기 처리 후에 해당 값이 변경 되었을 때 로직을 처리할때 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{num2}}</p><button>{{setNum()}}</button></div>',
        data: {
            num1: 10,
            num2: 20
        },
        methods: {
            setNum() {
                this.num1 = 30;

                return this.num1;
            }
        },
        watch: {
            num1() {
                this.num2 = 40;
            }
        }
    });
</script>
</body>
</html>

Comment and share

뷰 라이프사이클(3)

Dec 18, 2019 in vue, vue 기본문법

설명

vue는 여러 종류의 라이프 사이클을 가집니다. 각각의 라이프 사이클 마다 사용자 정의 로직을 실행할수 있는 라이크 사이클 훅을 호출 합니다.

라이프사이클 훅의 종류

1. beforeCreate

인스턴스를 생성 후 가장 먼저 실행되는 라이프 사이클 단계입니다. 이 단계에서는 data및 methods 속성이 정의되어 있지 않습니다.

2. created

beforeCreate 다음 실행 단계로써 data 및 methods 속성에 접근이 가능합니다. 아직까지 화면에 부착전이기 때문에 돔 요소에 접근은 불가능합니다.

사용용도

보통 이 단계에서 서버에서 데이터를 요청하여 받아오는 로직을 수행하기에 좋습니다
이 단계부터 data나 속성 등에 접근이 가능하기 때문에 화면에 부착하기 전 data등의 속성에 값을 변경 시키는 등의 작업을 이 단계에서 진행합니다.

3. beforeMount

화면에 인스턴스를 부착하기 전 단계입니다.

사용용도

render 함수가 호출 되기 직전의 로직을 추가하기에 좋습니다.

4. mounted

화면에 인스턴스가 부착되고 난 후에 호출 되는 단계입니다. 이때 부터 template 속성에 정의한 화면요소에 대한 접근이 가능합니다. 돔에 인스턴스가 부착되자마자 바로 호출 되는 단계라서 하위 컴포넌트나 외부 라이브러리에 의해 추가 된 화면 요소들이 HTML 코드로 변환되는 시점과 다를수있습니다.

사용용도

이 단계부터 template 속성의 값이 화면에 부착되었기 때문에 돔에 접근을 할때 사용합니다.

5. beforeUpdate

: 인스턴스에 정의 된 속성이 변경되어 돔으로 화면을 다시 그리기 전 단계입니다.

아직 화면에 그려지기 전에 변경 된 데이터에 접근이 가능합니다. 이때 값을 변경하는 로직을 넣어 렌더링이 발생하더라도 트리거 되지 않습니다.

6. updated

변경 된 데이터가 화면으로 그려지고 난 후 실행되는 단계입니다. 이 단계에서 값을 변경 할 경우 무한루프에 빠질 수 있습니다.

사용용도

인스턴스의 속성 값이 변경 될때 값을 변경하는 로직을 실행해야 한다면 beforeUpdate에서 작성을 하고 updated에서는 속성 값이 변경 될때 화면 구성요소와 관련 된 작업을 이단계에 넣습니다.

7. beforeDestory

뷰 인스턴스가 파괴되기 직전에 호출 되는 단계입니다.

사용용도

뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다. 이벤트버스를 사용 할때 해당 컴포넌트가 삭제가 되어도 그대로 남아 있어서 이벤트가 여러번 실행되는 경우가 발생합니다. 해당 컴포넌트에서 이벤트버스 $on을 사용했다면 여기에서 $off 추가합시다.

8. destroyed

뷰 인스턴스가 파괴되고 난 후 호출되는 단계입니다.

new Vue({
    el: '#app',
    beforeCreate() {

    },

    created() {

    },

    beforeMount() {

    },

    mounted() {

    },

    beforeUpdate() {

    },

    updated() {

    },

    beforeDestroy() {

    },

    destroyed() {

    }
})

뷰 라이프 사이클

https://kr.vuejs.org/v2/guide/instance.htm 인용

Comment and share

뷰 기본용어(2)

Dec 18, 2019 in vue, vue 기본문법

1. 데이터 바인딩

데이터 바인딩이란 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 말합니다. 데이터 바인딩 방법에는 v-bind, v-model등이 존재 합니다.

1	{{ 변수 }} 또한 바인딩에서 사용

2. 디렉티브

디렉티브란 v- 접두사를 가지는 모든 속성들을 의미합니다.

디렉티브 종류

1. v-if
2. v-show 
3. v-for
4. v-bind
5. v-model
6. v-on

Comment and share

뷰 시작하기(1)

Dec 18, 2019 in vue, vue 기본문법

Vue를 구성하는 기본적인 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">{{message}}</div>
<div id="div">{{message}}</div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message : '안녕하세요. vue의 세계에 오신걸 환영합니다.'
        }
    });
</script>
</body>
</html>

1. 먼저 new Vue()를 통해서 vue 인스턴스를 생성 할 수 있습니다.
2. vue 인스턴스를 생성시에 옵션을 줄수있습니다
    - el은 vue와 연결할 돔의 타겟을 설정 합니다.
    - data속성은 vue 인스턴스의 데이터를 설정 할수있습니다.
    - {{}}를 이용하여 vue 인스턴스와 HTML을 바인딩 하여 data속성 중 message의 값을 설정하였습니다.  
      그래서 타겟 영역 안에 있는 {{message}}는 '안녕하세요. vue의 세계에 오신걸 환영합니다.'로 바뀐것을 확인 할수 있습니다.
      하지만 타겟 영영 밖에 있는 곳은 데이터 바인딩 처리가 되지 않아 문자 그대로 {{message}}가 출력 된것을 확인 할수 있습니다.

Comment and share

NEWER POSTS
page 3 of 3

CLI를 통한 프로젝트 생성(6)

설치 방법

사용방법

기타

뷰 디렉티브(5)

1. v-if

2. v-show

3. v-for

정리

4. v-bind

5. v-model

6. v-on

뷰 옵션(4)

1. 인스턴스 생성시에 옵션

1) template

사용방법

2) data

사용방법

3) methods

사용방법

4) computed

사용용도

장점

주의 사항

5) watch

사용방법

사용용도

뷰 라이프사이클(3)

설명

라이프사이클 훅의 종류

1. beforeCreate

2. created

사용용도

3. beforeMount

사용용도

4. mounted

사용용도

5. beforeUpdate

6. updated

사용용도

7. beforeDestory

사용용도

8. destroyed

뷰 기본용어(2)

1. 데이터 바인딩

2. 디렉티브

디렉티브 종류

뷰 시작하기(1)

Moon Star