전체

오늘은 Vue.JS 보간법 디렉티브(Directive) v-bind, v-on 약어에 대해 포스팅하려고 합니다. vue에서는 인스턴스에 선언한 엘리먼트를 통해서 DOM요소를 제어합니다. DOM 제어는 v- 접두어가 붙어있는 보간법 디렉티브 속성들을 사용합니다. 디렉티브 속성중에서 v-bind와 v-on은 vue에서 자주 사용되기 때문에 약어를 제공하고 있습니다. 약어의 사용은 개인의 취향 또는 선택사항이지만 개발자끼리 소통 또는 서로의 코드를 공유하고 쉽게 이해하기 위해서는 필수로 알아두어야 한다고 생각합니다. 1. v-bind 약어 ... ... ... 2. v-on 약어 ... ... ... 참조 - https://kr.vuejs.org/v2/guide/syntax.html#%EC%95%BD%EC%9..

오늘은 Vue.JS step 7. props 데이터 전달(부모 -> 자식)에 대해 포스팅하려고 합니다. Vue.JS에서는 상위(부모) 컴포넌트에서 선언한 data의 값을 하위(자식) 컴포넌트에서 사용하고자 할 때 단순하게 bind를 하거나 Mustache(이중 중괄호)를 사용하여 data를 이용할 수 없습니다. 위 문제를 해결하기 위해 props라는 속성을 이용합니다. props란 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용되는 전달 방식입니다. v-bind를 사용하여 상위(부모) 컴포넌트의 데이터를 동적으로 바인딩할 수 있습니다. 아래 예제 소스코드를 통해 알아보도록 하겠습니다. props.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. 위 예제 소스에서 ..

오늘은 온라인에서 사용 가능한 gif 변환기에 대해 소개 및 사용법에 대한 포스팅을 하려고 합니다. 종종 확장자를 변환하여 사용할 일들이 생기는데 그때마다 특정 tool을 설치하여 사용하는 일도 생각보다 번거로운 일입니다. ezgif는 설치가 필요 없이 아래 링크를 통해 온라인에서 사용할 수 있습니다. https://ezgif.com/ Animated GIF editor and GIF maker Easy to use online animated GIF maker and image editor. Upload and edit GIF images for free. Create, crop, resize, reverse, optimize and split animated GIFs, cut and resize vi..

오늘은 CentOS7에서 python 패키지 수동 설치 방법에 대해 포스팅 하려고 합니다. CentOS7에서 python은 기본으로 2.7.5v이 설치되어 있습니다. 새로운 python version을 사용하기 위해서 yum install python과 같은 명령어를 사용할 수 있지만, 안정화된 버전들만 yum install이 되기 때문에 python의 가장 최신버전을 설치하기 위해서는 python 패키지를 별도로 다운받아서 수동으로 설치해야 합니다. 1) python 설치에 필요한 플러그인 설치 # yum install gcc openssl-devel bzip2-devel libffi-devel -y 2) python 설치 버전 확인 및 다운로드 아래 링크를 통해 수동으로 설치하기 위한 python 버..

오늘은 Vue.JS step 6. watch vs computed 에 대해 포스팅 하려고 합니다. Vue.JS에서 watch와 computed는 비슷하지만 각각의 역할에 의해 구분이 되기 때문에 함께 비교하며 보도록 하겠습니다. 먼저 watch는 단어의 연관된 의미로 "감시자" 라고 볼 수 있습니다. 특정 대상을 지켜보며 변화를 감시하고 변화에 따라 watch에서 정의한 함수들이 동작하게 됩니다. 정의된 함수를 실행하기 위한 트리거 라고도 볼 수 있습니다. 또한 watch는 기본적으로 변경된 값의 newValue 인자와 변경되기 전의 값인 oldValue 인자를 변수값으로 가지고 있습니다. 그리고 computed는 단어의 연관된 의미로 "계산기" 라고 볼 수 있습니다. 기존의 정의된 값을 연산하여 결과 ..

오늘은 Vue.JS step 5. 메서드(methods)에 대해 포스팅 하려고 합니다. Vue.JS 인스턴스의 속성중에 methods를 통해 javascript의 function() 메서드를 생성할 수 있습니다. 또한 Vue.JS는 methods 안에 컴포넌트 인스턴스를 항상 참조할 수 있도록 this값을 자동으로 binding합니다. 아래 예제 소스코드를 통해 알아보도록 하겠습니다. methods.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. vue 인스턴스 안에 methods에 함수를 정의합니다. 저는 간단하게 plus, minus의 function()을 정의하였습니다. 인스턴스안에 바인딩된 num 값을 this로 사용하여 값을 늘리고 줄이는 형태의 메서드입니다. {{message..

오늘은 Vue.JS step 4. 데이터 바인딩(data binding)에 대해 포스팅하려고 합니다. 데이터 바인딩(data binding)은 HTML 태그 안에 vue 인스턴스에서 속성들을 정의한 data를 연결하여 화면에 표시하는 방법으로 {{ }} 콧수염 괄호 형태의 템플릿 엔진 Mustache 또는 v-bind 속성을 사용합니다. 아래 예제 소스코드를 통해 확인해 보도록 하겠습니다. data-binding.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. vue 인스턴스를 생성하고 엘리먼트(el)에 html의 div id가 app인 태그를 연결합니다. data에 key - value 형태의 데이터를 만들고 v-bind 또는 {{ }} Mustache형태로 app 태그 안에 정의한 ..

오늘은 Vue.JS step3. 컴포넌트(component)에 대해 포스팅하려고 합니다. Vue.JS에서 컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미합니다. HTML Element를 확장하고 재사용 가능한 형태로 구현이 가능하며 Vue.JS에서 사용된 모든 컴포넌트는 하나하나가 인스턴스라고 볼 수 있습니다. 컴포넌트는 일반적으로 전역 컴포넌트와 지역 컴포넌트가 있습니다. 컴포넌트 이름으로 template속성에서 사용할 HTML 태그를 직접 정의하여 사용할 수 있고, 컴포넌트 내용으로 template, data, methods 등의 인스턴스 옵션 속성을 정의하여 사용할 수 있습니다. 1) 전역(Global) 컴포넌트 인스턴스 밖에서 Vue.component() 형태로 등록할 컴포넌트의 이름과 내..