본문 바로가기
반응형

분류 전체보기706

[jQuery] input text value 값 클릭/포커스 시 전체 선택하기 - input text value 값 클릭/포커스 시 전체 선택하기 - input type text 태그의 value 값을 전체 선택하는 방법에 대해 알아보자. 예제 코드를 통해 input tag가 focus 되는 순간 select 시켜주는거라 사실상 한줄이면 사용 가능하다. ▷예제1) function mine(){ $(event.target).select(); } 이미지로 보면 아래와 같은 일반 input tag에 value 값이 있고, 선택하게 되면 onfocus를 통해 메소드를 실행 후 $().select()가 실행되면서 아래와 같이 나온다. 2020. 11. 14.
[VueJS] Vue.component templates 정의하는 방법 vue component 를 사용할때 tempalate를 정의하는 여러 방법이 존재하는데 그중에서 나는 두가지 방법을 써본것같다 아직 VueJS를 많이 써본게 아니라서 그렇다. 내가 직접 써본것만 정리해 두려 한다. ▷ Strings 이 방법에 내가 정리한 방법중에 동적으로 추가하는 방법에 대해 설명할 때 사용한 방식이다. Vue.component('it-component',{ props : [], template: 'mine' }); new Vue({ el: '#it_list', data: { }, methods: { } }); 그저 JavaScript 에서 template 를 string 으로 입력하는건데 간단한거면 상관없지만 코드가 많아질수록 확연하게 가독성이 떨어지는 아주 심각한 단점이 존재한다... 2020. 11. 12.
[JavaScript] arr.(push/pop/unshift/shift) - 배열 데이터 추가 및 삭제 하기 배열 데이터를 다루는 Array.prototype.push(), Array.prototype.pop(), Array.prototype.shift(), Array.prototype.unshift() 메서드에 대해 알아보자. 앞서 arr.splice() 메서드를 통한 배열 값 추가 삭제에 대해 알아봤는데, splice() 메서드도 알아두면 좋다. ▷ 배열 요소 추가하기 (Array.push(), Array.unshift()) var mine = [0,1,2]; mine.push(3); // 배열의 마지막에 요소를 추가 // mine = [0,1,2,3] var mine = [0,1,2]; mine.unshift(3); // 배열의 앞쪽에 요소를 추가 // mine = [3,0,1,2] ▷ 배열 요소 삭제하기.. 2020. 11. 11.
[VueJS] props 사용해서 데이터 전달하기 (ft. 검증) props란 무엇일까? vuejs에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 단방향 데이터 전달 방식이다. 정적(Static) / 동적 (Dynamic) 데이터 전달 방식 정적으로 데이터를 전달하는 방법은 말 그대로 전달할 데이터를 직접적으로 명시해 주는 것을 의미한다. 동적으로 데이터를 전달하는 방법은 v-bind나 ":"를 사용하여 변수값을 전달하는 방법을 의미한다. 물론 데이터 전달에 있어서 문자열뿐만 아니라 모든 유형의 값을 prop에 전달할 수 있다. 자식 컴포넌트에서 데이터 받기 데이터를 받는 두가지 방법이 존재한다. 1. 배열에 이름만 명시해서 데이터 받기 export default { props: ['foo', 'bar'], ... } 단순하게 부모 컴포넌트에서 전달.. 2020. 11. 10.
[VueJS] props use camelCase Error : Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. vueJS에서 compoent를 사용하게 되면 props라는 속성을 사용하게 되는데 누구나 한번쯤은 겪을만한 이 에러에 대해 알아보자. props를 사용할 때 아무생각 없이 camelCase를 사용하게 되면 아래와 같은 에러가 발생한다. Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. 그냥 쉽게 말해서 카멜케이스를 사용하고싶으면 케밥케이스를 사용해라 라는 의미인데 Vue 공식 홈페이지에서 다음과 같이 안내를 해주고 있다. HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 .. 2020. 11. 9.
[JavaScript] arr.splice() - 배열 데이터 추가/제거/교체/추출 하기 Array.prototype.splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 한마디로 splice() 메서드를 가지고 push/pop/unshift/shift 역할을 다 할 수 있다고 생각하면 된다. ▷ 구문 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start : 배열의 변경을 시작한 인덱스이다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. (음수로 설정될 경우 배열의 끝에서부터 요소를 세어나가 array.length - n 번째 인덱스를 가르키며, 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.) deleteCount : 배열에서 제거할.. 2020. 11. 5.
[SPRING] mapper xml 쿼리 수정 후 서버 재시작 없이 reloading 하기 - .xml 쿼리문 수정 후 서버 재시작 없이 바로 적용하기 - 서버를 실행중에 쿼리문에서 에러가 발생할 경우 해당 쿼리문을 수정하게되면 서버를 멈추고 다시 시작해야하는 번거로움이 발생하는데 서버 재실행 없이 바로 적용시켜 사용하는 방법에 대해 알아보자. 자바 파일 하나를 생성하고 context-mapper.xml을 수정할 것이다. - RefreshableSqlSessionFactoryBean.java import java.io.IOException; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; import java.util.ArrayList; import.. 2020. 11. 3.
[VueJS] 배열 데이터를 가지고 component 동적으로 추가하기 vueJS에서 배열 데이터를 가지고 component 동적으로 추가하는 방법에 대해 알아보자. 사실 제목만 가지고 유추할 수 있는데, v-for를 component template에 걸어서 사용하는걸 의미한다. (다른 방식으로도 사용하는 방법이 있겠지만 본문에서는 배열 데이터를 가지고 v-for문법을 사용하여 다룬다.) 이러한 방법을 사용하는 이유가 있는데 어떤 기능을 개발하느냐에 따라 다르겠지만 배열데이터를 가지고 v-for문을 돌려서 화면에 뿌려주는데 그 하나하나가 독립적인 기능을 가지고 있다면 component를 동적으로 생성하여 작업을 해야할때 사용한다. 예제 코드를 통해 접해보자. ▷ 예제1) 동적 component 생성 목록 추가 Vue.component('it-component',{ temp.. 2020. 11. 2.
[JSP] .jsp파일 include 하기 (ft. 액션 : <jsp:include>, 지시어 : <%@ include %>) .jsp 파일을 다른 .jsp에서 include 하는 방법에 대해 알아보자. 하나의 jsp 파일에서 모든 코드를 짜는 경우 보다는 영역이나 역할별로 나눠서 작업하는 경우가 많은데, 가장 흔하게 나누는게 header, footer 등이다. ▷구문 구문 자체는 매우 간단하다. include를 하는 방법은 두가지 방법이 존재하는데 각 방법과 차이점에 대해 예제를 통해 알아보자. 1. directive (지시어) 지시어는 스크립틀릿을 사용하는 방식이며 directive 방식은 해당 소스를 포함시킨 후 컴파일을 실시한다. 2. active (액션) 위 구문에서 설명한 방식이며 action 방식은 실행시점에 해당 파일을 수행하여 결과를 포함시킨다. active 방식이 좀더 구동 방식이 독립적이라고 생각하면 된다. .. 2020. 10. 31.
반응형
TOP