Javascript 내의 function 들의 성능 체크를 위해 시간을 측정하는 여러 방법에 대해 알아본다.


Performance.now()

var t0 = performance.now();
doSomething();
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");


Console.time() - Non-standard

console.time('performance');
doSomething();
console.timeEnd('performance');

참조: http://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute



Posted by leechwin

Bootstrap 의 Input 태그 사용시 아래와 같이 입력한 text를 지우는 기능을 넣는 방법에 대한 코드


HTML

});

CSS

::-ms-clear {
  display: none;
}
.form-control-clear {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

JavaScript

$('.form-control').on('input change', function() {
  var $this = $(this);
  var visible = Boolean($this.val());
  $('.form-control-clear').toggleClass('hidden', !visible);
}).trigger('propertychange');

$('.form-control-clear').on('click', function() {
  $('.form-control').val('').trigger('change').focus();
  $(this).toggleClass('hidden', true);
});


Reference: https://codepen.io/frosdqy/pen/grbxGW



Posted by leechwin

fontawesom 라이브러리는 HTML 파일내에서 알려진 특정 아이콘을 사용하기 쉽게 제공한다.

라이브러리를 다운로드 받아 사용하지 않고 CDN을 사용하려면 다음 주소를 사용하면 된다.


아래의 아이콘리스트중 사용하고 싶은 아이콘이 있다면 <i> 태그안에 class 속성으로 아이콘 이름을 넣어주면된다.

예제

  • <i class="fa fa-bus" aria-hidden="true"></i>

fontawesome의 <i> 태그는 Bootstrap 을 이용하고 있다면 <span> 태그를 대체 가능하다.

  • <span class=glyphicon glyphicon-remove"></span>


Posted by leechwin

Windows Chrome 에서 일부 페이지에서 글자가 흐릿하게 나와서 읽는데 불편한 경우가 있다.


Chrome 의 DirectWrite 기능 때문인데 다음과 같이 해당 옵션을 disable 하면 글자가 선명하게 나온다.

  • Chrome 주소창에 chrome://flags 를 입력
  • DirectWrite 사용 중지를 선택
  • 브라우져를 재시작하면 옵션이 적용되게 된다.

하지만 Windows Chrome 52버전부터 이옵션이 사라지게 된다. :(

Reference: http://nuli.navercorp.com/sharing/blog/post/1132689


Posted by leechwin

[Chrome] Cache 삭제

Web 2015.12.31 16:32

크롬 Cache를 삭제하는 방법

  • Ctrl + Shift + Delete
  • Menu > Settings > Privacy > Clear browsing data...
    • 인터넷 사용 기록
    • 다운로드 기록
    • 쿠키 및 기타 사이트/플러그인 데이터
    • 캐시된 이미지 또는 파일
    • 비밀번호
    • 양식 데이터 자동완성
    • 호스팅된 앱 데이터
    • 콘텐츠 라이센스
  • 설정후 Clear browsing data 버튼을 클릭하면 적용된다.

참고로 브라우져의 시크릿 모드(Ctrl + Shift + N)에서는 캐쉬가 남지 않는다.

'Web' 카테고리의 다른 글

[FONTAWESOME] icon 제공 라이브러리  (0) 2016.12.16
[Chrome] 웹페이지의 글자가 흐릿하게 나오는 경우  (0) 2016.01.08
[Chrome] Cache 삭제  (0) 2015.12.31
DOMNodeRemoved event  (0) 2015.12.30
[Chrome] Debugging Asynchronous JavaScript  (0) 2015.12.21
Gravatar  (0) 2015.08.26
Posted by leechwin

DOMNodeRemoved event

Web 2015.12.30 15:56

DOM Element 가 삭제될때 이벤트를 받고 싶다면, DOMNodeRemoved 이벤트를 캐치하면된다.

element.addEventListener('DOMNodeRemoved', function() {
    // code
});

참고: http://help.dottoro.com/ljqkbipq.php

'Web' 카테고리의 다른 글

[Chrome] 웹페이지의 글자가 흐릿하게 나오는 경우  (0) 2016.01.08
[Chrome] Cache 삭제  (0) 2015.12.31
DOMNodeRemoved event  (0) 2015.12.30
[Chrome] Debugging Asynchronous JavaScript  (0) 2015.12.21
Gravatar  (0) 2015.08.26
Asynchronous Module Definition (AMD)  (0) 2015.02.27
Posted by leechwin

크롬 브라우져에서 Promise등의 Async Javascript 코드의 경우 디버깅시에 콜스택의 정확한 디버깅 지점을 찾기가 어려운 경우가 있다.

크롬 브라우져의 DevTools 에서는 자신이 작성한 Async 코드가 콜스택에 나타나도록 하는 옵션이 있다.

  • DevTools > Source > Async 체크박스 선택

위와 같이 선택하면, 콜스택에 Async framework 코드외에 자신이 작성한 Async 호출코드도 나타나게 되어 디버깅이 가능하다.


참고: http://www.html5rocks.com/ko/tutorials/developertools/async-call-stack/


'Web' 카테고리의 다른 글

[Chrome] Cache 삭제  (0) 2015.12.31
DOMNodeRemoved event  (0) 2015.12.30
[Chrome] Debugging Asynchronous JavaScript  (0) 2015.12.21
Gravatar  (0) 2015.08.26
Asynchronous Module Definition (AMD)  (0) 2015.02.27
[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
Posted by leechwin

Gravatar

Web 2015.08.26 16:49

 Gravatar(grobally recognized avatar)란 이메일 주소에 개인의 사진이나 아이콘을 등록하고, 이를 어디서 이용할 수 있게 호스팅 해주는 웹 아바타

서비스이다.

 간단히 말해, 이메일 주소와 이미지를 매칭시켜놓아서, 이메일만 알면 프로필 이미지를 보여줄 수 있다.

 이미 Wordpress, github등에서 gravatar 서비스를 사용하고 있다.


 



























Gravatar 서비스 가입

  • 다음 사이트에서 이메일로 가입을 하면, 해당 이메일애 대한 Gravatar 이미지를 등록 할 수 있다.
  • https://secure.gravatar.com/

API

  • 이미지를 등록하였다면, 다른 서비스에서 사진의 URL을 만들어서 사용가능 하다.
  • Gravatar URL
  • // {0}: 이메일을 MD5로 암호화한 문자열

    // {1}: 사진 사이즈(1~512)

    http://www.gravatar.com/avatar/{0}?s={1}

    ex)

    https://secure.gravatar.com/avatar/1ba46a6b3a2f9f6074f86afdaee2dc5e?s=22


'Web' 카테고리의 다른 글

DOMNodeRemoved event  (0) 2015.12.30
[Chrome] Debugging Asynchronous JavaScript  (0) 2015.12.21
Gravatar  (0) 2015.08.26
Asynchronous Module Definition (AMD)  (0) 2015.02.27
[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
Concurrency Programming of Web  (0) 2014.11.27
Posted by leechwin

JavaScript 모듈화 및 Lazy Loading 으로 쓰이는 기술, AMD에 대해 간단히 알아보자


동적로딩(Dynamic Loading, Lazy Loading)

  • HTML 파일 로딩시에 <script> 태그내의 내용이 모두 로딩되기전까지 html 이 파싱되지 않고 기다리고 있어서 페이지의 랜더링이 늦어진다.
    • 꼼수로 <body> 태그의 마지막에 <script> 태그를 배치하여 UI 랜더링이후 <script> 내용을 읽는 방법이 있다.
  • 동적로딩은 필요할 경우에만 <script> 내용을 동적으로 로딩하는 방법으로, Eclipse 의 plug-in 시스템과 비슷한 맥락의 방법이다.
    • 동적로딩은 여러 방법이 있지만 <script> 태그를 동적으로 만들어서 헤더태그의 제일 마지막에 삽입하는 방법이 많이 쓰인다.
  • 예제
    • <!-- index.html --!>
      <html>
       <head>
              <title>Test</title>
              <script src="js/main.js"></script>
          </head>
          <body>
              <button onclick="test()">Lazy Loading</button>
          </body>
      </html>
      
    • // main.js
      function test() {
          var scriptElement = document.createElement('script');
          scriptElement.type = 'text/javascript';
          scriptElement.src = 'js/lazy.js';
          scriptElement.onload = function(script) {
              console.log('script lodaed!');
          };
          document.getElementsByTagName('head')[0].appendChild(scriptElement);
      }
      
    • // lazy.js
      function lazy() {
          alert('lazy');
      }
      
    • 실행결과
      • Lazy Loading 버튼을 클릭하기 전에는 lazy.js 가 로딩되지 않았지만, 버튼을 클릭하면 lazy.js 가 로딩이된다.


History

  • JavaScript 모듈화에 대한 명세를 정의하는 표준화 정의 그룹으로 CommonJS 그룹이 있고, 여기서 신설된 AMD 라는 그룹이 새로 생김
  • JavaScript 모듈화의 목표
    • 모듈화
      • 외부에서 쉽게 사용가능
    • Lazy Loading
      • 필요할때에 로딩 가능
    • JavaScript 에 대한 모듈정의 
      • 스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
      • 정의(Definition): 모듈 정의는 exports 객체나 define 함수를 이용
      • 사용(Usage): 모듈 사용은 require 함수를 이용


CommonJS(CJS)

  • http://www.commonjs.org/
  • exports
    • 모듈 정의
  • require()
    • 모듈 사용
  • 예제
    • //--------------------------------------------- 
      // test.js
      // export 할 모듈 정의
      function test(){
          this.first = function(){
              console.log('first');
          }
          this.last = function(){
              console.log('last');
          }
      }
      // 모듈 export
      exports.test = test;
      
      //--------------------------------------------- 
      // main.js
      var test = require('./test').test;
      var module = new test(); 
      module.first(); // 'first'
      module.last(); // 'last'
      


AMD

  • https://github.com/amdjs/amdjs-api/blob/master/AMD.md
  • define()
    • 모듈 정의
    • CommonJS 의 exports 와 같은 개념
    • Signature
      • define(
            module_id /*optional*/, 
            [dependencies] /*optional*/, 
            definition function /*function for instantiating the module or object*/
        );
        
    • module_id
      • 모듈 이름
    • dependencies
      • 모듈이 갖는 의존성  모듈(먼저 로드되어야 하는 모듈)의 배열
      • 기술된 모듈은 definition function 의 인자로 순서대로 전달된다.
      • 예제
        • //--------------------------------------------- 
          // test.js
          // 모듈정의
          define([
                  'js/jquery.js', // 의존성을 가지는 모듈들을 기술
                  'js/my.js'
              ], function(jQuery, my) { // 의존성을 가지는 모듈들이 순서대로 매개변수로 담김
                  // 의존 모듈들이 모두 로딩 완료되면 함수를 실행
                  function first() {
                      console.log('first');
                  }
                  function last() {
                      console.log('last');
                  }
                  return {
                      first: first,
                      last: last
                  };
              }
          );
          
    • require()
      • 모듈사용
      • 예제
        • //--------------------------------------------- 
          // main.js
          require([
                  'js/test.js'
              ], function(test) {
                  test.first(); // 'first'
                  test.last();  // 'last'
              }
          );
          


RequiredJS

  • RequireJS implements the AMD API
  • 지원하는 프레임웍
    • Dojo (1.7), MooTools (2.0), Firebug (1.8), jQuery (1.7).
  • Requried JS
    • define과 require의 차이점은?
      • define 은 모듈을 등록하여 export 할 경우 사용
      • require 는 기존 모듈을 사용하여 비지니스 로직을 구성할 경우 사용
        • require 함수에서는 새로운 모듈구현을 return 할수 없다.
      • http://stackoverflow.com/questions/9507606/when-to-use-require-and-when-to-use-define
    • define에서 기술된 모듈이 순서가 중요한 경우(의존성 관계)
      • define 에 기술된 모듈은 asynchronous 하게 병렬적으로 로딩되는데 AMD 를 지원한다면 자체적으로 관련 모듈에 대한 dependecy 에 대한 모듈이 로딩되고 factroy 함수가 실행된다.
      • define 에 기술된 모듈이 AMD 를 지원하지 않고 순서를 갖는 경우, 가령 define dependency 에 jquery ui, jquery 가 순서가 다르게 되있어 로딩순서가 중요한 경우 shim 설정으로 모듈간의 디펜던시를 기술

References

  • GitHub AMD Document
    • https://github.com/amdjs/amdjs-api/blob/master/AMD.md
  • JavaScript 표준을 위한 움직임 CommonJS와 AMD
    • http://helloworld.naver.com/helloworld/textyle/12864
  • RequireJS - AMD의 이해와 개발
    • http://helloworld.naver.com/helloworld/591319
  • Writing Modular JavaScript With AMD, CommonJS & ES Harmony
    • http://addyosmani.com/writing-modular-js/
  • Stackoverflow: Relation between CommonJS, AMD and RequireJS?
    • http://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
  • AMD: The Definitive Source
    • http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/


Posted by leechwin

WIDL (Web IDL) 파일을 xml 포멧의 widlprocxml 파일로 변환하는 방법에 대해 알아보자.


  • widl 파일 작성
  • widlproc 파일 빌드
    • widl 파일을 widlprocxml 형식으로 변환하려면 widlproc 이라는 Generator 를 사용해야 되는데 다음의 Github 소스를 받아 빌드를 한다.
      • Github Project - widlproc
        • 리눅스에서 위의 프로젝트를 다운로드한후 make 명령을 수행하면 widlproc 이라는 바이너리 파일이 생성된다.
  • widlprocxml 파일로 변환
    • widlproc 을 이용하여 다음과 같은 명령을 수행하면 widlprocxml 을 얻을 수 있다.
      • $ widlproc source.widl > source.widlprocxml


'Web' 카테고리의 다른 글

Gravatar  (0) 2015.08.26
Asynchronous Module Definition (AMD)  (0) 2015.02.27
[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
Concurrency Programming of Web  (0) 2014.11.27
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
Posted by leechwin