Library of developer

Javascript 에서 String 을 Array 로 변환하거나 Array 의 내용을 한줄의 String 으로 변환하는 방법

const str = 'leechwin.tistory.com';
const arr1 = str.split(''); // ["l", "e", "e", "c", "h", "w", "i", "n", ".", "t", "i", "s", "t", "o", "r", "y", ".", "c", "o", "m"]
const arr2 = str.split('.'); // ["leechwin", "tistory", "com"]

const result1 = arr1.join(''); // "leechwin.tistory.com"
const result2 = arr2.join('.'); // "leechwin.tistory.com"

참고

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split
• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Javascript 에서 숫자를 2진수, 8진수, 10진수, 16진수등으로 변환을 하고 싶을때는 Number 객체의 내장 함수를 이용 할수 있다.

// 10진수 9를 2진수문자로 변환
let dec = 9;
const bin = dec.toString(2); // 2진수문자 "1001"

// 2진수문자 "1001"을 10진수로 변환
dec = parseInt(bin, 2); // 10진수 9

참고

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt
• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString

개발 블로그 링크

• Naver
  • https://d2.naver.com/helloworld
• Naver FE News
  • https://github.com/naver/fe-news
• 우아한 형제들
  • https://woowabros.github.io/
• 우아한 테크 코스 - 코드 리뷰 모음
  • https://woowacourse.github.io/javable/
• 카카오
  • https://tech.kakao.com/blog/
• 뱅크 샐러드
  • https://blog.banksalad.com/
• 당근 마켓
  • https://medium.com/daangn
• 스포카
  • https://spoqa.github.io/

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

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

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

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

Performance.now()

• 브라우저에 내장 Performance 객체를 이용한 성능 측정 방법
• https://developer.mozilla.org/en-US/docs/Web/API/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객체를 이용한 성능 측정 방법
• https://developer.mozilla.org/en-US/docs/Web/API/Console/time
• 예제

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

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

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

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

• http://fontawesome.io/

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

• https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
• <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

• http://fontawesome.io/icons/

예제

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

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

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

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

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

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

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

• http://www.ghacks.net/2016/06/06/chrome-font-rendering-google/

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