Huzy의 블로그. IT/재테크/게임!

const isJson = (str: string) => {
  try {
    const json = JSON.parse(str);
    return json && typeof json === 'object';
  } catch (e) {
    return false;
  }
};

Copy & Paste 시에 텍스트만 가져오도록 처리 onpaste 이벤트에 걸면된다.

const getTextByPasteClipboard = (e) => {
  e.preventDefault();
  let text;
  const clp = (e.originalEvent || e).clipboardData;
  if (clp === undefined || clp === null) {
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    text = window.clipboardData.getData('text') || '';
    if (text !== '') {
      text = text.replace(/<[^>]*>/g, '');
      if (window.getSelection) {
        const newNode = document.createElement('span');
        newNode.innerHTML = text;
        window.getSelection().getRangeAt(0).insertNode(newNode);
      } else {
        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
        // @ts-ignore
        document.selection.createRange().pasteHTML(text);
      }
    }
  } else {
    text = clp.getData('text/plain') || '';
    if (text) {
      text = text.replace(/<[^>]*>/g, '');
      document.execCommand('insertText', false, text);
    }
  }
};

const getImageSize = (file: File, callback: (width: number, height: number) => void) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    const image = new Image();
    image.src = e.target.result as string;
    image.onload = function () {
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      callback(this.width, this.height);
    };
  };
}

들어가며

calendar 프로젝트를 진행하면서 날짜 관련정보를 다루었다(Date 객체). 프로젝트 중에 날짜 관련 data를 쉽게 다룰수 있는 라이브러리를 발견하여 이에 대해서 간단히 정리해보고자 한다. Moment.JS 는 날짜(Date)형식의 데이터의 파싱, 검증, 조작 그리고 화면에 출력하는 작업을 위해 만들어진 아주 유용한 라이브러리이다.

프로젝트를 통해 느낀 Date object의 불편함 & Moment.JS의 편리함

Date object와 관련된 method를 사용하면서 불편한점이 많았다. 한가지 예를 들면 ISO 포맷형태의 날짜data(ex. 2017-01-25)를 얻기 위해서, 시간이 까지 포함된 ISOString형태(ex. 2017-01-25T12:25:00.000z)에서 T를 기준으로 split method를 사용하여 ISO 포맷형태의 날짜를 얻을수 있었다. 코드는 아래 와 같다.(바로 구하는 method는 없는것 같다.)

var d= new Date(); // 출력형태 Tue Feb 07 2017 23:25:32 GMT+0900 (KST) var ISOData = d.toISOString(); // 출력형태 2017-02-07T13:39:45.148Z var ISODate = ISOData.split("T",1); // 출력형태 2017-02-07

Date object를 사용하면서 부분적인 시간과 날짜 정보를 얻기 위해서 위와 같이 문자열을 쪼개어서 얻는것이 나이스(?)하지 못하다고 느꼈다. 위와 같은 코드를 Moment.js를 사용하여 구하려면 어떻게 하면 될까?

var ISODate = moment().format('YYYY[-]MM[-]DD');

위와 같이 보다 직관적인이고 간단한 코드를 통해서 ISO 포맷 형태의 날짜 정보를 얻을수 있다.

다른 예를 들자면 ISO 포맷형태의 TimeString간의 시간차이를 구하기 위해서는 내가 아는바로는 시간차이를 바로 구할수있는 method는 없었고, 역시 문자열 조작과 기존 Date object를 통해서 시간차이를 계산할수 있었다.

var time1 = "2017-02-01T12:25:00Z"

var time2 = "2017-02-04T12:20:00Z"

function dateFromISO(isostr) {

var parts = isostr.match(/\d+/g);

return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);

};

var ParsedTime1= dateFromISO(time1);

var ParsedTime2= dateFromISO(time2);

var timeDifference = parsedTime2-parsedTime1 ; // 출력 단위 밀리초(ms)

위와 같이 정규표현식을 사용하여 기존ISOString 형태 시간 데이터를 쪼개어 배열에 저장하고, Date object를 통해서 시간정보로 가공하였다. 시간차이를 계산하기 위해서 이와같이 시간정보로 바꿔서 계산해야 한다.(이 역시 곧바로 구하는 method는 없는것 같다.) 위와 같은 함수를 생각해내지 못하면 해결(?)하지 못할수도 있다. 나이스(?)하지 못하다..

위와 같은 코드를 역시 Moment.JS를 사용하여 구하면 어떻게 될까?

var time1 = "2017-02-01T12:25:00Z"

var time2 = "2017-02-04T12:20:00Z"

var ms = moment(time2,"YYYY-MM-DDTHH:mm:ssZ").diff(moment(time1,"YYYY-MM-DDTHH:mm:ssZ")); // 출력 단위 밀리초(ms)

ISOstring형태의 시간정보를 다른 시간형태의 시간정보로 가공하지 않아도 되고, diff라는 method를 통해서 시간차이를 구하였다. 얼마나 직관적이고 간편한가!

나는 Javascript를 배우는 중이라서 다른 라이브러리를 사용하지 않은채 개발하였지만, 시간 관련 정보를 다루는 프로젝트를 개발하는 사람들에게 Moment.JS를 적극 추천한다.

Moment.JS의 method에는 많은것들이 있다. 이중에서 몇가지만 간단히 정리하고자 한다.

현재시간

현재시간을 얻기 위해서는 매개변수 없이 아래와 같이 호출하면 된다.

var now = moment();

문자열(String)을 통한 시간정보 생성

문자열(ex. "1989-03-15")을 통해서 시간을 생성하고자 할때는 아래와 같이 호출하면 된다.

var time = moment("2017-01-01");

위와 같이 " YYYY-MM-DD "형태의 string 외에도 " YYYY-MM-DD HH:MM:SS "등과 같은 형태의 시간문자열이 있을수 있다. 가능한 문자열 형태는 이 링크에서 확인하기를 바란다. 만약불가능한 형태의 시간 string이라면 아래 method를 사용하여 true , false 값으로 확인할수 있다.

var time = momnet("시간문자열").isValid(); //return true or false

정형화된 시간정보(Format Dates)

아래코드와 같이 자신이 원하는 형태의 시간정보를 생성할수 있다.

moment().format('MMMM Do YYYY, h:mm:ss a'); // February 8th 2017, 6:30:39 pm

moment().format('dddd'); // Wednesday

moment().format("MMM Do YY"); // Feb 8th 17

moment().format('YYYY [escaped] YYYY'); // 2017 escaped 2017

moment().format(); // 2017-02-08T18:30:39+09:00

상대적인 시간(Relative Time)

특정시간정보가 지금으로부터 어느정도의 시간거리를 가지고 있는지 알수 있다.

moment("20111031", "YYYYMMDD").fromNow(); // 5 years ago

moment("20120620", "YYYYMMDD").fromNow(); // 5 years ago

moment().startOf('day').fromNow(); // 19 hours ago

moment().endOf('day').fromNow(); // in 5 hours

moment().startOf('hour').fromNow(); // 34 minutes ago

달력관련 날짜 및 시간정보

moment().subtract(10, 'days').calendar(); // 01/29/2017

moment().subtract(6, 'days').calendar(); // Last Thursday at 6:36 PM

moment().subtract(3, 'days').calendar(); // Last Sunday at 6:36 PM

moment().subtract(1, 'days').calendar(); // Yesterday at 6:36 PM

moment().calendar(); // Today at 6:36 PM

moment().add(1, 'days').calendar(); // Tomorrow at 6:36 PM

moment().add(3, 'days').calendar(); // Saturday at 6:36 PM

moment().add(10, 'days').calendar(); // 02/18/2017

배열(Array)를 이용한 시간정보 생성

배열을 통해서 시간정보를 생성할수도 있다.

배열은 입력된 배열의 길이 만큼 앞에서부터 길이만큼 아래 배열에서 끊어서 의미를 확인하면된다.

[year, month, day, hour, minute, second, millisecond]

예제코드

moment([2010, 1, 14, 15, 25, 50, 125]); // February 14th, 3:25:50.125 PM

moment([2010]); // January 1st

moment([2010, 6]); // July 1st

moment([2010, 6, 10]); // July 10th

시간차이 계산

월차이를 구하는 코드 예제를 보자. 간편하다

moment('2016-06','YYYY-MM').diff('2015-01','month'); //17

여러가지 메소드와 경우의 수가 존재하므로 설명없이 예제코드들을 나열해보록 하겠다. 필요한 예제들만 골라서 사용하면 되겠다.(설명이 필요할것 같은 부분만 주석으로 설명하겠다.)

moment().format() //2017-02-08T18:44:10+09:00

moment().toString() //Wed Feb 08 2017 18:44:10 GMT+0900

moment('2013-11-16') - moment('2013-11-15') //86400000

moment().endOf('day') //1486565999999

var now = moment('2013-11-22'); //finish와 같은날로 지정

var start = moment('2013-11-10');

var finish = moment('2013-11-22');

var event = moment('2013-11-16').endOf('day'); //2013년 11월 16일의 끝나는 시점. 2013년 11월 16일 11시 59분 59초

event.diff(start) //604799999 event시점에서 start시점을 뺀 시간 단위 밀리초 (시간정보는 시간이 흐를수록 값이 커진다.)

event.diff(finish) //-432000001

moment().format('YYYY-MM-DD') //2017-02-08

moment().format('YYYY') //2017

moment().format('MM-DD') //02-08

moment(start).add('years',1).calendar() //11/10/2014 start시점에 1년을 더한다.

now.diff(start) > 0 && now.diff(finish) < 0 //false now시점이 start와 finish 사이에 있는지

moment('Tue Dec 23 12:02:08 EST 2014').format() //2014-12-24T02:02:08+09:00

moment().format('MMMM Do [at] h:mm:ss a') //February 8th at 6:44 pm [] 괄호로 감싸서 데이터 중간에 문자나 특수문자 입력가능

moment('2015/04/02 12:00').subtract('hours',9).format('YYYY/MM/DD hh:mm') // 2015/04/02 03:00 시점에서 9시간을 빼고 정해진 포맷대로 출력

moment('1/1/0001').format() // 2001-01-01T00:00:00+09:00

moment('0001-01-01').format() //0001-01-01T00:00:00+09:00

moment().format('MMMM D, YYYY') // February 8, 2017

now.isBetween(start, finish, '(]')) //true start 시점 < now시점 <= finish시점인지

위와 같이 몇가지만 간단히 정리해보았지만 여러가지 조합과 method가 있으니 더 많은 정보를 얻고자 하는 사람은 아래 사이트를 참고하길 바란다.

https://momentjs.com

출처: https://github.com/jinyowo/JS-Calendar/wiki/**-moment.js-(%EB%82%A0%EC%A7%9C%EA%B4%80%EB%A0%A8-%EC%9E%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)

다음과 같이 페이지를 벗어나기 전에, ‘수정사항이 있으니 다시 한번 확인해보세요’라는 메시지를 구현하는 방법에 대한 정리입니다.

Javascript의 window.onBeforeUnload Event를 이용한 기능입니다.

실행시점

window.onBeforeUnload Event는 Window개체가 Unload되기 전에 실행됩니다. 정확하게 다음과 같은 시점이 있을 수 있습니다. 다만 IE 7, 8에서는 버그로 인해 다르게 동작하는 경우도 있으므로 참고가 필요합니다.

1. 창이나 탭을 닫을 때
2. 새로고침, 앞, 뒤로 이동버튼 클릭 시
3. location.href 변경
4. Form Submit 발생 시
5. A Tag 클릭 시
   • HREF에 URL을 지정한 경우: 발생
   • HREF에 #을 지정한 경우: 발생 안함
   • HREF에 javascript:void(0)을 지정한 경우: 발생 안함
     (IE7, 8에서는 onbefureunload이벤트가 발생하는 오류가 존재합니다.)
6. Iframe 내부에서 로드된 경우 Iframe의 Src가 변경될 경우

구현방법

기타 확인사항

Firefox에서는 다음 그림과 같이, 지정한 안내텍스트가 출력되지 않는 버그가 있습니다. 곧 수정될 것이라고 하지만, 현재 Version 27까지도 수정되지 않은 상태입니다.

출처: http://nsinc.tistory.com/101 [NakedStrength Inc.]

ios app 을 웹 어플리케이션에서 킬때... 사파리에서는 안먹히는 것 해결

jquery-ui 의 dialog close 버튼이 안보일때

bootstrap.min.js 와 스크립트 충돌로 인한것으로 해당 스크립트를 우선순위를 바꾸거나 제외하면 정상적으로 보인다.

var url_regex = /(http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?)/gi;
var email_regex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;

var string = "도메인은 http://www.huzy.net/ 이고 이메일은 root@yjhoon.com 입니다.";

var url_result = string.match(url_regex);

=> ["http://www.huzy.net/"]

var email_result = string.match(email_regex);

=> [root@yjhoon.com"]

result 값은 둘다 배열로 리턴되서 나옴 .