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('') }} ..
React - react-live-clock React + Express 활용한 라즈베리파이 관련 IoT 프로젝트 개발 막바지에 상단에 실시간 시계 표시 기능 추가 요청이 들어왔습니다. 전체적으로 짜임새 있고 구조적으로 소스코드를 관리해왔던지라 해당 부분을 component로 구성하고 싶어 이와 관련된 라이브러리가 있어 소개해 봅니다. 불과 몇 분만에 뚝딱 구성해서 적은 코드로 타임존 까지 국가별로 완벽하게 구성 할 수 있었습니다. React 관련 open-library의 장점이라 생각합니다. React, React Native 관련 프로젝트 진행 중이신 분들께 도움이 되길 바라면서 이와 관련 된 자세한 사용 방법은 문서 하단에서 기술하겠습니다. React 관련 포스팅 : React 참고 React - ..
ES6(ECMAScript 6) For문 설명 개발자에게 있어서 반복문을 활용하는 것은 정말 중요하다고 생각합니다. 잘못된 코딩 습관, 의미없는 요소 순회 및 객체 생성 등은 실행 환경에서 성능에도 지장을 주기 때문인데요. 본 포스팅에서는 ES6에서 추가된 For-of 문법과 기존의 For-in 문법의 예제 소스를 작성해 보면서 차이점을 간단하게 비교해 보도록 하겠습니다. For-in, For-of 비교 예제 For-of : 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체 등)을 반복하는 기능 수행 즉, 객체의 요소들(Data)를 순회하기 위한 구문 For-in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행 즉, 객체의 속성들을 순회하..
리액트[React] - ES6 + Babel 기본 설명 ① ES6와 Webpack 등을 활용한 개발 방법이 주가 되고 있습니다.② ES6의 클래스 모듈, 새로운 변수 선언, 키워드, Promise 등을 활용해서 복잡한 애플리케이션의 코드 표현력을 높일 수 있습니다.③ React는 ES6 문법이 주가 되기 때문에 Babel 사용은 필수적이라고 볼 수 있습니다.④ React와 궁합도 좋아서 간단하게 아래 예제를 작성했습니다. 참고하시면 도움이 될 것입니다. 리액트[React] - ES6 + Babel 설명 및 예제 전체 소스코드- 아래 예제는 입문, 초보자를 위한 CDN 방식으로 HTML 파일로 구성 된 간단한 예제입니다.- 실제 프로젝트에서는 아래와 같이 Webpack Build 없이 사용하면 문제가 될 ..
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..
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}