GREATEST : 오라클에서 GREATEST 함수는 최대값, LEAST 함수는 최소값을 반환하는 함수이다. MAX, MIN 함수와 차이점은 서로다른 컬럼의 값을 비교한다는 것이다.
| 스칼라서브쿼리, 인라인뷰,서브쿼리 (0) | 2019.11.06 |
|---|---|
| WITH 구문 (0) | 2019.11.04 |
| PIVOT 을 이용하여 달력 만들기 (0) | 2019.11.01 |
| Oracle PIVOT (0) | 2019.10.28 |
| PL/SQL : CURSOR(커서) (0) | 2019.08.26 |
해당 오류는 Number 타입의 데이터를 String 으로 형변환 할 경우 발생하는 에러이다.
String.valueOf 로 해결할 수 있다
String seq = String.valueOf(list.get("seq"));
| SQL Error [1052] [23000] (0) | 2022.06.24 |
|---|---|
| [Java오류] : must implement the inherited abstract method (0) | 2019.09.24 |
| [Java 오류] The public type [클래스타입] must be defined in its own file (0) | 2019.09.24 |
해당 컬럼이 많기 때문에 어떤 테이블의 어떤 컬럼인지 지정을 해줘야 함
| class java.math.BigDecimal cannot be cast to class java.lang.String (0) | 2022.08.02 |
|---|---|
| [Java오류] : must implement the inherited abstract method (0) | 2019.09.24 |
| [Java 오류] The public type [클래스타입] must be defined in its own file (0) | 2019.09.24 |
데이터 삽입 시, PRIMERY KEY나 UNIQUE KEY가 중복되었을 경우 지정한 데이터만 UPDATE하는 명령어를 의미
# 빌드 자동화 도구
프로젝트 생성, 테스트 빌드, 배포 등의 작업을 위한 전용 프로그램
필요한 라이브러리들을 설정파일을 통해 자동으로 다운로드 해주고 이를 간편히 관리해 주는 도구
# Maven
Maven은 Java용 프로젝트 관리도구
빌드 중인 프로젝트, 빌드 순서,다양한 외부 라이브러리 종속성 관계를 pom.xml 파일에 명시
Maven은 외부저장소에서 필요한 라이브러리와 플로그인들을 다운로드 한 다음, 로컬시스템의 캐시에 모두 저장
# Gradle
프로젝트 빌드 관리 툴
Groovy 언어를 사용한 Domain-specific-language를 사용
Gradle은 프로젝트의 어느부분이 업데이트되었는지 알기 때문에, 빌드에 점진적으로 추가할 수 있다.
업데이트가 이미 반영된 빌드의 부분은 즉 더이상 재실행되지 않는다. (장점 : 빌드 시간 단축)
#Maven vs Gradle
Gradle : 작업의존성 그래프기반
업데이트가 이미 반영된 빌드의 부분 재실행되지 않아서 빌드 시간 단축
특정설정을 다른 모듈에 사용 하려면 설정 주입 방식 제동
Maven : 고정적이고 선형적인 단계모델 기반
멀티 프로젝트에서 특정 설정을 다른 모듈에서 사용하려면 상속을 받아야 함
| pom.xml 파일의 이해 (0) | 2020.10.26 |
|---|---|
| Spring MVC ? (0) | 2020.08.07 |
Vue.js 파일
| <template> <div> <div> <select v-model="selectedCity"> <option :value="city.code" :key="i" v-for="(city,i) in cityList">{{city.name}}</option> </select> <input type="text" v-model="userName" @keyup.enter="searchUserList"/> //@keyup.enter 를통하여 엔터만 치더라도 조회가 가능하도록 함 <button type="button" @click="searchUserList">조회</button> </div> <div> <table> <thead> <tr> <th>이름</th> <th>나이</th> <th>직업</th> </tr> </thead> <tbody> <tr :key="i" v-for="(person,i) in userList"> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.job}}</td> </tr> </tbody> </table> </div> </div> </template> <script> export default { name: '', components: {}, data() { return { cityList : [ {name : '서울', code:'02'}, {name : '부산', code:'21'}, {name : '제주', code:'06'} ], selectedCity:'', userName:'', userList:[] } }, methods: { searchUserList(){ const params = { selectedCity : this.selectedCity, userName : this.userName } this.userList = this.getUserList(params); }, getUserList(params){ console.log(params); let list = [ {name:'박보검', age:28, job:'연예인'}, {name:'양세찬', age:33, job:'개그맨'}, {name:'강동원', age:33, job:'연예인'}, {name:'정우성', age:47, job:'연예인'}, ]; return list } } } </script> |
Save.vue
| <template> <dir> <input type="text" v-model="userInfo.name"> <input type="text" v-model.number="userInfo.age"> <input type="text" v-model="userInfo.job"> <button type="button" @click="saveUserInfo">저장</button> </dir> </template> <script> export default { name: '', components: {}, data() { return { userInfo: { name: '', age: '', job: '', } } }, beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {}, unmounted() {}, methods: { saveUserInfo(){ if(this.userInfo.name == ''){ return alert("사용자 이름을 입력하세요."); } if(this.userInfo.age == '' || this.userInfo.age == 0){ return alert("나이를 입력하세요."); } // const params = { // name : this.name, // age : this.age, // job : this.job // } const r = this.saveData(this.userInfo.params); if(r == 'S'){ alert('사용자 정보가 생성되었습니다.') } }, saveData(params){ console.log(params); const r = 'S'; return r; } } } </script> |
| [Vue 프로젝트 05] Vue 컴포넌트 개발 2 (0) | 2022.02.08 |
|---|---|
| [Vue 프로젝트 04] Vue 컴포넌트 개발 1 (0) | 2022.01.16 |
| [Vue 프로젝트 03] 메뉴 구성(Router,Lazy Load) (0) | 2022.01.16 |
| [Vue 프로젝트 02] Vue 프로젝트 생성 (0) | 2022.01.14 |
| [ Vue 프로젝트 01] 개발환경 구성 (0) | 2022.01.14 |
# 랜더링 문법
1. v-if vs v-show
v-if 는 조건에 따라 컴포넌트가 실제로 제거되고 생성된다.
v-show는 단순히 css 의 display 속성만을 변경
# 이벤트 처리
|
<div>
<button type="button" v-on:click ="increaseCounter">Add 1 </button>
<p>The Count is : {{counter}}</p>
</div>
//methode 부분에 increaseCounter 함수를 만들어 줍니다. increaseCounter() {
this.counter = this.counter +1;
}
|
-- KeyUp 활용하는 방법 Vue.js 파일에
| <input type="text" v-model="textValue" @keyup.enter="showValue"/> |
생성한 뒤 스크립트 부분의 메소드 부분에서 추가
| showValue(){ alert(this.textValue); } |
텍스트박스에 쓴 글씨를 쓰고 엔터를 눌렀을 경우 저렇게 Alert창이 뜨는 것을 볼수 있다.
| [Vue 프로젝트 06] 간단한 조회화면,저장화면 (0) | 2022.02.13 |
|---|---|
| [Vue 프로젝트 04] Vue 컴포넌트 개발 1 (0) | 2022.01.16 |
| [Vue 프로젝트 03] 메뉴 구성(Router,Lazy Load) (0) | 2022.01.16 |
| [Vue 프로젝트 02] Vue 프로젝트 생성 (0) | 2022.01.14 |
| [ Vue 프로젝트 01] 개발환경 구성 (0) | 2022.01.14 |
#1 Vue 컴포넌트 기본구조 이해하기
1.1view 파일에 basic.vue파일 생성
|
<template>
<!-- hteml코드 -->
<h1>Hello World!!</h1>
</template>
<script>
export default {
// 자바스크립트
}
</script>
<style scoped>
/* css */
</style>
|
1.2index.js 파일에 basic 부분 추가
|
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
//import Contact from '../views/Contact.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
3. ,{
path: '/contact',
name: 'Contact',
component: () => import(/* webpackChunkName: "contact",webpackPrefetch:true */ '../views/Contact.vue')
}
// {
// path: '/contact',
// name: 'Contact',
// component: Contact
// },
,{
path: '/basic',
name: 'Basic',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "basic" */ '../views/Basic.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
|
3. App.vue파일에 router-link 넣어주기
1.3이번엔 자바스크립트를 이용하여 데이터 보일수 있도록 하기
Baic.vue ==> <h1>{{title}}</h1> ,data부분 확인하기
|
<template>
<!-- hteml코드 -->
<h1>{{title}}</h1>
</template>
<script>
export default {
// 자바스크립트
name: '',
components: {},
data(){
return {
title : 'Hello World1'
}
}
}
</script>
<style scoped>
/* css */
</style>
|
//input 타입으로 테스트 <!-- v-model : Value와 유사 -->
|
<template>
<!-- hteml코드 -->
<div>
<h1>{{title}}</h1>
<input type="text" v-model="title" />
</div>
<!-- v-model : Value와 유사 -->
</template>
<script>
export default {
// 자바스크립트
name: '',
components: {},
data(){
return {
title : 'Hello World1'
}
}
}
</script>
<style scoped>
/* css */
</style>
|
-- Vue 장점 : 양방향 데이터 통신
# 2.Vue.js 부분 간단한 Templeate 세트를 미리 작성해 놓고 사용하는 방법 (snippet)
2.1.F1을 눌러 snippet을 검색하고, preferences를 누름
2.2.그 다음 vue 를 검색하여 vue.json을 클릭합니다.
2.3.vue.json 파일에 작성(기본적인것 셋팅해 놓음)
|
{
"Generate Basic Vue Code" : {
"prefix": "vue-start",
"body": [
"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
],
"description": "Generate Basic Vue Code"
}}
|
2.4.vue 파일에서 vue-start 치면 나옴
# 3.원시HTML 데이터 바인딩
3.1. Vue파일 생성 (DataBindingHtml.vue)
v-html 태그를이용하여 html이 적용될수 있도록 함
3.2 router/index.js 추가 주소추가
|
<template>
<div v-html ="htmlString"></div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
htmlString: '<p style="color:red;">This is a red string.</p>'
};
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {},
unmounted() {},
methods: {}
}
</script>
|
# 4. 입력폼 데이터 바인딩
4.1 input Text 부분을 활용
4.1.1dataBindingInputText.vue 생성 후 router/index.js에 주소추가
v-model을 이용한 데이터 바인딩
|
<template>
<input type="text" v-model="example"/>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
example: 'South Korea',
};
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {},
unmounted() {},
methods: {}
}
</script>
|
4.2 number일경우, textarea 사용
v-model을 사용했을 경우 문자열로 인식 v-model.number 일경우 숫자로 인식
|
<template>
<div>
<input type="text" v-model="example" />
<input type="number" v-model.number="example2" />
<textarea v-model="example3"></textarea>
<div>{{example3}}</div>
<!-- v-model을 사용했을 경우 문자열로 인식
v-model.number 일경우 숫자로 인식 -->
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
example: 'South Korea',
example2: 12,
example3: '안녕하세요.'
};
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
// console.log(example2); //이렇게 했을 경우 에러
console.log(this.example2);
},
beforeUpdate() {},
updated() {},
beforeUnmount() {},
unmounted() {},
methods: {}
}
</script>
|
#5. 속성에 데이터 바인딩 하기
5.1 Example.vue 파일 생성
5.2 v-bind:disabled="textValue==''" 조건식을 주어 값이 없을 경우는 disabled 가 되도록 함
|
<template>
<div>
<!-- <img v-bind:src="url" style="height:100px;width:auto;"/> -->
<input type="text" v-model="textValue" />
<button type="button" v-bind:disabled="textValue==''">click</button>
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
textValue:''
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {},
unmounted() {},
methods: {}
}
</script>
|
#6. 클래스 데이터 바인딩 하기
<div class="container" v-bind:class="{'active':isActive, 'text-red': isBlue}">Class Binding </div>와 Data 부분 확인
|
<template>
<div class="container" v-bind:class="{'active':isActive, 'text-red': isBlue}">Class Binding </div>
</template>
<script>
export default {
data() {
return {
isActive : true
,isBlue : true
};
}
}
</script>
<style scoped>
.container{
width:100%;
height: 200px;
}
.active {
background-color: yellow;
font-weight: bold;
}
.text-red{
color: blue;
}
</style>
|
#7. 리스트 랜더링
| [Vue 프로젝트 06] 간단한 조회화면,저장화면 (0) | 2022.02.13 |
|---|---|
| [Vue 프로젝트 05] Vue 컴포넌트 개발 2 (0) | 2022.02.08 |
| [Vue 프로젝트 03] 메뉴 구성(Router,Lazy Load) (0) | 2022.01.16 |
| [Vue 프로젝트 02] Vue 프로젝트 생성 (0) | 2022.01.14 |
| [ Vue 프로젝트 01] 개발환경 구성 (0) | 2022.01.14 |
클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다.
URL 변경시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소 영역만을 갱신
따라서 유연하게 페이지 전환이 가능한다. vue-router라는 라우팅 라우브러리를 지원한다.
1. Vue Router 설치
vue add router 명령어 설치
Vue Src 에 Router 폴더가 생성됨을 확인 할수 있습니다.
View 파일을 클릭시에는 About.vue파일이 생성됨을 확인 할수 있습니다.
npm run serve 명령어로 서버를 실행시켜보겠음 about이 생김
router의 index.js 파일을 보면 rountes 안에 path,name,coponent 가 생김
import Home from '../views/Home.vue'
about 은 component를 통해서 알려줌
path마다 컴포넌트를 연결해 줍니다.
main.js 파일로 가서 확인하면 router가 import되어있음을 확인 할수 있습니다.
App.vue 의 파일
index.js 파일에서
1번째 방식을 사용하게 되면 개발자도구 Network화면상에서 app.js 안에서 모든 componet들이 실행되도록 할수 있음(모든 클라이언트가 내려져 있어야함)
2번째 방식을 사용하게 되면
(캐시에만 담겨져 있다가,클릭하는 순간에 그때야 비로소 클라이언트에 내려줌,화면전환이 빠름)
| [Vue 프로젝트 06] 간단한 조회화면,저장화면 (0) | 2022.02.13 |
|---|---|
| [Vue 프로젝트 05] Vue 컴포넌트 개발 2 (0) | 2022.02.08 |
| [Vue 프로젝트 04] Vue 컴포넌트 개발 1 (0) | 2022.01.16 |
| [Vue 프로젝트 02] Vue 프로젝트 생성 (0) | 2022.01.14 |
| [ Vue 프로젝트 01] 개발환경 구성 (0) | 2022.01.14 |
# Vuel CLI
CLI는 터미널에 명령어를 통해 컴퓨터와 상호작용
터미널을 이용하여 Vue 프로젝트를 생성하고, 관리하고,빌드하는 기능
Vue 프로젝트의 폴더 구조,필요한 파일들 기본설정 옵션을 명령어를 통해 자동으로 만들어줌
1.npm을 이용하여 Vue/cli 설치
sudo npm install -g @vue/cli
-- -g (전역으로 설치 하겠다는 이야기) 따라서 윈도우 정보 admin 를 입력해줘야함
admin상태일 경우 sudo 없이 npm install -g @vue/cli
Vue 생성하는 방법 3가지
1. Default 옵션으로 생성하기
2. Manually select features 옵션으로 생성하기
3. Vue 프로젝트 매니저로 생성하기
1.Default 옵션으로 생성하기
1.1 vue create vue-default 로 설치
1.1.1 아래와 같은 오류일 경우 ==> vue.cmd create vue-default로 설치
Default 일 경우 --> Router가 없음
Manually일 경우
--> Router 설치 O
--> Vue는 기본 Hash모드
Hash모드는 url 뒤에 #이 붙는다.
History모드는 url 뒤에#이 붙지 않음
[Vue Router에서 HashMode VS History Mode차이점 참고] https://happy-coding-day.tistory.com/128
$ cd vue-default (내가 생성한 파일)로 이동
$ npm run serve (서버실행)
vue 파일 생성시 설치된 프로젝트 구조
--node_modules : npm 으로 설치된 패키지 파일들이 모여 있는 디렉토리
--public : Webpack을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리
--src/assets : 이미지,css, 폰트 등을 관히하는 디렉토리
--src/components : Vue 컴포넌트 파일이 모여 있는 디렉토리
-- App.vue : 최상위(Root) 컴포넌트
--main.js : 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는
역할을 담담
--gitignore : 깃허브에 업로할 때 제외할 파일 설정
--babel.config.js : 바벨 설절 파일
--package-lcok.json : 설치된 package의 디펜던시 정보를 관리하는 파일
--package.json : 프로젝트에 필요한 package를 정의하고 관리하는 파일
--ReadMe.md : 프로젝트 정보를 기록하는 파일
2. Manually select features 옵션으로 생성하기
2.1 vue.cmd create vue-mannually로 설치
스페이스바 누른후 선택
Choose Vue Version : Vue 버전을 선택
Bable :
TypeScript : Vue에서 TyprScipt를 이용할때
Progressive Web App(PWA) Support : Web App기능을 지원
Router :Vue Router
Vuex : Vue 패키지
CSS Pre-processors : css 전 처리패키지
Linter/ Formatter :
Unit Testing
E2E Testing :
-- Vue Option 선택지 였던 부분 차례대로 선택을 하게 됨
버전 3를 이용해서 해봄
Airbnb config : Airbnb에서 만든 표준 가이드
여기서는 Standard cofig 로 해서 사용함.
Lint on save 클릭함
각각의 config 파일로 할것인가를 설정하는 것인데 In Package.json으로 설정
동의한 프로세스대로 만들건가? yes
preset 이름으로 Vue-baic으로 만들어서 앞으로 저 설정된 부분대로 파일을 편리하게 설정 할수 있음
프로젝트 생성 후 PreSet이 잘 생성 되었는지 확인 해 볼려면 다른 파일을 생성을 하려면 옵션으로 내가 선택한 Preset이 생성된 것을 볼 수 있다.
3. Vue 프로젝트 매니저로 생성하기
3.1 vue.cmd ui 명령어
localhost:8000번으로 들어가봄
이런식으로 프로젝트를 클릭하여 만들 수 있음 (Vue-Basic과 동일하게 처리)
| [Vue 프로젝트 06] 간단한 조회화면,저장화면 (0) | 2022.02.13 |
|---|---|
| [Vue 프로젝트 05] Vue 컴포넌트 개발 2 (0) | 2022.02.08 |
| [Vue 프로젝트 04] Vue 컴포넌트 개발 1 (0) | 2022.01.16 |
| [Vue 프로젝트 03] 메뉴 구성(Router,Lazy Load) (0) | 2022.01.16 |
| [ Vue 프로젝트 01] 개발환경 구성 (0) | 2022.01.14 |
