[VUE.JS] 뷰 디렉티브 v-bind 사용하기





저번 포스팅에선 뷰 디렉티브의 기본적인 9가지에 대해서 알아 보았습니다.


이번 포스팅에선 뷰 디렉티브중 v-bind에 대해서 알아볼텐데요



v-bind는 제이쿼리의 attr 과 비슷한 기능을 한다고 보시면 됩니다.



이번 포스팅에도 cnd로 불러와 jsbin 에서 실습을 해보겠습니다.



사용법은 이전 포스팅을 참고하세요


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

2018/02/22 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 사용해보기





1. v-bind는 어떤 기능일까?



v-bind는 제이쿼리의 attr과 비슷한 역할을 한다고 했는데


이건 엘리먼트의 상태값을 바꿔줄때 사용하기 때문에 저런 언급을 했습니다.



일단 예를 들어



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">
 
  <img id="img" src="https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs


이런 html 코드를 작성하면





이렇게 웃는 스마일 이미지가 나타납니다.



이때 자바스크립트로 해당 이미지를 바꾸기 위해서


제이쿼리에선


1
$("#img").attr("src","다른이미지 ");
cs




이런식으로 바꿔주죠


일단 우린 vue를 공부하고 있으니까



vue에선 어떻게 사용 할까요?





2. 엘리먼트 속성을 변경하는 방법




1) 틀린 예


v-bind 라는걸 모르는 상태에선


아마 이렇게 사용 할 것 같아요





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">
 
  <img id="img" src="{{smile}}"/>
 
</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: {
name: 'Vue',
smile: 'https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F'
}
});
 
cs






{{}} 태그 안에 값을 넣는 방식으로 시도를 했을겁니다.


하지만 이렇게 하면





이런 에러가 나타나게 됩니다.



설명을 보시면 v-bind를 사용하라고 나오죠



올바른 사용법을 알아 볼까요?



2) 올바른 예(v-bind 사용)




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">
 
  <img id="img" v-bind:src="smile"/>
 
</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: {
name: 'Vue',
smile: 'https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F'
}
});
 
cs






이렇게 작성하면 정상적으로 이미지가 나타나게 됩니다.



여기서 이미지를 제이쿼리에서 attr을 사용하듯 스크립트를 사용해 동적으로 바뀌게 하려면?



.






3. 스크립트를 이용해 동적으로 엘리먼트 속성 바꾸기


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">
 
  <img id="img" v-bind:src="feel?smile:bad"/>
 
</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
12
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
feel:true,
smile: 'https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F',
bad:'https://i.ytimg.com/vi/ir4NgczUrNY/hqdefault.jpg'
}
});
 
cs




이렇게 작성을 해주신후


콘솔창에서





app.feel = false


app.feel = true



요렇게 입력해주시면



false일때는 우는 에비츄가 나오고


true일때는 웃는 스마일 이미지가 나타나게 됩니다.




그런데 코딩할때마다  v-bind 입력하는게 귀찮기도 하고 코드도 길어지는데



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">
 
  <img id="img" :src="feel?smile:bad"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게


v-bind:src="변수" -> :src="변수"


해도 동일하게 적용이 됩니다


익숙해지면 어마어마하게 편할것 같아요!



vue의 v-bind 디렉티브를 사용하면 훨씬 편하고 빠르게 프론트 개발이 가능하게 됩니다.







오늘은 vue의 v-bind 기능에 대해 포스팅을 해봤습니다.


다음 포스팅은 아직 포스팅 하지 않은 나머지 디렉티브에 대해서 포스팅 하겠습니다.




저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기  (1) 2018.02.28
[VUE.JS] 뷰 디렉티브 사용해보기  (0) 2018.02.22
[VUE.JS] VUE[뷰] 시작해보기  (0) 2018.02.19

[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를 활용해볼수도 있겠다


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


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

저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기  (1) 2018.02.28
[VUE.JS] 뷰 디렉티브 v-bind 사용하기  (2) 2018.02.26
[VUE.JS] VUE[뷰] 시작해보기  (0) 2018.02.19

[VUE.JS] VUE[뷰] 시작해보기





요새 프론트 엔드 라이브러리로 핫하다는 vue를 접해 보았다.


접했다는게 정말 손끝으로 살짝 건들여본 정도 ㅋㅋㅋ



얼마전 node.js 와 react.js를 하고 아주아주 기초적인 파이썬을 해보고


이번엔 vue를 건들여 본다 ㅋㅋ





react를 공부해놓고 왜 이번엔 vue 를 사용하는가 라는 물음에 대한 대답은


"그냥! 개발자라면 새로 나왔다는거 한번쯤 건들여 봐야지!"


라고 할수 있겠지만;;;



일단 문서상으론 react보다 뛰어나다고 하니 한번 해보는게 나쁘진 않을 것 같은데


스택오버플로우에서 참고할 레퍼런스들이 아주 적고


react나 angular에 비해서 실제 업무에 적용된 사례가 적기도 해서


현업에서 바로 실서비스에 적용 하는건 아직 무리라고 보고


그냥 한번쯤 해보는건 좋을 것 같다.



이번에 하는 포스팅은 뭔가 대단하게 셋팅을 하고 설정파일들을 만지작 거리는게 아니라


정말 아주 간단하게



CDN으로 불러와서 마치 제이쿼리 쓰듯 사용해 보는 것에 대해서 포스팅 해보도록 한다.







일단 뭐 프로젝트 만들 필요도 없이 맛만 볼거니까


jsBIn 이나 jsfiddle 에서 사용해 보는 것만 테스트 해보도록 하자




jsbin


https://jsbin.com/xojatohopi/edit?html,js,output





jsbin 의 기본적인 화면이다.


여기서 아주아주 간단하게


제이쿼리 집어넣듯



<script src="https://unpkg.com/vue/dist/vue.js"></script>


한줄을 추가해 주도록 하자



1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 hello
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 한줄을 추가 해주면


우린 vue.js 를 사용할 준비가 끝난 것이다.



그럼 이제 body 안에


간단한 문장을 써보도록 하자




.








<h1>hello, yamea</h1>


이라는 한줄을 추가 했는데


이것만 가지고는 vue의 어떤 뭘 사용하는지 모르겠다



여기서 살짝만 변형 시켜 보자



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>JS Bin</title>
 
</head>
<body>
  <div id="app">
    <h1>hello, {{name}}</h1>
  </div>
  
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 작성 하면




이렇게 나온다



이제 vue의 기능을 이용해 저 {{name}} 의 텍스트를 바꿔 보도록 하자



자바스크립트에 아래 코드를 추가 해준다



1
2
3
4
5
var app = new Vue({
  el:'#app',
  data:{name:"cheesu's yamea"}
  
});
cs




이런 스크립트 코드를 추가 해주면





짠!


이렇게 된다


마치 EL태그의 jstl 을 스크립트로 사용하는 것 같은 기분이 든다



그럼 여기서 추가로 한가지만 더 해보도록 하자



위의 콘솔 버튼을 클릭해서





app.name = "추천 눌러줘"


를 입력하고 엔터를 누르면 {{name}}의 내용이 바뀐다!





기본적인 기능은 여기까지다



아주 쉽지 않은가?


와.. 이정도면 그냥 써먹어도 되겠다


react를 처음 접할때보다 뭔가 장벽이 어마무시하게 낮아진 기분이다.


react보다 vue의 러닝커브가 훨씬 작다고 하니


간단하게 사이드 프로젝트 정도는 해볼만 한 것 같다.



나도 여기까지 밖에 안해봤으니


다음 포스팅에선 조금더 심화적인 단계로 넘어가 보도록 하자.

저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기  (1) 2018.02.28
[VUE.JS] 뷰 디렉티브 v-bind 사용하기  (2) 2018.02.26
[VUE.JS] 뷰 디렉티브 사용해보기  (0) 2018.02.22

[JXLS] JAVA SPRING 데이터 엑셀출력 및 셀병합, merge 하는 방법







웹프로젝트를 개발하다보면


테이블이나 어떤 데이터들을 엑셀로 다운받는 기능을 만들어야 하는 경우가 있다.



일단 엑셀로 만드는게 POI만 쓰면 진짜 더럽게 귀찮아진다.


그렇다고 제이쿼리 excel export를 쓰자니


페이징처리된 테이블의 데이터들을 뽑기가 애매하고


1만로우쯤 되었을때 그걸 다 테이블에 append 시키기도 오바같다



그래서 찾다찾다 찾아낸것이


JXLS


일단 jxls는 poi 기반으로 만들어졌다.


사용법은


정말 간단하다.


그냥 마이바티스에서 db데이터 뽑아서


페이지로 날려주는 그 모델


해쉬맵데이터 형식으로뽑은걸 그대로 사용하면 된다


엑셀에 위치 지정이나 반복되는것은 


미리 엑셀 템플릿을 만들어 놓으면


그대로 들어간다.



일단 셋팅 방법부터 알아보도록 하자.


전자정부 기준이로 설명 한다.




1. pom.xml  


pom.xml의 dependency 부분에 아래 코드를 넣어 주도록 하자.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 엑셀 다운로드 -->
        
        <dependency>
              <groupId>net.sf.jxls</groupId>
               <artifactId>jxls-core</artifactId>
             <version>1.0.6</version>
        </dependency>
       <dependency>
            <groupId>org.jxls</groupId>
            <artifactId>jxls-poi</artifactId>
            <version>1.0.13</version>
        </dependency>
        <dependency>
            <groupId>org.jxls</groupId>
            <artifactId>jxls</artifactId>
            <version>2.4.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.14</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.14</version>
        </dependency>
        <dependency>
            <groupId>org.jxls</groupId>
            <artifactId>jxls-jexcel</artifactId>
            <version>1.0.6</version>
        </dependency>
cs




위에서 말했듯 jxls는 poi를 사용하기 때문에 poi도 받아주어야 한다.





2. 엑셀만들고 다운로드 받는 클래스


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package 패키지 경로;
 
import java.io.BufferedInputStream;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.sf.jxls.exception.ParsePropertyException;
import net.sf.jxls.transformer.XLSTransformer;
 
import org.apache.poi.openxml4j.exceptions.InvalidFormatException;
import org.apache.poi.ss.usermodel.Workbook;
 
// MakeExcel이라는 클래스를 만들고 그 안에 downliad라는 메소드를 생성한다.
public class MakeExcel {
    public void download(HttpServletRequest request, HttpServletResponse response,
                    Map<String, Object> bean, String fileName, String templateFile, String string)
                    throws ParsePropertyException, InvalidFormatException {
 
        // 받아오는 매개변수 bean는 디비에서 뽑아온 데이터
        // fileName 은 다운로드 받을때 지정되는 파일명
        // templateFile 는 템플릿 엑셀 파일명이다.
        
        // tempPath는 템플릿 엑셀파일이 들어가는 경로를 넣어 준다.
        String tempPath = request.getSession().getServletContext().getRealPath("/WEB-INF/excel");
        
 
        // 별도로 다운로드 만들기 귀찮으까 이런식으로 만들어서 바로 엑셀 생성후 다운 받게 
        try {
 
            InputStream is = new BufferedInputStream(new FileInputStream(tempPath + "\\" + templateFile));
            XLSTransformer xls = new XLSTransformer();
            
            
            Workbook workbook = xls.transformXLS(is, bean);
            
            
            response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + ".xlsx\"");
            
            OutputStream os = response.getOutputStream();
            
            workbook.write(os);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
cs



3. 엑셀 다운로드 요청 및 데이터가져오는 메소드



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 @RequestMapping(value = "/downExcel.do")
        public void listExcel(HttpServletRequest request,
                HttpServletResponse response, VO vo,
                ModelMap modelMap) throws Exception, Exception {
 
            
            // 그냥 평소에 마이바티스에서 데이터 뽑는 방법으로 데이터를 가져온다.
            List<VO> dataList = trs01Service.selectGroupList(groupVO);
            
            
            // 받은 데이터를 맵에 담는다.
            Map<String, Object> beans = new HashMap<String, Object>();
            beans.put("dataList", dataList);
            
            // 엑셀 다운로드 메소드가 담겨 있는 객체
            MakeExcel me = new MakeExcel();
 
            me.download(request, response, beans, "다운받을때지정될 엑셀파일명", "엑셀템플릿 파일 명.xlsx", "무시해도됨");
        }
cs





이렇게 하면 자바에서 할 건 끝났다.



막 예전에 POI에서 셀위치 지정하고 했던것들은 하지 않아도 된다!!



저 템플릿위치에 아래 4번에서 만든 템플릿 엑셀파일을 넣어놓고


3번에서 만든 메소드를 호출하면 해당 데이터를 담은 엑셀을 다운로드 받게 된다.


정말 너무너무 간단하다.




4. 템플릿 엑셀 예제





위 그림과 같이 JSTL 쓰던것 처럼 적어주면 된다.


저렇게 적으면 콜렉션일 경우 자동으로 반복까지 해준다.


그냥 저렇게만 만들어 두면 저 위치부터 아래로 쭉쭉 엑셀데이터가 입력 되는 것이다.



엄청나다.





5. 셀병합, merge






이런식으로 셀병합을 하고 이름옆에 3줄로 다른 정보를 반복시켜야 하는 경우가 있다.



그냥 4번에 있는식으로 템플릿만들어서 적으면 에러난다.


java.lang.NullPointerException

at net.sf.jxls.util.Util.shiftColumnUp(Util.java:335) ~[jxls-core-1.0.6.jar:?]

at net.sf.jxls.util.Util.shiftUncoupledCellsUp(Util.java:315) ~[jxls-core-1.0.6.jar:?]

at net.sf.jxls.util.Util.duplicateRow(Util.java:246) ~[jxls-core-1.0.6.jar:?]

at net.sf.jxls.controller.SheetTransformationControllerImpl.duplicateRow(SheetTransformationControllerImpl.java:140) ~[jxls-core-1.0.6.jar:?]

at net.sf.jxls.transformer.CollectionRowTransformer.processRowCollections(CollectionRowTransformer.java:106) ~[jxls-core-1.0.6.jar:?]

at net.sf.jxls.transformer.CollectionRowTransformer.transform(CollectionRowTransformer.java:66) ~[jxls-core-1.0.6.jar:?]



이런 에러가 막 뿜어져 나올 것이다.


왜 에러가 나느냐..


템플릿을 잘못 만들었기 때문이다.


이걸 보는 여러분들도 템플릿으로 이것저것 에러뿜어가면서 테스트 하다보면


알수 있을 이유이다


그냥 해결방법만 간단하게 말하면





이런식으로 셀병합한 위치에 들어가는 데이터 옆에 //:숫자  를 넣어 주면 된다.


만약 데이터가 3칸을 병합해서 세줄단위로 넘어가야 하는 경우


0 , 1, 2  로 세서 숫자 2를 넣어주면 된다.



머지를 하지 않더라도


2줄단위로 반복하거나 3줄단위로 반복하게 하는 경우에도 동일하게 적용하면 된다.



JXLS의 가장 좋은 장점은 데이터 넣는곳 템플릿에 스타일 넣어주면 그 스타일도 같이 반복이 된다.


아주 훌륭하다


저작자표시 비영리

'Yame Programmer > 전자정부프레임워크' 카테고리의 다른 글

[JXLS] Cannot add merged region to sheet because it overlaps with an existing merged region 오류 해결 방법  (5) 2017.09.19
[Spring] MyBatis Batch + Transaction 을 이용한 대용량 SQL작업  (1) 2017.05.15
[톰캣 서버] 같은 IP(도메인) 다른 포트일때 세션 공유 로그인 튕김 현상  (0) 2017.02.10
[Spring, Log] 로그가 안보일때, 쿼리가 안나타날때 로그 출력하는 방법  (1) 2016.10.05
[JSTL] if문 else(choose)문 사용하는 방법  (2) 2016.07.04

[안드로이드] 간단하게 웹뷰 구현


간다하게 안드로이드의 웹뷰를 구현해 보도록 하자



1. 메인 액티비티 소스 (MainActivity.java 소스)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package com.pois.mtrs_test;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
import static com.pois.mtrs_test.R.id.webView;
public class MainActivity extends AppCompatActivity {
    private WebView mWebView;
    private String myUrl = "file:///android_asset"; // 접속 URL (내장HTML의 경우 왼쪽과 같이 쓰고 아니면 걍 URL)
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 웹뷰 셋팅팅
        mWebView = (WebView) findViewById(webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        //mWebView.loadUrl("http://www.pois.co.kr/mobile/login.do");
 
        mWebView.loadUrl(myUrl + "/html/test.html"); // 접속 URL
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClientClass());
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
 
    private class WebViewClientClass extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.d("check URL",url);
            view.loadUrl(url);
            return true;
        }
    }
 
 
}
cs




14번 라인의 myurl은 http를 포함한 도메인 주소를 넣으면 된다. 나중에 편하게 쓸일 있을까 해서 걍 변수 처리 한것


23번 라인은 자바스크립트 허용 유무에 대한 것



27번은 웹뷰에 크롬을 사용한다고 하는 건데 저거 안하고 그냥 웹뷰만 쓰면


alert같은 알림창이 뜨지 않는다.


28번 라인에서 셋웹뷰를 한것은


39번부터 시작하는 클래스를 사용하는데


저거 안하면 html 내부에서 다른 페이지로 이동을 할 수가 없다. 그떄그떄 해당 url을 웹뷰에 셋팅해주는 역할을 한다.



2. AndroidManifest.xml 설정 인터넷 퍼미션 추가



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.xxx.xxx">
 
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>
cs



5번 라인의 인터넷 퍼미션을 추가해줘야 해당 앱에서 인터넷에 접속할수 있다.


간단하게 앱에서 인터넷 사용할 권한을 주는 것이다.



3. layout



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xxx.xxxx.MainActivity">
 
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        >
 
 
    </WebView>
 
</LinearLayout>
cs



레이아웃 구조는 이렇게 해주자


웹뷰는 그냥 꽉차게 보여줄거니까 매치 패런트로 해놓는다.



.


저작자표시 비영리

'Yame Programmer > Android' 카테고리의 다른 글

[안드로이드] androidBridge they will not be visible in API 17 오류 해결 방법  (0) 2017.08.03
[안드로이드] 인터넷 연결상태 확인하는 방법  (1) 2017.08.03
[안드로이드] FCM 화면 깨우기 화면 켜지게 하는 방법  (11) 2017.07.12
[안드로이드] FCM 백그라운드에서 진동 오도록 하는 방법  (9) 2017.07.12
[안드로이드] FCM 토큰 저장방법 개별 보내는 방법 SharedPreferences 사용  (1) 2017.07.10

[리니지M] 마법인형과 변신 방법


리니지 M 홈페이지에 올라와 있는 글이다.


리니지M에서 중요한 변신과 마법인형의 경우, 원작의 요소를 리니지M 환경에 맞춰서 계승한 컨텐츠 입니다.
이에 대해 리니지M에서 마법인형과 변신에 대해 정보를 안내 드리고자 합니다. .

● 변신 카드
- 기존 PC에서는 변신의 기준이 직업별 레벨이었으나, 리니지M에서는 변신카드 획득을 통해 해당 변신 카드의 보유 여부가 기준이 됩니다.
- 변신카드는 총 5개의 등급으로 구분됩니다.


- 변신카드는 1번이라도 획득하면, 고객님의 계정 어떤 캐릭터라도 변신이 가능합니다.
예시] 52레벨 기사 캐릭터로 군터 변신카드 획득 후 신규 캐릭터를 생성하면,  1레벨 캐릭터가 군터 변신 선택 가능

- 변신카드의 대상으로 변신을 위해서는 꼭! 변신 주문서를 상점에서 구입하여, 사용 하셔야 합니다.
- 변신카드 목록 중 획득한 변신 카드의 조합에 따라 변신 컬렉션이 발동됩니다.
변신 컬렉션은 계정 단위로 적용되며, 더 많은 변신 카드를 수집할수록 더 많은 효과가 계정에 적용 됩니다.
- 변신 카드의 경우, 계정 최초 1회 획득 이후에는 변신 카드가 자동으로 쌓이며, 동일 등급의 변신 카드 4장이 있을 경우
상위 단계 카드를 획득 할 수 있는 [변신 카드 합성]이 가능합니다.  



예시1]
희귀 등급 아크 위자드 카드를 5장 획득 -> 계정 최초 변신목록 획득 1장을 제외한 4장의 카드가 보관

예시2]
합성 가능 사례 : 일반 등급 오크 변신 카드 5장 -> 합성 기회 1회
합성 불가 사례 : 일반 등급 오크 변신 카드 2장, 희귀 등급 데스나이트 변신 카드 2장 -> 합성 불가

- 변신 카드 중 일부 카드의 경우에는 오직 [변신 카드 합성] 으로만 획득 가능한 카드가 존재 합니다.
- 합성에 성공할 경우, 상위 등급의 변신 카드 중 1개를 랜덤하게 획득합니다. 실패할 경우에는 재료로 쓰인 4장의 카드 중
1장만 돌려 받게 됩니다.
 

● 마법인형 카드
- 마법인형 카드는 1번이라도 획득하면, 고객님의 계정 어떤 캐릭터라도 소환이 가능합니다.
예시] 52레벨 기사 캐릭터로 나이트발드 마법인형 카드 획득 후 신규 캐릭터를 생성하면, 1레벨 캐릭터가 나이트발드 마법인형 소환가능
- 마법인형은 총 5개의 등급으로 구분됩니다.


- 마법인형을 소환하기 위해서는 꼭! 마법인형 소환 주문서를 상점에서 구입하여, 사용 하셔야 합니다.
- 마법인형 카드 목록 중 획득한 마법인형의 조합에 따라, 마법인형 컬렉션이 발동됩니다.
마법인형 컬렉션은 계정 단위로 적용되며, 더 많은 마법인형 카드를 수집할수록 더 많은 효과가 계정에 적용 됩니다.
- 마법인형 카드의 경우, 계정 최초 1회 획득 이후에는 마법인형 카드가 자동으로 쌓이며, 동일 등급의 마법인형 카드 4장이
있을 경우, 상위 단계 카드를 확률적으로 획득 할 수 있는 [마법인형 카드 합성]이 가능합니다.  
예시1]
일반 등급 늑대인간 마법인형 카드를 5장 획득 -> 계정 최초 마법인형 목록 획득 1장을 제외한 4장의 카드가 보관
예시2]
합성 가능 사례 : 일반 등급 늑대인간 마법인형 카드 5장 -> 합성 기회 1회
합성 불가 사례 : 일반 등급 늑대인간 마법인형 카드 2장, 고급 등급 장로 마법인형 카드 2장 -> 합성 불가
- 마법인형 카드 중 일부 카드의 경우에는 오직 [마법인형 카드 합성] 으로만 획득 가능한 카드가 존재 합니다.
- 합성에 성공할 경우, 상위 등급의 마법인형 카드 중 1개를 랜덤하게 획득합니다. 실패할 경우에는 재료로 쓰인 4장의 카드 중 1장만 돌려 받게 됩니다.


저작자표시 비영리

'Yame Game Life > Lineage M' 카테고리의 다른 글

[리니지M] 리니지M 발열 해결 방법  (0) 2017.06.21
[리니지M] 사전 캐릭터 확인 방법  (0) 2017.06.21
[리니지M] 리니지M도 결국 뽑기 게임인가  (0) 2017.06.21
[리니지M] 리니지M 드디어 오픈 인게임 리뷰  (0) 2017.06.21
[리니지M] 사전 혈맹 창설 및 가입  (0) 2017.05.18

+ Recent posts

티스토리툴바