Gravatar

Web 2015. 8. 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
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
,

 잘못된 링크나 팝업으로 잘못 들어가서 Search Protect라는 adware가 설치되고, 윈도우 시스템이 이상해졌다.

 브라우져의 새창의 링크가 이상한곳으로 설정되는건 물론 전체적으로 시스템이 느려지고, 아무 관련없을것 같은 시너지프로그램에서 마우스 랙이 생겨 느리게 움직이는 현상이 나타났다.

 우측 하단의 툴바에는 다음과 같은 아이콘이 생겼는데, IE의 프로그램인양 생겼다. 

 

 이 프로그램을 죽이려면 다음은 작업을 해야한다.

  • Process Explore 프로그램등으로 현재 실행중인 HpUI관련 프로세스를 모두 죽인다.

  • C:\Program Files 폴더 하위에서 "HpUI"란 용어로 검색을 한다.


    • 만약 검색결과가 나오지 않으면 "Tab"이란 용어로 검색한다.

      • 폴더명을 xxxTab등으로 변조하여 설치되는 경우가 있다.

  • 프로그램이 설치된 폴더를 삭제한다.


 Search Protect를 삭제한 후 everything이라는 프로그램도 설치되어 있는지 확인하자. Search Protect와 쌍으로 설치되고 있는 프로그램으로 방화벽의 기록을 보면 그이름도 구린냄새가 많이 난다.

 

 설치되어 있는지 확인해 보려면 C:\User\{사용자계정}\AppData 폴더 하위에 everything이라는 폴더가 있는지 확인하면 된다.

 해당 폴더가 존재하면 해당 폴더에 들어가서 uninstall을 수행하고 해당 폴더를 삭제한다. 

  


쓰레기 ADWare는 예방이 최선인듯 하다.





Posted by leechwin
,

 HDMI 포트를 이용하면 HD영상과 음성이 포함된 신호를 모두 수신하여 좋은 영상의 화질과 음성을 출력 할 수 있다.

 하지만, HDMI 를 지원하는 기기를 HDMI 케이블을 이용하여 연결 했을 경우이고, HDMI 포트를 지원하지않는 기기와 연결 할 경우에는 일부 기능을 제대로 쓸수 가 없다.

 HDMI to RGB 어댑터를 이용하면 기존 모니터, 빔등에서 영상을 볼 수 있는데, 이때 소리가 출력이 안되는 경우가 있다.

 이때는 다음과 같이 설정을 하면, 소리는 Audio Output 단자를 이용하여 출력 할 수 있다.

  • 제어판 > 소리 > 재생 설정
    • 소리 설정값을 외부기기가 아닌 현재 기기의 설정으로 수정한다.
  • 곰 플레이어나 기타 동영상 플레이어 설정을 수정
    • 소리 환경 설정에서 출력 장치를 "Default DirectSound Device"로 설정


'Tip' 카테고리의 다른 글

[자막] 구글 번역기를 통한 외국어 자막 번역  (3) 2017.11.02
[Github] Tips  (0) 2015.08.26
공인 IP Address 확인 방법  (0) 2015.06.15
[SourceCleanUp] 소스 코드 포멧팅 툴  (0) 2014.10.13
[NLOC] 소스 라인 분석툴  (0) 2013.08.06
Posted by leechwin
,

 파일삭제시 해당파일이 다른 곳에서 실행되고 있거나, 다른 프로세스에서 사용하고 있는 경우 해당 파일을 삭제 할 수 없는 경우가 있다.

 그럴 경우 Unlocker라는 툴을 이용하여 해당 파일의 핸들러들을 모두 해제하여 삭제를 하게 할 수 있다.


  • Unlocker
  • 사용법
    • Unlocker설치후 파일 삭제가 안되는 경우 마우스 우클릭의 메뉴중 Unlocker를 실행하여 해당 파일을 잡고 있는 프로세스들을 해제한 후 삭제를 진행 할 수 있다.


Posted by leechwin
,

 외부서버설정이나 방화벽 설정시 내부망 IP Address가 아닌 Public IP Address정보를 알고 싶을때가 있다.

 이때 간단히 자신의 PC의 Public IP Address를 알 수 있는 사이트를 소개한다.


  • What is My IP


  • IPCONFIG
    • http://ipconfig.kr/
    • 위의 사이트에 접속하면 다음과 같이 현재 공인 IP 주소를 확인 할 수 있다.


 그외 다른 서비스업체도 있지만 광고가 많아 필요에 따라 찾아 쓰면 좋을 것 같다.


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/


'Web' 카테고리의 다른 글

[Chrome] Debugging Asynchronous JavaScript  (0) 2015.12.21
Gravatar  (0) 2015.08.26
[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
Posted by leechwin
,

node.js 에서 log 를 관리하는 여러 모듈이 있는데 그중 범용적으로 많이 쓰이는 winston 과 jsnlog 모듈에 대해 소개한다.


Winston 은 nodejs의 server-side 에서 많이 사용하는 로그모듈이다.

  • Multiple transports 라는 개념으로 로그를 레벨별로 다양하게 분리하거나 Console출력, 파일이나 DB에 저장, Remote(Http) 전송등의 기능을 제공한다.
var logger = new (winston.Logger)({
  transports: [
    new (winston.transports.File)({
      name: 'info-file',
      filename: 'filelog-info.log',
      level: 'info'
    }),
    new (winston.transports.File)({
      name: 'error-file',
      filename: 'filelog-error.log',
      level: 'error'
    })
  ]
});

Jsnlog 는 Client의 로그를 Server에 전달하여 Server에서 Server와 Client의 로그를 모두 관리 할 수 있는 기능을 제공한다.

  • C#, PHP, Nodejs 서버와 연동가능
  • Client 로그를 AJAX를 이용하로 서버로 전송가능
  • Winston의 Transport 모듈과 연동가능
    • Server Side(app.js)
    • var winston = require('winston');
      var JL = require('jsnlog').JL;
       var consoleAppender = new (winston.transports.Console)();
      var fileAppender = new winston.transports.File({ json: false, filename: 'filelog.log' });
      JL().setOptions({ appenders: [ consoleAppender, fileAppender ] });
      
    • Client Side(logger.js)
    • var ajaxAppender = JL.createAjaxAppender('ajaxAppender');
      var consoleAppender = JL.createConsoleAppender('consoleAppender');
      JL().setOptions({'appenders': [ajaxAppender, consoleAppender]});
      
  • API
    • Logger Name
      • Logger 생성시 인자로 Logger의 Name을 줄수 있다.
      • JL("MyLogger").warn("log message");
        
    • Log Level 지정가능
    • LOG
      • log(level: number, logObject: any): Logger
        • 일반적인 log API와 다르게 첫번째 인자로 level을 숫자로 넣어주어야 한다.
        • Numeric Severities
        • From Named Severity
          To Numeric Severity
          TRACE1000
          DEBUG2000
          INFO3000
          WARN4000
          ERROR5000
          FATAL6000
  • jsnlog-nodejs
    • Client에서 전송한 로그를 파싱하여 서버에 전송하는 모듈


Posted by leechwin
,

 Node.js app 이 실행 중에 어떤 장애로 인해 app 이 뻗어버린 경우 app 을 다시 실행해야할 경우가 있다.

 app 이 멈출경우 자동으로 app 을 다시 실행시켜주는 forever npm 모듈을 소개한다.


 forever

설치는 npm 모듈로 npm install 로 가능하다.

 $ sudo npm install forever


자주 쓰이는 모듈이기 때문에 -g 옵션으로 글로벌 설치를 하면 편리하다.

 $ sudo npm install forever -g


실행, 조회, 종료는 다음과 같이 실행하면 된다.


실행다음과 같이 실행하면, app.js 가 실행 중 멈추면, 다시 재실행된다

 $ forever start app.js


실행중인 프로세스 조회

 $ forever list


프로세스 종료

 $ forever stop app.js


forever 는 실행시 자신이 포크한 프로세스로 node app 을 실행하고, 프로세스가 stop 되면 자신도 kill 한다.


Help Options






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
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
,

Concurrency Programming of Web

Web 2014. 11. 27. 16:28

Concurrency Programming of Web 에 관한 slide


'Web' 카테고리의 다른 글

Asynchronous Module Definition (AMD)  (0) 2015.02.27
[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
Posted by leechwin
,