크롬에서 일부 도메인에 대해서 접속이 안되는 경우가 있다.

DNS 서버의 문제가 있을경우 DNS 를 변경하여 해결 할 수도 있지만, DNS 문제가 아니라면, 개인 PC 에서는 다음과 같이 실행 해본다.

  • Windows 실행창(Windows + R)을 띄우고 services.msc 실행
  • DNS Client 를 찾아서 다시 시작을 실행

Posted by leechwin

특정 Dom 이나 전체 Window 에 Drag&Drop 동작을 막고 싶은경우, dragoverdrop 이벤트에 핸들러를 추가하는 방법으로 처리하는경우가 있는데, 이렇게 해도 잘 안되는 경우가 있다.

window.addEventListener('dragover', (e) => {
  e.stopPropagation();
  e.preventDefault();
}, false);

window.addEventListener('drop', (e) => {
  e.stopPropagation();
  e.preventDefault();
}, false);

이런경우에는 drag&drop 시에 drag 되는 data 를 유지하기 위해 사용되는 DataTransfer 객체값을  수정해주면 제대로 동작한다.

window.addEventListener('dragover', (e) => {
  e.stopPropagation();
  e.preventDefault();
  e.dataTransfer.effectAllowed = 'none';
  e.dataTransfer.dropEffect = 'none';
}, false);

window.addEventListener('drop', (e) => {
  e.stopPropagation();
  e.preventDefault();
  e.dataTransfer.effectAllowed = 'none';
  e.dataTransfer.dropEffect = 'none';
}, false);

위와 같이 effectAllowed 와 dropEffect 속성을 'none' 으로 수정하여 적용하면 Drag&Drop 동작이 적용되지 않는다.

  • effectAllowed
    • 드래그 효과를 제한할 수 있고, 다음과 같은 문자열 값이 사용된다.
    • none, copy, link, move, copyLink, copyMove, linkMove, all
  • dropEffect
    • 마우스를 놓았을 때 발생하는 효과

Reference


Posted by leechwin

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