[VUE.JS] 뷰 디렉티브 사용해보기




1. 소개


저번 포스팅에선 뷰를 CDN으로 불러와서 아주 간단하게 맛만보는 방법에 대해서 알아보았다.



이번 포스팅은 그 맛을 조금더 보도록 해보자.



저번 포스팅과 마찬가지로 js피들이나 jsbin 으로 간단하게 해볼수 있는 내용들이다.





vue.js 에는 앵귤러에 있는 디렉티브 라는것이 있다. 앵귤러는 안해봤지만 그런게 있다더라;


엘리먼트에 사용되는 지시문 같은 것인데 사용해보니 오... 이거 좀 짱인듯..


편리한 기능이다!


2. vue 디렉티브 종류



디렉티브의 종류는 13가지 종류가 있고 각 디렉티브의 종류와 기본적인 설명은 여기 에서 확을 해보도록 하자


이번 포스팅에서는 


1) v-text

2) v-html

3) v-show

4) v-if

5) v-else

6) v-else-if

7) v-pre

8) v-cloak

9) v-once



이렇게 9가지에 대해서 알아보도록 하자






3. vue 디렉티브 사용 방법



1)  v-text 디렉티브



저번 포스팅에선 {{}} 이런 모양을 사용했었는데 이번엔 다른 방법으로 엘리멘트 안에 값을 바꿔 보도록 하자


물론 저번과 마찬가지로 jsbin이나 피들을 사용하자


jsbin은  여기서 사용할 수 있다.


이전 포스팅 : 

2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기



HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-cloak>
  <h1>Hello</h1>
  <h2 v-text="value"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



JS


1
2
3
4
5
6
7
8
9
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"안녕?"
}
});
cs



결과




오.. !! 간단!!!!





.



2) v-html


v-html 디렉티브는 value 안에 있는 html을 구현해주는건데 


일단 


위의 코드에서


value를 <h5>야매 가이드</h5>


이렇게 바꾸면




이렇게 출력이 되는데



html의 v-text를 v-html로 바꿔보자



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-cloak>
  <h1>Hello</h1>
  <h2 v-html="value"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"<h5>야매 가이드</h5>"
}
});
cs



결과



이렇게 html이 적용이 되서 출력이 된다.


그러나 악성코드나 XSS등의 위험이 있으니 필터링 잘 걸어놓고 사용하도록 하자.



3) v-show 디렉티브


v-show는 보여줄지 안보여줄지 지정하는 디렉티브다.




html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-show="visible" v-text="value">하이하이</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:"야매 가이드드",
  visible:true
}
});
cs



결과


visible의 값은 true, false 번갈아 가면서 적용을 해보면


true일때는 값이 보이고 false일떄는 보이지 않게 되는 것을 알 수 있다.


그리고  콘솔창에 app.visible = false 입력하면 사라지고


app.visible = true 입력하면 다시 보이게 된다.








4) v-if 디렉티브


v-if는 조건문을 사용 할 수 있는 디렉티브 이다


값이 참이면 보여주고 거짓이면 안보여준다!


html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
11
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:2
}
});
 
 
cs



결과


value 가 2일떄




value 9일때









5) v-else 디렉티브



v-if가 있으니 v-else도 있겠지!



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs


js는 위의 코드 그대로 사용 한다.



결과




6) v-else-if


else가 있으니 else if도 있겠지!!




html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




js 생략



value 값만 바꿔보면됨




결과





7) v-pre 디렉티브


v-pre는 엘리먼트를 무시하는데 사용 합니다.


v-pre가 적영된건 지시문이 없다는걸 인식하고 건너뛰어 버립니다.


내부 자식들 신경 안쓰고 건너뛰어 버리니까 컴파일 속도가 빨라지는 효과를 볼 수가 있다.


지금 테스트 하고 있는 cdn으로 불러와서 사용할떈 저 작업이 브라우저 에서 이루어 지는데


기본적으로 빠르긴 해도 규모카 큰 프로젝트에선 성능이슈가 생길 수 있는데


vue 커맨드 라인 인터페이스를 이용해 사전에 빌드 작업을 거치면 해당 이슈 해결이 가능 하다고 한다.


그런데 어케 하는진 모름 ㅋ  그냥 이런 방법이 있다는걸 알아만 두자.





html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  <h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs





저기서 v-pre를 빼면 콘솔창에 에러메시지가 나타난다.


그런데 v-pre를 쓰면 에러메세지가 안나타남


{{}} 이 값을 뷰에서 값을 가져오는게 아니라 걍 텍스트로 인식하게 함



결과


v-pre 적용




v-pre 제거하면 아래처럼 컴파일 오류가 생긴다.







8) v-cloak 디렉티브



v-cloak 디렉티브는 뷰js가 역할을 전부 수행하고 난 뒤 화면에 표현해주는 역할을 한다.


보통 컴퓨터들 속도 빨라져서 저 기능을 안써도 될거 같긴 한데


속도가 느린 브라우저에서는 v-if나 v-show 기능으로 안보이게 해놓은 엘리먼트들이


뷰 스크립트 구동전에 화면에 나타나고 뷰가 구동되면 사라지게 되는 깜빡임 현상이 나타낼수 있다.


뷰 컨트롤하는 스크립트가 복잡하고 길어지면 성능 좋은 컴퓨터에서도 깜빡임 현상이 일어날수도 있고.



그래서 아얘 스크립트가 전부 구동이 된 후에 화면을 보여주게 만드는 디렉티브다.



대신에 디렉티브 하나만 넣는게 아니라 아래 css 처럼 기본적으로 display:none 를 해주어야 한다


안그러면 소용이 없다.


html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app" v-claok>
  <h1>Hello</h1>
  <h2 v-if = "value > 5">value가 5보다 큼</h2>
  <h2 v-else-if = "value == 5">value가 5다!!!</h2>
  <h2 v-else>value가 5보다 안크다</h2>
  <h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




css


1
2
3
4
[v-cloak] {
display: none;
}
cs










9) v-once 디렉티브


v-once 는 초기 구동 딱 한번만 값을 지정하고 그 이후엔 변하지 않도록 하는 디렉티브 이다.


렌더링을 한번만 하고 그 이후엔 얘는 건들이지 않겠다 라고 선언하는 것이다.



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <h1>Hello</h1>
  <h2 v-once>초기 값: {{ value }}</h2>
<h2>현재 값: {{ value }}</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
11
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
value:5
}
});
 
 
cs



console


app.value = 7


app.value = 0




결과




v-once를 사용하지 않았으면 초기값 현재값 둘다 0이 되어야 하지만


v-once를 사용해 현재값만 0으로 바뀌어 있는걸 확인 할 수 있다.


이 디렉티브는 업데이트 성능을 최적화 할때 사용한다고 하는데


흠.. 뭐 초기값이랑 비교 할떄 사용해도 좋을거 같고 유용해 보인다.







9가지 디렉티브들을 살펴 보았는데


처음 vue가 어려우면 어떡하지 하는 걱정과는 다르게


많이 쉽게 접근할 수가 있었다


물론 나중에 CLI로 실제 프로젝트 할떈 또 어떤 헬파티가 열릴진 모르겠지만.



아주아주 간단하게 서버와 상관없이 클라이언트쪽에서만 vue를 활용해볼수도 있겠다


라는 희망을 주기 딱 좋은 맛보기 였던것 같다.


다음 포스팅에선 이번에 포스팅하지 못했던 나머지 디렉티브들에 대해서 살펴 보기로 하자.

요즘 들어 frontEnd 개발자로 먹고 산다는 것에 큰 부담감을 느끼고 있다.


지금 있는 회사에선 전자정부 프레임워크와 제이쿼리가지고 개발하는 것이 전부


2년동안 이곳에서 개발하며 늘어난 것은 다른 js frameWork를 사용 하는 노하우?


레퍼런스 뒤지기? 구글링?  이정도와 스프링 기반 프레임워크를 조금 다루는 정도의 수준이다



이직을 고민하며 요즘 올라오는 채용글들을 보니 이건또 뭔가 react.js??


불과 얼마전까지만해도 node js와 angular js였던거 같은데... 또 새로운 기술이??


nodejs는 책사놓고 펼쳐보지도 않고 개인적으로 진행하는 프로젝트가 끝나면 시도해 봐야지 하면서도


프로젝트가 끝나지 않아 계속해서 미뤄지고 있는데


react??? 이놈이 뭔가하고 구글링좀 해보니 페이스북 개발자들이 만든거라고 한다


그런데 flux?? webpack?  


http://www.looah.com/article/view/2054 이곳의 글을 보면


HTML과 제이쿼리로 개발하는 나는 원시인이다....


새로운 기술이 내가 프로젝트 몇개 해보기도 전에 마구마구 튀어나온다.


과연 내가 지금 경쟁력이 있는 개발자 일까? 라는 생각도 들고


불과 1년전 까지만 해도 나는 1년차 중에선 개발 잘하는 킹왕짱 개발자야!!!! 라고 자만심에 쩔어있었지만


지금은... 그냥 원시인 개발자가 된 기분이다. 이러다 내가 30대 후반 40대가 되었을때 대체 얼마나 많은것들이 나올까


지금 개발하는 것에서 지루함을 느끼지만 새로운 것을 배운다는 것에 기대감과 두려움과 부담감들이 섞인다.


망할 매일 입고다니는 옷도 트렌드를 못따라가고 있는데 기술 트렌드라니 ㅋㅋㅋㅋ



새로운 기술을 사용하는 곳으로 빨리 이직을 하는 것이 좋을지 지금 회사를 다니면서 따로 새로운 기술을 익히고


이직을 하는것이 좋을지도 고민이고


요즘들어 이런 생각이 만이 든다.

+ Recent posts