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

[Chrome] Debugging Asynchronous JavaScript

Web 2015. 12. 21. 20:36

크롬 브라우져에서 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
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. 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
,

Asynchronous Module Definition (AMD)

Web 2015. 2. 27. 21:13

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
,

[WIDLPROC] widl 을 widlprocxml 파일로 변환하기

Web 2015. 1. 15. 19:02

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
,

[Chrome] Your profile could not be opened correctly

Web 2014. 10. 24. 14:06

크롬 브라우져에서 "Your profile could not be opened correctly." 라는 메시지가 발생하는 경우가 있다.


원인은 크롬의 Profile Data 가 잘못되어서 이파일을 삭제하면 해결이 된다.


운영체제별 다음 파일을 지우면된다.


  • Mac OSX
    • cd /Users/{user}/Library/Application Support/Google/Chrome/Default
    •  rm -rf History*; rm -rf Web\ Data;
  • Windows 7
    • cd C:\Users\{username}\AppData\Local\Google\Chrome\User Data\Default\
    • Delete the file named “Web Data”
  • Linux
    • cd ~/.config/google-chrome/Default
    • rm -rf Web\ Data;


Reference: http://www.fourleaftechnology.com/index.php/General/google-chrome-profile-could-not-be-opened-correctly-error.html

저작자표시

'Web' 카테고리의 다른 글

[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
Concurrency Programming of Web  (0) 2014.11.27
[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
Posted by leechwin
,

[Browser] Bookmarklet

Web 2014. 8. 23. 00:35

브라우져의 북마크를 응용하는 기술인 Bookmarklet 에 대해 알아보도록 하자.


  • Bookmarklet
    • 북마크(Bookmark)와 애플릿(Applet)의 합성어.
    • 웹브라우저의 북마크를 활용한 작은 어플리케이션
    • 브라우져가 로딩된이후 북마크를 클릭하여 내부 자바스크립트가 동작는 플로우를 가진다.
  • Usage
    • 로딩된 브라우져의 정보를 외부 URL 의 Query 로 날려서 RestAPI 를 호출하거나 Dictionary lookup 등으로 영어사전등으로 활용가능하다.
    • 로딩된 DOM 등의 정보를 얻거나 수정하여 현재 배경화면 색등을 자신의 Theme 으로 변환가능하다.
    • Browser 의 window, document 등의 객체 정보와 외부 REST API 등을 활용한 다양한 방면으로 응용가능하다.


  • Basic
    • Previous knowledge for Bookmarklet
      • 다음과 같은 코드를 Browser 에서는 URL 에 "javascript" prefix 문자를 가진 contents 에 대해서는 자체적으로 파싱해서 처리

      •  <a href="javascript:alert('this is not uri');">link</a>

        Browser에서는 Bookmarklet 의 URL 정보에 기술된 Bookmarklet script 를 page 로드가 완료된뒤에 실행

      • Anonymous function 을 사용하여 namespace 충돌을 방지한다.

    • Simple Bookmarklet

      • 북마크를 클릭하였을경우 현재 브라우져의 엔진정보를 확인하는 북마클릿을 만들어보자.
        • Bookmarklet 생성 및 URI 수정
          • 임의의 북마크를 생성
          • 생성된 북마크를 수정하여 URL 에 다음과 같이 입력


          •  javascript:(function (){ alert(navigator.product);})();  

  • Advanced
    • External javascript library 삽입
      • 현재로딩된 페이지에 새로운 javascript 를 주입하는 기법
      • 기존 code symbol 과의 conflict 에 주의
      • 과한 용량의 파일을 주입하면 페이지가 멈출 수 있다

      •  javascript: (function () {

            var jsCode = document.createElement('script');
            jsCode.setAttribute('src', 'http://path/to/external/file.js');                 
          document.body.appendChild(jsCode);
         }());
    • HTML, Javascript 라이브러리나 REST 라이브러리 등의 테스트에 사용가능
      • Bookmarklet 만 배포 후 외부 URL 로 REST API 에 인자를 전달하여 테스트 가능
      • Cross-browser Test 가능
    • Validator 연동가능
    • 사용자 정의 Theme 가능
      • 사용자가 원하는 Theme 정의 가능

      •  javascript:void(document.body.style.background = 'black');


  • Practice
    • 구글검색기

      •  javascript:(function() {

        function se(d) {
         return d.selection ? d.selection.createRange().text : d.getSelection()
        }
        s = se(document);
        for (i=0; i<frames.length && !s; i++) s = se(frames[i].document);
        if (!s || s=='') s = prompt('Enter%20search%20terms%20for%20Google','');
        open('https://www.google.co.kr' + (s ? '#newwindow=1&q=' + encodeURIComponent(s) : '')).focus();
        })();
    • 메모장
      • Twitter 에 Mike Francis 가 bookmarklet code snippet 을 올린것이 화재
      • https://twitter.com/_mikefrancis/status/469788991668383744

      •  data:text/html, <body contenteditable style="font: 2rem/1.5 monospace; max-width:60rem; margin:0 auto; padding:4rem; ">
    • 게임
      • http://kathack.com/

      •  javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);
    • The Printliminator
      • http://css-tricks.com/examples/ThePrintliminator/



저작자표시

'Web' 카테고리의 다른 글

Concurrency Programming of Web  (0) 2014.11.27
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
[Brackets] Open source code editor for the web  (2) 2013.12.10
Posted by leechwin
,

Browser Object Model

Web 2014. 2. 3. 22:40

 Browser Object Model (BOM) 에 관한 slide


저작자표시

'Web' 카테고리의 다른 글

[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
[Brackets] Open source code editor for the web  (2) 2013.12.10
Web Dev Tools Review  (0) 2013.12.10
Posted by leechwin
,

티스토리툴바