Nginx를 이용한 WebSocket reverse proxy

와는 달리 전이중 통신 채널을 제공하는 프로토콜이다. HTTP와는 전혀 다른 프로토콜이지만 HTTP로 부터 유도되기 때문에, HTTP와 쎄트로 취급하는 경우가 많기는 하다. WebSocket을 이용하면 서버&클라이언트가 (마치 소켓 프로그램처럼) 자유롭게 메시지를 주고 받을 수 있다.NginX를 이용해서 WS를 프락시하는 방법을 살펴보려 한다. 테스트를 위...

Vue 인스턴스

모든 Vue 앱은 Vue 인스턴스를 만드는 것부터 시작한다.var vm = new Vue({ // 옵션})Vue 인스턴스를 인스턴스 화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함 할 수 있는 options 객체를 전달해야 한다. 전체 옵션 목록은 를 참고하자.인스턴스는 아래와 같이 정의 할 수 있다. 인스턴스...

Vue.js component

웹 사이트들은 서로 다른 여러 컴포넌트들고 구성이 된다. 이들 컴포넌트들은 더 작은 컴포넌트들로 구성되기도 하며, 재사용되기도 한다. Vue 컴포넌트는 일종의 함수로, 코드를 재사용 할 수 있게 하고 가독성을 높여준다. 일반적인 사이트는 헤더, 탑 메뉴, 사이드바, 컨텐츠, 바닥 글 등의 독립적인 컴포넌트로 구성된다. 이들을 함께 배치해서 사용자 인터페이스...

Vue.js 시작

jquery로 노가다 뛰고 있는데, Vue.js라는 녀석이 나와서 해볼려고 한다. 과연 이녀석은 어떨지. 여기에 있는 모든 예제들은 페이지에서 실제 작동하는 예제들이다.Vue는 유저 인터페이스를 만들기 위한 프로그래시브 프레임워크(progressive framework)다. 다른 모놀리틱 프레임워크와는 다르게 Vue는 점진적으로 채택이 가능하게 만들어졌다....

Javascript로 페이지 이동

HTML meta 태그와 javascript를 이용한 두 가지 방법이 있다.

Vue.js 이벤트 핸들링

v-on 지시자(directive)로 DOM 이벤트를 듣고 Javascript를 실행 할 수 있다.

자바스크립트와 JSON

은 자바스크립트(Javascript)언어에서 파생되는 데이터형식으로 자바스크립트 사용시 자연스럽게 사용하게 된다. JSON은 아래와 같은 목적으로 사용한다. 데이터의 저장 유저입력으로 부터 자료구조의 생성 설정과 데이터 확인 자바스크립트가 웹에 워낙에 널리 펴저있기 때문에, 다른 대부분의 언어들역시 JSON을 다루기 위한 패키지(혹은 라이브러리)들을 제공...

Javascript로 뒤로가기 막기

히스토리를 조작해서 뒤로가기를 막을 수 있다. 자바스크립트를 이용하는 것이니 만큼, 자바스크립트를 지원하지 않는 브라우저에서는 사용 할 수 없다. 뒤로가기를 눌러서 이전 페이지를 호출할 경우 "에러"가 출력되는 경우가 많을 건데, 유저 실수를 막아서 사이트의 흐름을 원할히하기 위한 목적이라고 보면 된다. 다른 방법도 마찬가지로 완전히 막을 수 있는 그런 방...

센서 에뮬레이트

모바일 기기의 센서를 이용해서 위치와 가속정보를 얻고자 한다. 센서가 없는 데스크탑 PC에서는 테스트 할 수 없다. 나는 안드로이드에서 크롬 웹 브라우저를 이용해서 테스트했다. 웹 브라우저를 이용해서 테스트를 한 이유는 네이티브 앱 만들기가 귀찮아서이다. 혹시 네이티브앱을 만들더라도 ionic 정도로 만들게 되지 않을까 싶다. 테스트 환경은 아래와 같다. ...

JSON

JSONJSON(Javascript Object Notation)은 attribute-value 쌍으로 구성되는 텍스트 기반의 정보 표현 포멧이다. XML과 마찬가지로 서버와 클라이언트간 데이터를 교환하기 위한 목적으로 사용한다. 특히. 웹 애플리케이션에서 널리 사용한다. 원래는 자바스크립트 언어에서 사용하기 위해서 만들었지만, 언어에 독립적 테이터 타입...