본문 바로가기
반응형

분류 전체보기706

[VueJS] 부모, 자식 간의 메소드 사용/접근하기 (ft. $parent, $refs, Inline Templates) vueJS에서 여러 component를 자식으로 두고 페이지를 구성할 때 공통으로 사용하는걸 상위 컴포넌트에 두고, 하위 컴포넌트에서 이를 사용하게 되는 방식으로 구현을 하게 되는데, 이때 상위 컴포넌트와 하위 컴포넌트 간의 메서드에 접근하는 방법에 대해 알아보자. 예제는 inline-template을 기반으로 하였으며 이 template 사용법은 3.x 버전부터는 사용이 중지된것으로 알고있다. ▷ 예제1) inline-tempate example mine it record VueJS Vue.component('mine-it', { data() { return { test : 'hi' } }, methods: { goParnet : function(){ this.$parent.goChild(); }, h.. 2021. 2. 20.
[JavaScript] Date() - 년/월/일 날짜 가져오기 (ft. Date.prototype) script 개발을 하게되면 가끔 날짜가 필요한 경우가 생길텐데 Date를 사용하여 년/월/일 날짜를 가져오는 방법에 대해 알아보자. 가볍게 예제를 통해 먼저 알아보자. ▷ 예제1) var date = new Date(); date.getFullYear(); // 2021 date.getMonth() + 1; // 2 date.getDate(); // 12 역시 일반적으로 사용하는게 년 /월 /일 이기 때문에 각각 getFullYear() / getMonth() / getDate() 를 통해 값을 가져올 수 있다. 물론 더 나아가 여러가지 값들을 구할수 있는데 간단하게 몇가지만 알아보자. ▷ 메서드 목록 - getFullYear : 년도 - getMonth : 월 (0 ~ 11 을 반환하기 때문에 +1을.. 2021. 2. 12.
[JavaScript] arr.findIndex() - 조건에 맞는 배열의 특정 값 위치(index) 찾기 (Array.prototype.findIndex()) 배열에서 특정 값의 위치(인덱스)를 찾아주는 indexOf 가 존재하는데, 아무래도 상세한 조건에 따라 인덱스를 반환해주는 메서드는 따로 존재한다. Array.prototype.findIndex() 메서드에 대해 알아보자. indexOf와 동일하게 조건에 맞으면 배열의 index를 반환하고 만족하는 요소가 없으면 -1을 반환한다. ▷ 구문 arr.findIndex(callback(element[, index[, array]])[, thisArg]) callback : callbackFunction 이며 function 안에서 조건에 따라 값을 반환한다. (만족 여부에 따라 인덱스 or -1) element : 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array : fin.. 2021. 2. 7.
[JavaScript] elem.scrollIntoView() - 특정 요소 위치로 화면 스크롤 이동하기 javascript에서 화면의 특정 위치로 이동시켜주는 함수가 존재한다. 버튼을 눌렀을때 원하는 내용이 있는 위치로 이동시켜야 한다거나 그럴때 사용할 수 있다. scrollIntoView() 메소드가 존재하는데 element기반으로 사용하는거라 특정 element를 기준으로 스크롤을 이동시킨다. ▷ 구문 element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter 보는것처럼 3개의 문법이 존재하는데 첫번째로 아무 매개변수도 사용하지 않고 그냥 사용하는방법과 두번째로 Boolean parameter t.. 2021. 2. 6.
[JavaScript] Number.isInteger() - 특정 값의 정수/소수점 여부 확인하기 스크립트에서 특정 값이 정수인지 판별해주는 메서드가 존재하는데, Number.isInteger() 메서드에 대해 알아보자. ▷ 구문 Number.isInteger(value) 가볍게 예제를 통해 접근해보자. ▷ 예제1) Number.isInteger(2) //true Number.isInteger(-2) //true Number.isInteger(2.2) //false Number.isInteger(NaN) //false Number.isInteger(Infinity) //false 아주 손쉽게 정수여부를 확인할 수 있으나 이 역시 IE에서는 사용할 수 없다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Object.. 2021. 2. 6.
[jsTree] plugin search를 사용하여 검색기능 활성화하기 jstree 에서 제공하는 plugin중에 하나인 search에 대해 알아보자 영어단어 그대로의 의미인 검색기능을 제공해주는 플러그인인데 사용방법은 간단하다. $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] }, 'plugins' :.. 2021. 2. 6.
[PostgreSQL] 뷰(view) 테이블 생성(CREATE), 수정(CREATE OR REPLACE), 삭제하기(DROP) PostgreSQL에서의 view 테이블 제어에 대해 알아보자. ▷ 구문 CREATE [ OR REPLACE ] [ TEMP | TEMPORARY ] VIEW name [ ( column_name [, ...] ) ] [ WITH ( view_option_name [= view_option_value] [, ... ] ) ] AS query 예제를 통해 쉽게 접해보자. ▷ 예제1) CREATE VIEW TABLE CREATE VIEW mine AS select * from it t , record r where t.sn = r.sn 예제는 mine 이라는 view 테이블을 생성하는 건데 AS 뒤에 나오는 쿼리문의 결과를 VIEW로 만들어 주는 것이다. ▷ 예제2) REPLCAE VIEW TABLE CRE.. 2021. 1. 23.
[VueJS] $set()/$delete() - 객체, 배열 데이터 변경 및 삭제 감지 요청 vueJS의 가장 큰 특징은 양방향 바인딩이라 생각된다. 하지만 그 양방향 바인딩의 특징이 VueJS를 사용하면서 객체 데이터나 배열 데이터를 사용하게 되면 새로운 속성 및 데이터가 추가되거나 삭제되는 것을 감지하지 못하는 경우가 자주 생긴다. 여기서 "값이 갱신되었다." 라고 요청을 하는 메서드인 Vue.set / $set 와 Vue.delete / $delete 가 존재한다. ▷ 구문 배열 : Vue.set(arr, index, value) // == this.$set(arr, index, value) 객체 : Vue.set(obj, key, value) // ==this.$set(obj, key, value) Vue.delete(obj, key) // == this.$delete(obj, key) .. 2021. 1. 23.
[VueJS] v-bind 와 v-on 약어 사용하기 vueJS에서 가장 많이 사용되는 v-bind 와 v-on 표현식에 대한 약어에 대해 알아보자. 아마 가장 많이 사용하는 표현식이라 vueJS에서도 약어를 만들어놓은게 아닐까하는 생각이든다. 예제를 통해 접해보자. ▷ 예제1) v-bind 약어 ... ... ... ▷ 예제2) v-on 약어 ... ... ... 확실히 익숙해지니까 약어가 굉장히 편리하다. 출처 : https://kr.vuejs.org/v2/guide/syntax.html#%EC%95%BD%EC%96%B4 템플릿 문법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 2021. 1. 23.
반응형
TOP

티스토리툴바