인호의 IT 잡동사니

CDN - Content Delivery Network콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템Web의 성능을 높이기 위해 CDN를 활용한다Image이 로딩이 길기 때문에 CDN를 활용하여 Image의 로딩속도 증대 시킨다.Content의 종류웹 관련HTMLCSSJava Script다운로드 가능한 요소Media File (Image, Movie etc)SoftwareDocument실시간 미디어주문형 스트리밍소셜 네트워크 등등.Web 성능 향상 방법Domain Sharding하나의 브라우저에서 하나의 도메인에서 동시에 가지고 올수있는 갯수는 한정적이기 때문에 Domain을 여러개로 설정하여 여러개를 동시에 읽을수 있도록 설정을 한다.압축 (Compres..

NginxHTTP proxy serverMail proxy serverTCP/UDP proxy serverHttp 서버 특징static 파일 제공 기능Cache, Load Balancing, Fault tolerance압축 GzipSSL 지원Http2 지원Name-based, Ip-based 가상 서버 (Virtual servers)Keep-aliveAccess log 기능 (format, buffed writing, rotation, syslog)3xx-5xx redirect 기능Access control (client ip, basic authentication)Http referer의 검증 기능FLV and MP4의 스트리밍IP based geolocationA/B TestingRequest Mir..

Onsen UIMobile App Style CSSHello World with JQueryhttps://codepen.io/anon/pen/vzzmwV Click Me Page Navigatehttps://codepen.io/anon/pen/LJJyod HTML Page 1 This is the first page. Push page Page 1 This is the second page. JSdocument.addEventListener('init', function(event) { var page = event.target; if (page.id === 'page1') { page.querySelector('#push-button').onclick = function() { document.quer..

image lazy loading웹에 이미지가 많은 경우 로딩으로 인해 페이지가 제때 뜨지 않는 경우가 있을수 있다. 이런 경우를 방지하기 늦게(lazy) 이미지를 로딩하는 기법을 이용하여 페이지 로딩을 빠르게하는 방법이다. 직접 구현을 해서 사용할수 있지만 여기서는 open source 중에 하나인 belazy.js, lazyload를 이용해서 알아보자.blazyhttp://dinbror.dk/blazy/ var bLazy = new Blazy({ breakpoints: [{ width: 420 // Max-width , src: 'data-src-small' }] , success: function(element){ setTimeout(function(){ // We want to remove the..

Vue.jsInstallationIE 8를 지원하지 않는다.를 이용하는 방법개발시에는 Production 버전이 아닌 Development 버전을 쓰는 것이 좋다. Production 버전에서는 Warnning이 나오지 않는다.CDNhttps://unpkg.com/vueCDN를 이용한다면 최신버전의 Vue.js를 사용할수 있다.npmnpm install vuecli# install vue-cli$ npm install --global vue-cli# create a new project using the "webpack" template$ vue init webpack my-project# install dependencies and go!$ cd my-project$ npm install$ npm ru..