Vue.js - WebSocket(웹 소켓) 안녕하세요. 오늘은 Vue.js 를 활용해서 간단한 웹 소켓을 구현해보겠습니다. WebSocket 기술은 쉽게 이야기 해서 서버 및 클라이언트 상호간의 양방향 실시간 데이터 전송을 가능하게 해주는 기술이라고 이해하시면 될 것 같습니다. HTTP와 같은 Long Polling 기술은 서버측에 많은 비용(Cost)를 주는 경향이 있지만, 웹 소켓을 활용한 적합한 환경에서의 기능 구현은 양방향 통신에 많은 장점을 가져다 주는 기술은 분명한 것 같습니다. 이전에 제가 웹 소켓에 대해서 자세하게 기술에 놓은 포스팅을 링크합니다. 웹 소켓 기술에 대해서 좀 더 자세히 알고 싶으신 분들은 아래 링크를 참조하세요. 기존 포스팅 참고 : 링크 그럼 이번 포스팅 시작해 보겠습니..
Npm + Vue.js 테스트 프로젝트 설치이번 포스팅에서는 node(npm)과 git 을 활용해서 Vue.js 테스트 프로젝트를 설치해보려고 합니다. 요즘 핫 이슈로 많은 장점을 가지고 있는 vue.js 프로젝트를 cli 환경에서 설치 및 실행 함으로써 여러 가지 이점을 얻으실 수 있을 거라 생각합니다. 아래 프로젝트는 로그인 및 로그아웃, 블로그 포스팅 기능이 구현되어 있습니다. vue 소스 코드 분석에 적합한 예제라는 생각이 듭니다. 기본적으로 npm 과 git은 설치가 되어 있어야 실행가능하며, 하단 순서대로 설정하시면 윈도우 및 Mac 환경에서 누구나 설치가 가능합니다. Git 설치 이전 포스팅 참고 : Git 다운로드 및 설치Npm 설치 URL : Npm 다운로드 및 설치 Vue 프로젝트 소스..
Vue.js - style 바인딩 설명 오늘은 vue.js의 CSS 스타일 바인딩에 대해 설명 해보도록 하겠습니다. Vue.js의 데이터 바인딩은 Class 목록 및 CSS 인라인 스타일을 조작하기 위해서 사용합니다. 인라인 CSS 스타일이 소스코드 전역에 걸쳐서 산재되어 있다고 가정하면 유지보수하기 정말 까다롭겠지요? 반면에 Vue.js의 데이터 바인딩의 향상된 기능을 사용 할 경우에 좋은 퍼포먼스를 기대할 수 있습니다. 아래에서 간단하게 설명해보도록 하겠습니다. Vue.js 관련 포스팅 : Vue 참고 Vue.js - 세부 설명 data: { fontSize: 30 } 기본적인 v-bind:style 구문입니다. CSS 문이 아닌 Javascript Object 입니다. data 속성의 fontSiz..
Vue.js - computed, method 설명 오늘은 vue.js의 compute, method 를 비교해서 한 번 설명 해보도록 하겠습니다. 최근 프로젝트에서 Vue.js 사용 중에 두 속성의 차이점을 알지 못하고 사용하다가 최근에 대용량의 JSON 파일 파싱 작업 중 만족할 만한 퍼포먼스가 나오지 않아서 속성 변경 후 문제 해결을 경험했습니다. 아래에서 기본표현식, 일반표현식, Computed, Method 네 가지 항목을 비교하면서 설명해보도록 하겠습니다. Vue.js 관련 포스팅 : Vue 참고 Vue.js - 세부 설명 {{ message }} 기본적인 템플릿 데이터 바인딩 형태입니다. 이중 중괄호를 사용합니다. {{ message.split('').reverse().join('') }} ..
Vue.js 템플릿 - 디렉티브 ① 이번 포스팅에서는 Vue.js 디렉티브(Directive)를 차례대로 정리 하겠습니다.② 보통은 v- 로 시작하는 접두사가 붙어있는게 특징이예요.③ 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다. Vue.js 기초문법11 - 디렉티브(Directive) 설명 및 예제 # Directive - v-ifTrue - ShowFalse - Showcs v-if 는 바인딩 된 'testFlag' 값에 따라서 엘리먼트를 선택적으로 표시할 수 있어요. # Directive - v-bindLink Activatecs 바인딩 된 엘리먼트의 속성 값을 동적으로 제어하는데 주로 사용됩니다.v-if 와 함께 자주 사용되는 디렉티브입니다. # Directive - v-o..
Vue.js - 템플릿 문법 ① 이번 포스팅에서는 Vue.js 템플릿 문법 자바스크립트 표현식을 차례대로 정리 하겠습니다.② 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다. Vue.js 기초문법10 - 템플릿 문법 설명 및 예제 # JavaScript 표현식1 - 기본{{ number * 3 }}cs 기본적으로 자바스크립트 일반 표현식 사용이 가능합니다. 쉽죠? # JavaScript 표현식2 - 삼항연산자{{ condition ? 'True' : 'False' }}cs 주의 할 점은 데이터 바인딩 영역(이중중괄호) 안에서는 IF( true ) { ... } 조건문 등은 사용 불가합니다.아울러, var = 'test' 같은 구문도 사용이 불가능하겠죠? # JavaScript 표현식3..
Vue.js - 템플릿 문법 ① 이번 포스팅부터 Vue.js 기본 문법을 차례대로 정리 하겠습니다.② 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다. Vue.js 기초문법9 - 템플릿 문법 설명 및 예제 # 문자열{{ message }}cs 기본적으로 데이터 바인딩은 이중 중괄호를 사용합니다. 바인딩 이후에는 데이터의 message 속성이 변경될 때마다 자동으로 값이 변경(갱신)됩니다. # v-once 디렉티브{{ message_once }}cs v-once 디렉티브(Directive)는 일회성 바인딩을 의미합니다. (값이 변경되지 않습니다.) 단, 같은 노드의 바인딩에도 영향을 끼치므로, 주의해서 사용합시다. 디렉티브(Directive)에 대해서는 나중에 다루겠습니다. # v-ht..
Vue.js - 라이프사이클(LifeCycle) 기본 설명 ① Vue.js로 성공적인 어플리케이션 개발을 위해서는 라이프사이클 이해가 필수적이라고 생각합니다.② 아래 다이어그램을 확실히 이해하면 좋겠지만, 가장 중요한 요소 네 가지만 기억하세요. - Creation - Mounting - Updating - Destruction③ 각 사이클에 대한 자세한 내용은 아래 예제를 보면서 설명하겠습니다. 라이프사이클(LifeCycle) 다이어그램 Vue.js 기초문법8 - 라이프사이클(LifeCycle) 예제 기본 설명 및 소스코드 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455..
Vue.js - 인스턴스(Instance) 기본 설명 ① Vue.js 인스턴스(Instance) - 데이터 변경(watch) 관찰을 설정한다. - 템플릿(template)을 컴파일한다. - DOM을 마운트(Mount), 업데이트(Update) 한다.② 인스턴스(Instance)를 초기화 할 때는 아래와 같은 옵션(options) 객체를 전달해야 한다. - 데이터(data) - 템플릿(template) - 마운트 엘리먼트(Mount Element) - 메소드(method) - 라이프사이클(LifeCycle) 관련 콜백(callback) 등③ 미리 정의된 옵션은 API reference 에서 확인하자. Vue.js 기초문법7 - 인스턴스 생성, watch(감시자) 예제 기본 설명 및 소스코드 - 하단 예제에..
Vue.js - 기본 컴포넌트 작성방법 ① Vue.js에서 컴포넌트(Component)는 정말 중요한 개념이다.② 타 언어의 컴포넌트 개념과 거의 비슷하며 아래와 같다. - 재사용 가능한 응용프로그램을 구축가능하게 하는 추상적 개념 - 거의 존재하는 모든 응용프로그램은 컴포넌트 트리로 추상화 가능하다.③ 미리 정의된 옵션을 가지고 있는 Vue.js의 인스턴스(instance)라고 이해하자. 컴포넌트(Component) 개념 사진 Vue.js 기초문법6 - 컴포넌트 작성 실습 기본 설명 및 소스코드 - 아래 todo-item 태그 참조12345678910111213141516171819202122232425262728293031323334353637383940414243 Component Example V..
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}