Computed Property (계산형 속성)


앞서 v-bind 디렉티브를 이용한 간단한 데이터 바인딩 방법을 설명했는데 만약 연산 로직이 필요한 경우에는 이 방법만으로는 문제를 해결하기가 쉽지 않다.


Vue.js의 Computed Property(계산형 속성)은 이러한 문제를 해결해주는 방법 중의 하나이다.  Vue 객체를 만들때 computed 속성과 함께 함수를 등록해두면 마치 속성처럼 이용할 수 있다.


<body>
<div id="exmaple">
<input type="text" v-model="num" /><br/>
1부터 입력된 수까지의 합 : <span>{{ sum }}</span>
</div>
<script tpye="text/javascript">
var vmSum = new Vue({
el: '#exmaple',
data: {
num: 0
},
computed: {
sum: function() {
var n = Number(this.num)
if (Number.isNaN(n) || n < 1)
return 0;
return ((1 + n) * n) / 2;
}
}
})
</script>
</body>


위의 소스에서 주의할점이 있는데 바로 this.값이다. 함수 안에서의 this는 vue 객체 자신을 참조한다. 그런데 함수 내부에서 다른 콜백함수를 실행하거나 했을 때는 this가 다른 값으로 연결 될 수 있으므로 주의 해야한다. num 값이 number 타입이라 생각하기 슂미나 html 요소 내부에서는 모두 문자열로 다뤄진다. 그렇기 때문에 Number() 함수나 parseInt() 함수를 이용해 명시적으로 숫자값으로 변환해야한다.



<body>
<div id="exmaple">
<p>
국가명 : <input type="text" v-model="countryname"
placeholder="국가명" />
</p>
<table id="list">
<thead>
<tr>
<th>번호</th>
<th>국가명</th>
<th>수도</th>
<th>지역</th>
</tr>
</thead>
<tbody id="contacts">
<tr v-for="c in filtered">
<td>{{ c.no }}</td>
<td>{{ c.name }}</td>
<td>{{ c.capital }}</td>
<td>{{ c.region }}</td>
</tr>
</tbody>
</table>
</div>
<script tpye="text/javascript">
var model = {
countryname: "",
countries: [{
no: 1,
name: "미국",
capital: "워싱턴 DC",
region: "america"
}, {
no: 2,
name: "프랑스",
capital: "워싱턴 DC",
region: "europe"
}, {
no: 3,
name: "영국",
capital: "워싱턴 DC",
region: "europe"
}, {
no: 4,
name: "중국",
capital: "워싱턴 DC",
region: "asia"
}, {
no: 5,
name: "태국",
capital: "워싱턴 DC",
region: "asia"
}, {
no: 6,
name: "모로코",
capital: "워싱턴 DC",
region: "africa"
}, {
no: 7,
name: "라오스",
capital: "워싱턴 DC",
region: "asia"
}, {
no: 8,
name: "베트남",
capital: "워싱턴 DC",
region: "asia"
}, {
no: 9,
name: "피지",
capital: "워싱턴 DC",
region: "oceania"
}, {
no: 10,
name: "자메이카",
capital: "워싱턴 DC",
region: "oceania"
}, {
no: 11,
name: "솔로몬제도",
capital: "워싱턴 DC",
region: "america"
}, {
no: 12,
name: "나미비아",
capital: "워싱턴 DC",
region: "africa"
}, {
no: 13,
name: "동티모르",
capital: "워싱턴 DC",
region: "asia"
}, {
no: 14,
name: "멕시코",
capital: "워싱턴 DC",
region: "america"
}, {
no: 15,
name: "베네수엘라",
capital: "워싱턴 DC",
region: "america"
}, {
no: 16,
name: "서사모아",
capital: "워싱턴 DC",
region: "oceania"
}, ]
}
var vmSum = new Vue({
el: '#exmaple',
data: model,
computed: {
filtered: function() {
var cname = this.countryname.trim()
return this.countries.filter(function(item, index) {
if (item.name.indexOf(cname) > -1) {
return true;
}
})
}
}
})
</script>
</body>







배열의 filter 메서드는 배열의 아이템 중 조건을 만족하는 아이템을 모아서 새로운 배열을 만들어 리턴하는 기능을 수행한다. filter 메서드는 함수를 인자로 전달하고 이 함수는 다시 두 개의 인자를 전달 받는데, 첫 번째 인자가 배열의 아이템(item) 두번째가 인덱스 번호이다.


계산형 속성인 filtered 함수는 this.countryname 속성값을 cname 변수에 할당하고 있다. 그 이유는 배열 객체의 filter 함수에 의해 호출되는 콜백함수 안에서는 this는 바깥쪽의 this와 다르기 때문이다. 콜백 함수 안쪽의 this는 Vue객체가 아니고 전역 객체를 참조한다. 


텍스트 필드에 국가명의 일부를 입력하면 필터링된 결과가 나타난다. 새롭게 렌더링되는 것이기 때문에 display 스타일 속성을 none으로 지정해서 보이지 않도록 하는 것과는 전혀 다르다. 

'Vue.js' 카테고리의 다른 글

[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
[Vue.js] 기본 디렉티브  (0) 2018.12.15
vue.js 구조  (0) 2018.12.15
[Vue.js] 개발환경 구축  (1) 2018.12.15

Vue.js 기본 디렉티브



1) v-text, v-html 디렉티브

선언적 렌더링을 위해 html 요소 내부에 템플릿 표현식(콧수염 표현식:mustache Expression)만  사용할 수 있는건 아니다. 동일한 코드를 디렉티브라는 것을 이용해 표현해볼 수 있다.


<div id="simple">
<h2 v-text="message"></h2>
</div>



v-test, {{ }} : InnerText 속성에 연결된다. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남

v-html : innerHtml 속성에 연결된. 태그 문자열을 파싱하여 화면에 나타냄


v-html 태그는 <Script> 태그 그대로 바인딩한다. 요즘 문제가되는 XSS(Cross Site Scripting)공격 등에 취약하기 때문에 꼭 필요한 경우가 아니라면 v-text를 사용하는것이 더 안전하다.




2) v-bind 디렉티브

이번에는 v-bind 디렉티브는 요소(Element)의 콘텐트 영역(시작 태그와 종료 태그 사이의 영역)을 설정하는 것이 아닌 요소 객체의 속성들을 바인딩하기 위해 사용한다. 


<body>
<div id="simple">
<input id="a" type="text" v-bind:value="message">
<br/>
<img v-bind:src="imagePath" />
</div>
<script tpye="text/javascript">
var model = {
message: 'v-bind 디렉티브',
imagePath: "http://sample.bmaster.kro.kr/photos/61.jpg"
};
var simple = new Vue({
el: '#simple',
data: model
})
</script>
</body>


v-bind 디렉티브를 통해서 html요소 객체의 속성이 변경되었음을 알 수 있다. v-bind 디렉티브를 매번 작성하는 것이 부담스럽다면 줄여 쓰는 방법이 있다. v-bind:src를 줄여 쓰면 :src로 작성해도 동작한다.




3) v-model 디렉티브


앞에 설명한 디렉티브는 모두 단방향 디렉티브이다. HTML 요소에서 값을 변경하더라도 모델 객체의 값이 바뀌지 않는데 v-model 디렉티브는 양방향 데이터 바인딩을 지원하는 디렉티브이다. 


<body>
<div id="simple">
<input id="a" type="text" v-model="name" placeholder="이름 입력하세요">
<br/> 입력된 이름 :
<h2 v-html="name"></h2>
</div>
<script tpye="text/javascript">
var simple = new Vue({
el: '#simple',
data: {
name: ''
},
})
</script>
</body>


실행 하여 텍스트박스에 이름을 입력하면 H2 태그 모델 객체의 속성이 변경되는걸 확인 할 수 있다.

v-model 디렉티브는 텍스트 박스뿐만 아니라 여러 가지 폼 필드에서도 사용할 수 있다. 여러개의 아이템을 선택할 수 있는 <input type="checkbox"/>나 <select multiple></select>의 경우 모델 객체의 배열 객체와 연결된다. 단일 아이템을 선택할 수 있는 <input type="radio">나 <select/>인 경우에는 모델 객체의 단일 값과 연결된다.




<body>
<div id="simple1">
<div>좋아하는 과일을 모두 골라주세요 : </div>
<input type="checkbox" value="1" v-model="fruits">사과,
<input type="checkbox" value="2" v-model="fruits">키위,
<input type="checkbox" value="3" v-model="fruits">포도,
<input type="checkbox" value="4" v-model="fruits">수박,
<input type="checkbox" value="5" v-model="fruits">참외,
</div>
<hr/>
<div id="simple2">
선택한 과일들 : <span v-html="fruits"></span>
</div>
<script tpye="text/javascript">
var model = {
fruits: []
}

var simple1 = new Vue({
el: '#simple1',
data: model
})

var simple2 = new Vue({
el: '#simple2',
data: model
})
</script>
</body>




위의 예제는 하나의 Model 객체를 두 개의 Vue 객체에서 참조하는 예제이다. simple1이 바인딩하는 Vue 객체는 v-model을 이용해 양방향 데이터 바인딩하여 사용자가 입력하는 값을 뮤모델 개체를 통해 model 객체의 fruits 배열 값을 즉시 바인딩한다. 


v-model 디렉티브는 몇가지 수식어(Modifier)를 지원한다. 수식어는 디렉티브에 특별한 기능을 추가하는 Vue.js 디렉티브의 문법 요소이다. v-model에서 사용할 수 있는 수식어는 아래와 같다.


lazy : 입력폼에 이벤트가 발생할 때 입력한 값을 데이터와 동기화한다. 텍스트 박스에서 입력 후 포커스가 이동하거나 할 때 데이터 옵션값이 변경된다.  <input type="text" v-model.lazy="name"


number : 숫자가 입력될 경우 number 타입의 값으로 자동 현변환된다.


trim : 이 수식어를 지정하면 문자열의 앞뒤 공백을 자동으로 제거한다.




4) v-show, v-if, v-else, v-else-if 디렉티브

v-if 디렉티브는 Vue객체의 data 속성 값에 따라 렌더링 여부를 결정할 수 있는 기능이다. 다른 랭귀지에서도 쓰이는 if문과 동일한 개념으로 생각해도 된다.


v-if와 비슷한 기능을 가진것이 v-show 디렉티브이다. 사실 v-if와 v-show 차이는 실제 렌더링 여부에 있다. v-if 디렉티브는 조건에 부함되지 않으면 렌더링을 하지 않는 반면 v-show는 일단 html 요소를 렌더링 후에 display 스타일 속성으로 화면에 보여줄지 여부를 결정한다.


sample.bmaster.kro.kr/img/error.png에서 이미지를 다운로드 후 작업하는 폴더에 images 하위 폴더를 생성 후 저장한다.



<body>
<div id="account">
예금액 : <input type="text" v-model="amount" />
<img v-if="amount < 0 " src="images/error.png"
title="마이너스는 허용하지 않음"
style="width:15px; height:15px; vertical-align:middle">
</div>
<hr/>
<script tpye="text/javascript">
var simple1 = new Vue({
el: '#account',
data: {
amount: 0
}
})
</script>
</body>


v-if는 조건에 부합되지 않으면 렌더링을 하지 않는다. 그렇기 때문에 자주 화면이 변경되는 부분에 대해서는 v-if 디렉티브보다는 v-show 디렉티브를 사용하는 것이 더 바람직한다. v-show 디렉티브는 조건을 만족하지 않을때 display 스타일 속성을 none으로 설정해 화면에 보이지 않도록 처리한다. 실제로는 렌더링을 하는 것.


v-if, v-else, v-else-if 는 다른 언어에서의 if ~ else if ~ else 구문과 동일한 기능이라고 생각하면 된다.

<body>
<div id="account">
예금액 : <input type="text" v-model="balance" />
<br/>
<span v-if="balance >= 1000000">Gold</span>
<span v-else-if="balance >= 500000">Silver</span>
<span v-else-if="balance >= 200000">Bronze</span>
<span v-else>Basic</span>
</div>
<hr/>
<script tpye="text/javascript">
var simple1 = new Vue({
el: '#account',
data: {
balance: 0
}
})
</script>
</body>





5) v-for 디렉티브


JavaScript의 for문과 유사하다.


<html>
<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<style>
#list {
width: 400px;
border: 1px solid black;
border-collapse: collapse;
}
#list td,
#list th {
border: 1px solid black;
text-align: center;
}
#list>thead>tr {
color: yellow;
background-color: purple;
}
</style>
<script src="http://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
<div id="exmaple">
<table id="list">
<tr>
<th>번호</th>
<th>이름</th>
<th>전화번호</th>
<th>주소</tr>
</tr>
<tbody id="contacts">
<tr v-for="contact in contacts">
<td>{{ contact.no }}</td>
<td>{{ contact.name }}</td>
<td>{{ contact.tel }}</td>
<td>{{ contact.address }}</td>
</tr>
</tbody>
</table>
</div>
<script tpye="text/javascript">
var model = {
"pageno": 1,
"pagesize": 10,
"totalcount": 100,
"contacts": [{
"no": 100,
"name": "설현",
"tel": "010-1234-1234",
"address": "서울"
}, {
"no": 100,
"name": "혜리",
"tel": "010-1234-1234",
"address": "서울"
}, {
"no": 100,
"name": "하니",
"tel": "010-1234-1234",
"address": "경기"
}, {
"no": 100,
"name": "성소",
"tel": "010-1234-1234",
"address": "제주"
}, {
"no": 100,
"name": "설현",
"tel": "010-1234-1234",
"address": "서울"
}, {
"no": 100,
"name": "혜리",
"tel": "010-1234-1234",
"address": "서울"
}, {
"no": 100,
"name": "하니",
"tel": "010-1234-1234",
"address": "경기"
}, {
"no": 100,
"name": "성소",
"tel": "010-1234-1234",
"address": "제주"
}, {
"no": 100,
"name": "설현",
"tel": "010-1234-1234",
"address": "서울"
}, {
"no": 100,
"name": "혜리",
"tel": "010-1234-1234",
"address": "서울"
}]
}
var simple1 = new Vue({
el: '#exmaple',
data: model
})
</script>
</body>
</html>


model 객체 내부에는 contacts라는 이름의 배열 데이터를 가지고 있는데 이 데티러르 여러번 반복적으로 화면에 나타낸것이다. v-for 의 구문은 원본 데이터가 어떤 형식인가에 따라 사용방법이 조금씩 달라진다ㅣ 배열 또는 유사 배열인 경우에는 contact.name 처럼 작성한다. 


원본 데이터가 객체 인경우에는 조금 달라진다. 객체인 경우는 키를 이용해 값을 접근하는 HashMap 구조 이기 때문에 Key, Value를 얻어낼 수 있는 구조를 사용한다.


<body>
<div id="exmaple">
<select id="regions">
<option disabled="disabled" selected> 지역을 선택하세요 </option>
<option v-for="(val, key) in regions" v-bind:value="key">{{val}}</option>
</select>
</div>
<script tpye="text/javascript">
var regions = {
"A": "Asia",
"B": "America",
"C": "Europe",
"D": "Africa",
"E": "Oceania",
}
var simple1 = new Vue({
el: '#exmaple',
data: {
regions: regions
}
})
</script>
</body>


이번 예제의 v-for 형태는 조금 다른 것을 확인 할 수 있다. (val, key)로 작성되어 있는데 var에는 텍스트가 전달되고, key에는 지역코드가 전달되면서 반복적으로 <option>요소들을 만들어 낸다.


만일 인덱스를 표현해야 한다면 다음과 같이 표현할 수 있다.


<tr v-for="(contact, index) in contacts"> ... </tr>

<option v-for="(val, key, index) in regions" ...> </option>





6) 기타 디렉티브


v-pre -> v-pre는 HTML요소에 대한 컴파일을 수행하지 않는다.


<body>
<div id="exmaple">
<span v-pre>{{ message }}</span>
</div>
<script tpye="text/javascript">
var simple1 = new Vue({
el: '#exmaple',
data: {
message: "Hello World"
}
})
</script>
</body>


위의 예제는 v-pre 디렉티브를 사용한 예제이다. 실제 실행을 해보면 Hello World 문자열이 찍히지 않고 콧수염 표현식 그대로 {{ message }}가 화면에 출력된 모습을 볼 수 있다. 앞서 설명한것 처럼 v-pre는 HTML 요소에 대한 컴파일을 수행하지 않는다.



v-once-> v-once는 HTML요소를 단 한 번만 렌더링하도록 설정한다.


<body>
<div id="exmaple">
<span v-once>{{ message }}</span>
</div>
<script tpye="text/javascript">
var simple1 = new Vue({
el: '#exmaple',
data: {
message: "Hello World"
}
})
</script>
</body>


실제로 실행을 하면 v-pre와는 다르게 Hello World가 찍힌 모습을 확인 할 수있다. v-once 디렉티브는 처음 한번만 렌더링을 수행한다. 그렇기 때문에 Vue 인스턴스의 데이터를 변경하더라도 렌더링을 수행하지 않는다. 초깃값이 주어지면 변경되지 안는 UI를 만들때 사용할 수 있다.

'Vue.js' 카테고리의 다른 글

[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
[Vue.js] computed Property (계산형 속성)  (0) 2018.12.15
vue.js 구조  (0) 2018.12.15
[Vue.js] 개발환경 구축  (1) 2018.12.15

vue 예제 분석


<html>

<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<script src="http://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
<div id="simple">
<h2>{{message}}</h2>
</div>
<script tpye="text/javascript">
var model = {
message: 'Hello Vue.js World!'
};

var simple = new Vue({
el: '#simple',
data: model
})
</script>
</body>

</html>


Model 객체는 변수명 그대로 모델 객체이다.

데이터를 가지고 있음


SImple 객체는 Vue 객체이자 뷰모델 객체이다. 

Vue 객체의 el 속성의 html 요소를 나타낸다. 또한 data 속성을 모델 객체를 참조한다.

vue 객체가 html 요소와 데이터를 참조하고 있다. 이제 데이터가 변경되면 뷰모델 객체는 즉시 html 요소에 반영시킨다.


html 요소에서는 {{ }}과 같은 콧수명르 닮은 모양의 템플릿 표현식을 사용해 선언ㅇ적으로 html dom에 데이터를 렌더링한다. 뷰모델 객체의 데이터 속성에서 해당 값을 이 위치에 나타낸다. 콧수염을 닮았다고 해서 콧수염 표현식(Mustache Expression)이 라고도 부르며, 문자열을 덧붙인다는 의미로 보간법(Interpolation)이라고도 한다.



이코드만으로도 모든 작업은 반응형으로 이뤄지는다. 모델을 벼경하면 뷰모델 객체를 통해 html dom에 즉시 변경된다.















'Vue.js' 카테고리의 다른 글

[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
[Vue.js] computed Property (계산형 속성)  (0) 2018.12.15
[Vue.js] 기본 디렉티브  (0) 2018.12.15
[Vue.js] 개발환경 구축  (1) 2018.12.15

개발 환경 설정


1) Node.js : 서버측 JavaScript언어이자 플랫폼

2) npm : app의 의존성 관리를 위해 사용하는 노드 패키지 관리자

3) Visual Studio Code : 코드 편집 도구(IDE)

4) 크롬 브라우저 + vue.js Devtools : 디버깅을 위한 개발도구

5) Vue-cli : app 작성을 위한 기본 틀을 제공하는 도구





1. Node.js, npm 설치

Node.js는 Google의 v8엔진을 기반으로 만들어진 서버측 JavaScript 언어이자 Flatform이다. Node.js와 함께 설치되는 npm을 이용해 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리한다.


https://nodejs.org/ko

( 위의 사이트에서 Node.js 다운로드 후 설치)



설치가 끝나면 Windows에서는 CMD창을 실행, Mac에서는 터미널을 실행하여 아래의 명령어 수행


npm install -g npm (Windows)

sudo npm install -g npm (Mac)





2. Visual Studio Code 설치

Vue.js의 개발을 하기 위해서는 IDE가 필요한데 SublimeText, Bracket, Atom과 같은 많은 도구들이 있다. 하지만 나는 코드가 익숙하고, 다양한 플러그인이 존재하니 코드로 작업할 예정



http://code.visualstudio.com

( 위으 사이트에서 code 다운로드 후 설치)




Visual Studio Code에서 Vue.js 개발시 유용한 Plugin List

1) View-in-browser : html 파일을 기본 브라우져로 볼 수 있도록 한다.

2) vetur : Vue.js 코드에 대한 문법 강조, 코드 자동완성, 디버깅, 린팅 기능들을 제공한다.

3) html snippets : html 태그 조작을 빠륵 ㅔ작성할 수 있도록 도와준다.

4) js-css-html formmatters : js, css html의 코드 자동완 성기능을 제공한다. 에디터 창에서 ctrl+sapce

5) vue 2 snippets : vue.js 2.0의 콛 ㅡ조작 지원과 문법 강조 기능을 제공한다.

6) vue-beautify : vue.js 코드에 대한 정리 배치 기능을 제공한다.

7) ESLint : 자바 스크립트 코드 스타일, 문법 체크 기능을 제공한다.




3. Chrome Browser, Extendtion Tool 설치

크롬 브라우져 설치후 확장 프로그램에서 Vue 검색후 vue.js devtools 설치




4. Vue-CLI 설치

Vue-CLI는 에반 유가 공식적으로 관리하는 커맨드라인 인터페이스 기반의 스캐폴딩 도구이다. Vue.js앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 필드, 의존성 부분에대한 셋팅을 제공해준다.


npm을 이용해 vue-cli 설치


npm install -g yarn @vue/clie (Windows)

sudo npm install -g yarn @vue/cli (Mac)


Vue CLI는 3.x 버전에서는 npm 대신 yarn 패키지 매니저를 주로 사용한다. yarn이 npm보다 실행속도가 빠르기 때문에 최근에는 yarn을 선호하는 추세





'Vue.js' 카테고리의 다른 글

[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
[Vue.js] computed Property (계산형 속성)  (0) 2018.12.15
[Vue.js] 기본 디렉티브  (0) 2018.12.15
vue.js 구조  (0) 2018.12.15

.vue 파일 밑에 빈줄 추가




집에서 심심하면 만들고 있는 토이 프로젝트가 있는데 

익숙치 않은 mfc라 힘들다~







위와 같이 기본 list control을 생성 후

각 컬럼과 열에 data를 넣어준 뒤 클릭벤트를 걸어주면

row 전체가 선택이 되는게 아니라 첫번째 열(column)만이 선택이된다.



이럴때 마법과 같은 코드 한줄이면 전체 선택이 된다.



 리스트컨트롤 변수를 생성하여 아래의 코드를 onInitDialog쪽에 쳐주면




CListCtrl test;

test.SetExtendedStyle(LVS_EX_FULLROWSELECT | LVS_EX_GRIDLINES);




LVS_EX_FULLROWSELECT만 적용된 경우




LVS_EX_FULLROWSELEC | LVS_EX_GRIDLINES 적용된 경우




그 이외에 스타일 추가는 msdn에 있을거라 생각되고

 필요하면 찾아서 적용하면 될듯하다


Oracle 에서는 MySql에 있는 Auto_Increment 기능이 없다.

그렇기에 자동으로 인덱스값을 증가시켜주기 위해서는 시퀀스를 생성해서 사용해야한다.



1) 예제 테이블 생성

create table tmp(

    idx_tmp number(10),

    name    varchar(1000)

);


예제로 사용할 TMP테이블을 생성하였다.

이제 idx_tmp 의 값을 차례대로 증가시키는 시퀀스를 생성해야한다.



2) 시퀀스 생성

CREATE SEQUENCE tmp_seq START WITH 1 INCREMENT BY 1 MAXVALUE 100 CYCLE NOCACHE;


tmp_seq라는 시퀀스를 만드는 sql이다.

간단하게 키워드에대한 설명을 하자면 아래의 표를 확인하길 바란다.


CREATE SEQUENCE “스키마명.시퀀스명”
MINVALUE -- 시퀀스가 시작되는 최초의 숫자
MAXVALUE --시퀀스가 끝나는 최대 숫자
INCREMENT BY -- 시퀀스가 증가되는 단위
START WITH -- 시퀀스 생성이 시작되는 값
NOCACHE  -- 캐시를 사용하지 않음
NOORDER  --요청되는 순서대로 값을 생성하지 않음
NOCYCLE  --초기값부터 다시 시작하지 않음

tmp_seq 시퀀스는 1부터 시작하여 1씩 증가하여 100까지 도는 시퀀스이다.



3) 시퀀스를 사용한 값 삽입


INSERT INTO tmp values(tmp_seq.NEXTVAL, 'tmptmp');


이제 insert할때 시퀀스명.NEXTVAL 함수를 사용하면 자동으로 1씩 증가되어 값이 추가되는걸 확인할 수 있다.



4) 값 조회


select * from tmp;



'Database > Oracle' 카테고리의 다른 글

[Oracle DB] ORA-12638 신용검색에 실패했습니다 오류  (1) 2018.09.06

JUnit의 개요

- Java에서 독립된 단위테스트(Unit Test)를 지원해주는 프레임워크이다.

- Desgin 패턴과 Eclipse IDE를 개발한 Erich Gamma가 제작한 프레임워크다.

- 단정(assert) method로 테스트 케이스의 수행 결과를 판별한다.

- jUnit4부터는 테스트를 지원하는 어노테이션을 제공한다. (@Test, @Before, @After)

- 각 @Test 메서드가 호출할 때 마다 새로운 인스턴스를 생성하여 독립적인 테스트가 이루어지도록 한다.




단위테스트(Unit Test)란?

- 소스코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차, 즉 모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차를 말한다.

- JUnit은 보이지 않고 숨겨진 단위 테스트를 끌어내어 정형화시켜 단위테스트를 쉽게 해주는 테스트 지원 프레임워크다




JUnit Annotation

@Test

- @Test가 선언된 메서드는 테스트를 수행하는 메서드가 된다.

- JUnit은 각각의 테스트가 서로 영향을 주지 않고 독립적으로 실행됨을 원치으로 하므로 @Test 마다 객체를 생성한다.



@Ignore

- @Ignore가 선언된 메서드는 테스트를 실행하지 않게 한다.



@Before

- @Before가 선언된 메서드는 @Test 메서드가 실행되기 전에 반드시 실행되어 진다.

- @Test 메소드에서 공통으로 사용하는 코드를 @Before 메소드에 선언하여 사용하면 된다.



@After

- @After가 선언된 메서드는 @Test 메소드가 실행된 후 실행된다.



@BeforeClass

- @BeforeClass 어노테이션은 @Test 메소드보다 먼저 한번만 수행되어야 할 경우에 사용하면 된다.



@AfterClass

- @ AfterClass 어노테이션은 @Test 메소드보다 나중에 한번만 수행되어야 할 경우에 사용하면 된다.





JUint Method

method name 

description 

 assertEquals(a, b)

객체 a와 b의 값이 일치함을 확인한다. 

 assertArrayEquals(a, b)

배열 a와 b의 값이 일치함을 확인한다. 

 assertSame(a, b) 

객체 a와 b가 같은 객체임을 확인한다.

assertEquals 메서드는 두 객체의 값이 같은지 확인하고 assertSame 메서드는 두 객체의 레퍼런스가 동일한가를 확인한다. 

 assertTrue(a) 

조건 A가 참인가를 확인한다.

 assertNotNull(a) 

 객체 A가 null이 아님을 확인한다.


그 외 다양한 테스트용 메소드를 제공한다.


IoC (Inversion of Control) 와 DI(Dependency Injection)

- "제어의 역전" 즉 인스턴스 생성부터 소멸까지의 인스턴스 생명주기 관리를 개발자가 아닌 컨테이너가 대신 해준다 라는 뜻이다.

- 컨테이너 역할을 해주는 프레임워크에게 제어하는 권한을 넘겨서 개발자의 코드가 신경 써야 할것을 줄이는 전략이다.

- IoC 컨테이너는 객체의 생성을 책임지고, 의존성을 관리한다.

- POJO의 생성, 초기화 서비스, 소멸에 대한 권한을 가진다.

- 개발자가들이 직접 POJO를 생성 할 수 있지만 컨테이너에게 맡긴다.



DL (Dependency Lookup) : 의존성 검색

 - 저장소에저장되어 있는 Bean에 접근하기 위해 컨테이너가 제공하는 API를 이용하여 Bean을 Lookup하는 것


DI (Dependency Injection) : 의존성 주입

 - 각 클래스간의 의존관계를 빈 설정정보르 바탕으로 컨테이너가 자동으로 연결 해주는 것]


DL사용시 컨테이너에 종속성이 증가하여 주로 DI를 사용한다.


DI의 유형 

1) Setter Injection : Setter 메서드를 이용한 의존성 삽입

 - 의존성을 입력 받는 setter 메서드를 마들고 이를 통해 의존성을 주입한다.

2) Constructor Injection

 - 필요한 의존성을 포함하는 클래스의 생성자를 만들고 이를 통해 의존성을 주입한다.

3) Method Injection

 - 의존성을 입력 받는 일반 메서드를 만들고 이를 통해 의존성을 주입한다.








다형성 Polymorphism = Poly(다양한) + Morphism(변형, 변신)




객체를생성할때 다형성에 의거해서 아래와 같이 생성을 하면



Printer p1 = new StringPrinter();

Printer p2 = new ConsolePrinter();

부모클래스타입  변수 = new 자식 클래스의타입();



위와 같은 형식으로 으로 코드를 작성하면 아래와 같은 뜻을 내포한다.

-> StringPrinter 클래스는 Printer 타입이다.

-> ConsolePrinter 클래스는 Printer 타입이다. 


- 이게 바로 java에서 말하는 다형성이다.

- 타입은 Printer 타입이지만 다양한 StringPrinter, ConsolePrinter 변형이 가능하다.

- 구현체는 언제든지 바뀔수 있기 때문에 인터페이스만 바라보게끔 하는 방식 








Setter Injection의 <property> tag

- Setter method를 통해 의존관계가 있는 Bean을 주입하려면 <property> tag의 ref 속성을 사용 할 수있다.

- Setter method를 통해 Bean의 레퍼런스가 아니라 단순 값을 주입하려고 할 때는 <property>tag의 value 속성을 사용한다.

ref -> Bean id를 이용하여 주입할 Bean을 찾는다.

value -> 단순 값 또는 Bean이 아닌 객체를 주입할 때 사용한다.

public class Hello {
	String name; 
	Printer printer;

	public Hello() {};

	public void setName(String name) {
		this.name = name;
	}

	public void setPrinter(Printer printer) {
		this.printer = printer;
	}
}


위의 소스를 xml로 빈설정을 해주면 아래와 같다.


<bean id="Hello" class="source.Hello">

<property name="name" values="Spring" />    // setName Method

<property name="printer" ref="printer" />       // setPrinter Method 

</bean>

<bean id="printer" class="source.StringPrinter" />


보기 쉽게 각각의 키워드가 의미하는 바를 소스와 xml에서 찾을 수 있도록 하이라이팅해봤다.








Constructor Injection의 <constructor-arg> tag

- Constructor를 통해 의존관계가 있는 Bean을 주입하려면 <constructor-arg> tag를 사용할 수 있다.

- Constructor 주입방식은 생성장의 파라미터를 이요하기 때문에 한번에 여러개의 객체를 주입할 수 있다.


public class Hello {
	String name;
	Printer printer;

	public Hello() {};

	public Hello(String name, Printer printer) {
		this.name = name;
		this.printer = printer;
	}
}

1) Constructor-arg index지정하여 파라메터를 넘겨주는 경우

<bean id="hello" class="source.Hello">

<constructor-arg index="0" value="Spring"/>

<constructor-arg index="1" ref="printer" />

</bean>


2) Constructor-arg Paramater name 지정하여 넘겨주는 경우

<bean id="hello" class="source.Hello">

<constructor-arg name="name" value="Spring"/>

<constructor-arg name="printer" ref="printer" />

</bean>








Collection Type의 값 Injection

- Spring은 List, Set, Map, Properties와 같은 Collection Framework 타입을 XML로 작성해서 프로퍼티에 주입하는 방법을 제공한다.


1) 프로퍼티가 Set과 List일 경우

<bean id="hello" class="source.Hello">

<property name="names">

<list>

<values>Spring</values>

<values>IoC</values>

<values>DI</values>

</list>

</property>

</bean>

- Set으로 설정할경우 list를 set으로 설정하면 된다.


2) Map 타입 : <map>과 <entry> tag를 사용

<bean id="hello" class="source.Hello">

<property name="names">

<list>

<entry key="Kim" values="30"/>

<entry key="Lee" values="35"/>

<entry key="Ahn" values="40"/>

</list>

</property>

</bean>








Spring DI Container의 개념

- Spring DI Container가 관리한는 객체를 빈(Bean)이라고 하고, 이 빈(Bean)들을 관리한다는 의미로 컨테이너를 빈 팩토리라고 부른다.

- 객체를 생성과 객체 사이의 런타임(run-time) 관계를 DI 관점에서 볼 때는 컨테이너를 BeanFactory라고 한다.

- Bean Factory에서 여러 가지 컨테이너 기능을 추가하여 애플리케이션 컨텍스트라고 부른다.








* POJO(Plain Old Java Object)

-> JVM으로만 동작하는 객체를 POJO라한다. 일반 Java Class 객체를 뜻한다.


* Bean 

-> 스프링이 IoC방식으로 관리ㄷ는 객체라는 뜻, 스프링이 직접생성과 제어를 담당하는 객체를 Bean이라고 부른다.


* Bean Factory 

-> 스프링의 IoC를 담당하는 핵심 컨테이너를 가리킨다.

-> Bean을 등록 생성 조회 반환하는 기능을 담당함

-> 보통 BeanFacotry를 바로 사용하지 않고 ApplicationContext를 주로 이용한다.


* ApplicationContext

-> BeanFactory를 확장한 IoC 컨테이너이다.

-> Bean을 등록, 생성, 조회, 반환 관리하는 기능은 BeanFactory와 같다.

-> Spring에서는 ApplicationContext를 BeanFactory보다 더 많이 사용된다.

-> Spring의 각종 부가 서비스를 추가로 제공한다.

-> Spring이 제공하는 ApplicationContext 구현 클래스가 여러가지 종류가 제공된다. 


* Configuration Metadata

-> ApplicationContext 또는 BeanFactory가 IoC를 적용하기위해 사용하는 메타정보를 말한다.

-> 설정 메타정보는 IoC컨테이너에 의해 관리되는 Bean 객체를 생성하고 구성할 때 상용된다.

-> xml로 작성한 bean정보가 metadata에 해당된다.








증상 : ORA-12638 Credential retrieval failed (신용검색에 실패했습니다) 경고창 출력

원인 : Oracle 설치시 Admin 권한으로 설치하지 않아 발생하는 문제


해결 방법

1. Oracle 설치 경로 찾기

- Oracle Home으로 지정한 경로를 찾아 network\admin 폴더로 이동한다. 

(디폴트로 설치 했을 경우 : C:\app\사용자명\product\11.2.0\client_1\network\admin)




2. sqlnet.ora 파일 수정

- sqlnet.ora 파일을 메모장으로 열어서


SQLNET.AUTHENTICATION_SERVICES= (NTS) <- 이부분을 주석처리한다.



# SQLNET.AUTHENTICATION_SERVICES= (NTS)





이러면 끝!

저장시에 권한문제가 생기면 바탕화면에 임시로 저장 후 해당 파일을 덮어씌우기해서 바꿔치기하면 된다.

'Database > Oracle' 카테고리의 다른 글

[Oracle DB] 오라클 auto_increment (시퀀스)  (0) 2018.10.05

+ Recent posts