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);
    };
  };
}

 

div에 overflow를 사용해 scroll 를 만들었을때, ios 등에서 smooth scroll이 안될 경우.

 

* {
    -webkit-overflow-scrolling: touch;
}

위 코드 삽입. * 로 설정은 부담이 될 수 있으므로 해당 태그에만 적용시켜도 된다.

프로젝트에서 상단 하단 position:fixed된 레이아웃 상태에서

아이폰X 웹뷰 대응 방법이다.

  1. 메타태그 뷰포트쪽에 viewport-fit=cover 를 추가
  2. padding-top: env(safe-area-inset-bottom);

2번의 속성값을 응용하는 건데 기본적으로


env(safe-area-inset-bottom); // IOS 11.0 이상 (신)
constant(safe-area-inset-bottom); // IOS 11.0 버전 (구)
ios 11.2 업데이트에서 constant가 제거됨 env를 사용.

해당 값이 필요한 부분에 위값을 응용하여 집어 넣었다. (저는 커스텀한곳에 위 env,constant 둘다 삽입 했습니다;)

safe-area-inset의 기본값이 있어 값을 수정하고 싶으면

padding-bottom: calc(env(safe-area-inset-bottom) - 5px);

css의 calc를 사용하여 원하는 곳에 속성을 추가한후 값을 조절해서 사용하면 되겠다.

예제 )

  1. 하단에 고정 버튼이 있다고 할때.

수정 전

수정 후

2. 위의 수정 후사진처럼 변경을 하려면

// 기본 CSS
.button-fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
// 변경값을 줄 클래스
.button-fixed-bottom {
padding: 12px 16px; // 기본 값을 지정해 준후
padding: 12px 16px calc(constant(safe-area-inset-bottom) + 12px) 16px; // 변경이 필요한 부분은 하단의 패딩값이기 때문에 constant로 구버전 값을 넣고
padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px) 16px;
} // env로 신규버전 값을 넣어준다.

3. constant / env 값을 둘다 추가해야 IOS 구버전, 신버전 대응이 가능하다

참고 : 링크

I just played with this CodePen and it seems that if you set the background-color to transparent for all three properties below (and in this example also remove box-shadows), the scrollbar is not visible at all:

 

#style-1::-webkit-scrollbar-track {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
  background-color: transparent;
}

#style-1::-webkit-scrollbar {
  background-color: transparent;
}

#style-1::-webkit-scrollbar-thumb {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: transparent;
}

 

This was tested in Chrome Desktop, Chrome for Android, and iOS Safari (v8.4) on an iPhone 6+.

I would however recommend for user experience (usability/accessibility) to keep the scrollbar visible though, as even I, knowing what I was doing, got a bit confused when there was no scrollbar.

앱 내에 웹뷰 방식으로 서비스를 런칭할일이 있는데, body scroll 이 아닌 div overflow auto 로 스크롤을 만들었는데 스크롤바가 나타나지 않았다. (어디서 영향을 준걸까...)

 

아래 css 코드를 적용하니 해결되었다. 스타일은 취향에 맞게 맞추면 된다.

 

 

::-webkit-scrollbar {
    width: 12px;
}     
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}     
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

타입스크립트에서 가장 유용한 타입은 무엇일까요? 저는 any 라고 생각합니다. 항상 타입 검사를 만족시킨다는 특성이 타입스크립트에서도 자바스크립트 모듈을 손쉽게 사용할 수 있게 해주기 때문입니다. 이렇게 자바스크립트의 거대한 생태계를 그대로 활용할 수 있게 해준다는 점에서, any는 타입스크립트의 생산성을 높여주는 유용한 타입입니다.

declare const untypedModule: any;

그럼 타입스크립트에서 가장 유용하지 않은 타입은 무엇일까요? 저는 이 또한 any라고 생각합니다. 항상 타입 검사를 만족시킨다는 특성이 타입 검사의 의의를 퇴색시키기 때문입니다. 어떤 비정상적인 연산이라도 any 타입이 붙어버리면 타입 검사를 통해 걸러낼 수 없기 때문에 any는 프로그램의 안전성을 낮추는 유용하지 않은 타입입니다.

('something' as any) * 10;

마치 양날의 검 같군요, 잘 쓰면 빠르게 프로덕트를 개발할 수 있지만 자칫 잘못 쓰면 되려 버그 지옥에 빠지게 되니까요. 버그 지옥에 빠질 일 없이, 안전하게 any를 쓰는 방법은 없을까요?

있습니다! 그것도 안전한 any를 구현하는 방법이요! 지금부터 알려드리도록 하겠습니다.

안전한 any란?

먼저, 가장 중요한 질문을 던져 보도록 하겠습니다. 안전한 any란 무엇일까요? any의 어떤 성질이 any를 위험하게 만들고 어떤 성질이 any를 가치있게 만들까요?

이 질문에 답하려면 먼저 서브타입 관계(subtype relation)와 탑 타입(top type)을 알아야 합니다.

서브타입 관계

다른 한 타입을 포함하는 타입 슈퍼타입(supertype)이라고 하고, 슈퍼타입에 포함되는 타입 서브타입(subtype)이라고 합니다. ‘타입을 포함한다’의 기준은 타입 시스템 별로 다르지만 구조적 타입 시스템(structural type system)을 가진 타입스크립트의 경우, 한 타입이 다른 한 타입의 값을 모두 포함하고 있으면 그 타입을 포함한다고 합니다.

type Supertype = { x: boolean } type Subtype = { x: boolean, y: number }

위 코드에서, Supertype의 값은 타입이 boolean인 프로퍼티 x를 가진 객체입니다. Subtype의 값은 마찬가지로 타입이 boolean인 프로퍼티 x를 가지지만 동시에 타입이 number인 프로퍼티 y도 가지는 객체이지요.

유심히 살펴보니 Subtype의 값은 타입이 boolean인 프로퍼티 x를 가지는 객체이기도 합니다. 즉, 모든 Subtype의 값은 Supertype의 값이기도 한 것이지요. 이렇게 Supertype이 Subtype을 포함하기 때문에, Supertype은 Subtype의 슈퍼타입이고 Subtype은 Supertype의 서브타입이라고 할 수 있습니다.

이러한 슈퍼타입과 서브타입, 두 타입 간의 포함 관계를 서브타입 관계라고 하며 <:를 통해 서브타입 <: 슈퍼타입 형식으로 표현합니다.

Subtype <: Supertype number <: number | string

심화 문제 #1
StarWars <: Movie <: Entertainment라고 할 때, (starWars: StarWars) => Entertainment는 (movie: Movie) => Movie의 서브타입인가요? 그리고 왜 그렇게 생각하셨나요?

탑 타입

서브타입 관계를 따질 수 있는 타입 시스템에는 탑 타입이라 불리는 특별한 타입이 존재합니다.

탑 타입 모든 타입의 슈퍼타입으로 모든 타입의 값을 값으로 갖지만, 그렇기 때문에 모든 타입의 값에 대해 공통적으로 할 수 있는 연산 외에는 그 어떤 연산도 할 수 없다는 점이 특징입니다. 타입스크립트에서 탑 타입은 unknown입니다.

let top: unknown = 'a'; top = {}; top = 1; top + 1; // Wrong!

심화 문제 #2
왜 탑 타입의 값에 대해서는 모든 타입의 값에 대해 공통적으로 할 수 있는 연산 외에 어떤 연산도 할 수 없을까요?

모순적인 타입, any

any는 모든 타입의 슈퍼타입이기 때문에 탑 타입입니다. 그렇지만, any는 탑 타입의 ‘탑 타입의 값에는 모든 타입의 값에 적용 가능한 연산 외에 어떤 연산도 적용할 수 없다’라는 특징을 가지고 있지 않습니다. 이게 과연 가능한 일일까요?

아니요, 전혀 그렇지 않습니다. 탑 타입은 모든 타입의 값을 갖기 때문에 안전한 타입이 되려면 당연히 모든 타입의 값에 적용 가능한 연산만 적용할 수 있어야 함이 마땅하기 때문이죠. 즉, 탑 타입이면서 탑 타입의 특징을 가지고 있지 않은 타입의 존재는 모순 그 자체이며, 그렇기에 any는 위험한 타입입니다.

any의 가치

그럼 타입스크립트는 왜 이런 모순적인 타입을 가지고 있는 걸까요? 그 이유는 타입스크립트의 디자인 목표에서부터 추측할 수 있습니다.

타입스크립트의 개발 목표는 철옹성과 같은 안전한 타입 시스템을 도입해 자바스크립트에서 발생할 수 있는 모든 오류를 걷어내는 데 있는 게 아니라, 자바스크립트의 생산성을 보전하면서 오류가 될 수 있는 코드들을 걸러주는 거름망 같은 타입 시스템을 도입하는 데 있기 때문에 any와 같이 안전성을 해치지만 생산성을 보전하는 데에 도움이 되는 타입을 만들었다고 생각합니다.

그렇기에 any의 가치는 자바스크립트 코드를 그대로 사용할 수 있게 함으로서 타입스크립트의 생산성을 높여주는 데 있다고 할 수 있겠습니다.


다시 본론으로 돌아가, 계속해서 안전한 any를 정의해 보도록 하지요.

안전한 any는 그리 거창한 게 아닙니다. any의 가치를 보전하면서 any를 위험하게 만드는 성질을 제거한 타입을 안전한 any라고 할 수 있겠지요.

any를 위험하게 만드는 성질은 any가 탑 타입이면서 탑 타입의 특징을 가지지 않는다는 성질이고, any의 가치는 모든 자바스크립트 코드를 수용할 수 있다는 점에 있는데 이 특징은 any가 탑 타입이라는 성질에서 비롯된 것이니 탑 타입의 특징을 제대로 가지고 있는 any가 안전한 any라고 할 수 있겠습니다.

이렇게, 안전한 any가 무엇인지 정의하였으니 지금부터는 안전한 any를 만들기 위한 지식을 익히고 안전한 any를 만들어 보도록 하겠습니다.

제네릭

제네릭(generic)은 특정 개념의 정의에 타입 매개변수(type parameter)를 포함시킬 수 있게 해주는 기능입니다. 여러 타입을 가질 수 있는 일반적인 개념의 타입을 하나로 제한하지 않고, 여러 타입을 가질 수 있게 하기 위해 사용되는 기능입니다.

const identity: <A>(a: A) => A // 타입 A와, 그 타입의 값 a를 받고 A 타입의 값을 반환하는 함수 = a => a; identity<number>(1); // 1 as number identity<boolean>(true); // true as boolean

제네릭에 대한 다른 해석

앞서 보여드린 예시의 identity 함수는 타입 A와 그 타입의 값인 a를 받아 A 타입의 값을 반환하는 함수입니다. 하지만 모든 타입 A에 대해 (a: A) => A 타입을 갖는 함수가 존재한다는 선언으로도 볼 수도 있습니다.

제네릭에 대한 다른 해석은 다음과 같이 의사 코드로 표현할 수 있습니다.

const identity: <forall A>(a: A) => A // 모든 타입 A에 대해 (a: A) => A 타입을 갖는 함수 = a => a;

여기서 forall이 모든 타입(A)에 대해 개념((a: A) => A 타입의 함수)이 존재함을 선언한다고 하여 forall을 보편 양화사(universal quantifier, a.k.a ∀)라고 부릅니다. 또한, 이렇게 보편 양화사를 통해 표현된 타입의 값은 무한한 곱 타입(product type)이나 교차 타입(intersection type)의 값으로도 볼 수 있습니다.

const identity: & ((a: number) => number) & ((a: boolean) => boolean) & ((a: string) => string) & ... = a => a;

심화 문제 #3
무한한 곱 타입의 값으로 identity 함수를 표현해 보세요. 무한한 교차 타입의 값으로 표현된 경우와 같다고 할 수 있나요? 왜 그렇게 생각하셨나요?

심화 문제 #4
<forall A>(a: A) => void 타입과 (a: <forall A>A) => void 타입은 같은가요? 같다면 같은 이유를, 다르다면 다른 이유를 설명해 보세요.

심화 문제 #5
<forall A>() => A 타입과 () => <forall A>A 타입은 같은가요? 이 문제 또한 같다면 같은 이유를, 다르다면 다른 이유를 설명해 보세요.

보편 양화사의 짝

대수 데이터 타입(algebraic data type)에서 곱 타입의 짝이 합 타입(sum type)인 것 처럼, 보편 양화사에게도 무한한 합 타입으로 나타낼 수 있는 짝이 있습니다. 바로 for some 혹은 there exist라고도 불리는 존재 양화사(existential quantifier, a.k.a ∃)이지요. 존재 양화사는 보편 양화사와 달리 모든 타입이 아닌 어떤 타입에 대해 개념이 존재함을 나타내는 양화사입니다.

identity 함수의 forall을 존재 양화사를 나타내는 forsome으로 바꾸어 봅시다.

const identity2: <forsome A>(a: A) => A // 어떤 타입 A에 대해 (a: A) => A 타입을 갖는 함수 = a => a;

외형적으로는 forall이 forsome으로 바뀌었다는 점 외에는 차이가 없습니다만, 의미론적으로 둘 사이에는 큰 차이가 존재합니다. 바로 identity2 함수는 호출될 수 없다는 점이지요. 왜냐면 타입이 호출할 수 있을 만큼 구체적이지 않기 때문입니다.

이 사실은 identity2함수의 타입을 무한한 합 타입(sum type)으로 표현하면 더욱 잘 드러납니다.

const identuty2: | ((a: number) => number) | ((a: boolean) => boolean) | ((a: string) => string) | ... = a => a;

보시다시피 identity2의 타입은 ((a: number) => number) | ((a: boolean) => boolean) | ...으로, 호출할 수 있을 만큼의 구체적인 타입이 아닙니다.

identity2의 타입과 같이 존재 양화사를 통해 정의된 타입을 existential type이라 부르는데요, 이런 타입들은 한 가지 문제를 가지고 있습니다. 바로 한번 existential type으로 업캐스팅(upcasting)을 하면 타입 시스템이 이전 타입을 잊어 버리기 때문에 다시는 다운캐스팅(downcasting)을 할 수 없다는 점입니다.

다시 다운캐스팅 될 수 없기 때문에 existential type으로 업캐스팅 된 값에는 더 제한적인 연산, 즉 existential type을 무한한 합 타입으로 보았을 때 existential type을 구성하는 모든 타입에 대해 가능한 연산만 수행할 수 있습니다. 이러한 제약을 반영해, existential type의 값에 대해 함수를 적용하는 연산은 일반적인 값들과 달리 $나 pipe 함수와 같은 부류의 함수가 아닌 eliminator라는 부류의 함수로 추상화되곤 합니다.

구체적으로, eliminator는 처리하고자 하는 값과 그 값의 타입을 구성하는 모든 타입의 값을 처리할 수 있는 함수를 받아, 그 값을 함수에 적용하여 얻은 결과를 반환하는 함수입니다. 위 identity2 함수와 같은 함수들을 처리하는 eliminator는 아래와 같이 정의할 수 있습니다.

const elimIdentityFunction: <forall R>(id: <forsome A>(a: A) => A, f: <forall A>(x: (a: A) => A) => R) => R = (id, f) => f(id);

심화 문제 #6
elimIdentityFunction(identity2, identity)는 실행 가능한 코드인가요? 왜 그렇게 생각하셨나요?

안전한 any 만들기

지금까지가 안전한 any를 만들기 위해 필요한 배경 지식이었습니다. 이제부터 안전한 any를 만들어 보도록 하지요.

우리의 목표인 안전한 any는 모든 타입의 슈퍼타입, 즉 탑 타입입니다. 그렇기에 모든 타입을 포함해야 하고, 이는 아래와 같이 합 타입을 통해 표현할 수 있겠습니다.

type SafeAny = number | boolean | string | ...;

합 타입을 보면 무언가가 떠오르지 않으시나요? 앞서 무한한 합 타입으로도 취급할 수 있는 것에 대해 이야기했었잖아요. 네! 존재 양화사요!

그러고 보니 타입스크립트에서 타입은 무한히 존재합니다. 이는 배열 타입을 통해 쉽게 증명할 수 있지요.

type ArrayOfNumber = Array<number> type ArrayOfArrayOfNumber = Array<ArrayOfNumber> type ArrayOfArrayOfArrayOfNumber = Array<ArrayOfArrayOfNumber> type ArrayOf...ArrayOfNumber = Array<ArrayOf...ArrayOfNumber>

어떤 자연수 n에 대해 n차원 배열 타입이 존재할 때, n+1 차원의 배열 타입이 존재하며, 1차원의 배열 타입은 항상 존재하니 귀납적으로 모든 자연수에 대해 그 자연수를 차원으로 하는 배열 타입이 존재함을 알 수 있지요. 또한 정수는 무한하니 배열 타입이 무한히 존재함을 이를 통해 알 수 있지요.

다시 탑 타입으로 돌아가 이야기를 계속하자면, 타입 시스템에 있는 타입이 무한하다면 탑 타입은 무한한 합 타입으로 표현될 수 있다는 이야기입니다. 즉, 존재 양화사를 이용해서 탑 타입을 정의할 수 있다는 말이지요.

type SafeAny = <forsome A>A

이것이 바로 탑 타입이자 우리가 지금까지 찾던 안전한 any 타입입니다! 하지만 이 정의에는 문제가 하나 있습니다. 바로 타입스크립트에는 forsome과 같은 직접적으로 존재 양화사를 나타내는 방법이 없다는 점입니다. 위 SafeAny는 우리의 상상 속 타입 시스템에는 존재하나 타입스크립트의 타입 시스템에는 존재하지 않지요.

하지만 걱정 마세요, 존재 양화사는 보편 양화사를 통해 표현될 수 있습니다. 제네릭이란 이름으로 타입스크립트에 있는 우리의 친구를 통해서요!

보편 양화사로 존재 양화사를 표현하는 방법

여기, 존재 양화사로 정의된 함수가 있습니다.

const discard: (_: <forsome A>A) => undefined = _ => undefined;

이 함수의 타입을 무한한 합 타입으로 풀어서 보면

const discard: (_: number | boolean | string | ...) => undefined = _ => undefined;

discard 함수는 number 타입이나 boolean 타입이나 string 타입이나 … 타입의 값을 받아서 undefined 타입의 값으로 바꾸는 함수, 즉 어떤 타입의 값이든 전부 undefined 타입의 값으로 바꾸는 함수라는 것을 알 수 있습니다.

discard 함수의 구현만 보면 이는 더 명백하게 드러납니다.

_ => undefined

여기, 이번에는 제네릭으로 정의된 함수가 있습니다.

const discard2: <A>(_: A) => undefined = _ => undefined;

제네릭을 이용한 선언은 보편 양화사를 이용한 선언으로도 볼 수 있으니 위 코드를 보편 양화사를 이용한 코드로 바꾸어 보겠습니다.

const discard2: <forall A>(_: A) => undefined = _ => undefined;

또한 보편 양화사를 통해 표현된 타입은 무한한 교차 타입으로 표현할 수도 있으니 다시 코드를 바꾸어 보겠습니다.

const discard2: & ((a: number) => undefined) & ((a: boolean) => undefined) & ((a: string) => undefined) & ... = _ => undefined;

바꾼 코드를 보면 discard2 함수가 number 타입의 값을 받아 undefined 타입의 값으로 바꾸는 함수이면서, boolean 타입의 값을 받아 undefined 타입의 값으로 바꾸는 함수이고 … 타입의 값을 받아 undefined 타입의 값으로 바꾸는 함수임을 알 수 있습니다. 그리고 이는 곧 discard2 함수가 어떤 타입의 값이든 전부 undefined 타입의 값으로 바꾸는 함수라는 말과 같지요.

이번에도 discard2 함수의 구현만 보면 이는 더 명백하게 드러납니다.

_ => undefined

지금까지 보셨다시피, number 타입이나 boolean 타입이나 string 타입이나 … 타입의 값을 받아서 undefined 타입의 값으로 바꾸는 함수의 타입은 number 타입의 값을 받아 undefined 타입의 값으로 바꾸는 함수이면서 … 타입의 값을 받아 undefined 타입의 값으로 바꾸는 함수의 타입과 같습니다. 즉, existential type의 값을 받는 함수는 그 타입을 구성하는 모든 타입에 대해 정의된 함수와 같다는 거지요.

이는 아래와 같이 일반화하여 표현할 수 있으며, 이것이 바로 존재 양화사를 보편 양화사로 표현하는 방법 중 하나입니다.

// T는 임의의 제네릭 타입 <forall B>(x: <forsome A>T<A>) => B = <forall B, forall A>(x: T<A>) => B

심화 문제 #7
forall B. forsome A. (x: A) => B 타입을 보편 양화사만 사용해서 표현해 보세요.


좋아요, 이제 존재 양화사를 보편 양화사로 대체하는 방법을 알아냈으니 SafeAny의 정의에서 존재 양화사를 제거할 수 있겠지요? 유감이지만, 아닙니다. SafeAny의 정의에서의 존재 양화사는 매개변수의 타입을 나타내는 데 쓰인 게 아니기 때문에 우리가 알아낸 방법으로 제거할 수 없습니다.

그렇다고 낙담하지는 마세요, 해결책이 있습니다. 바로 SafeAny의 값이 일반적인 값이 아니라, 컨티뉴에이션(continuation)이 되게 만드는 방법입니다.

값을 표현하는 함수

컨티뉴에이션은 값을 표현하는 함수로, 구체적으로는 함수를 받아 자신이 표현하는 값에 그 함수를 적용하는 함수입니다. 놀랍게도, 어떤 값의 컨티뉴에이션은 그 값과 본질적으로 같습니다. 왜냐하면 어떤 값과 그 값의 컨티뉴에이션은 모두 같은 목적으로 쓰일 수 있으며, 한 쪽이 다른 쪽으로 변환될 수도 있기 때문입니다.

예를 들어, 1과 1의 컨티뉴에이션은 다음과 같이 정의할 수 있습니다.

const one = 1; const contOfOne = f => f(1); one + 1 === contOfOne(n => n + 1) // 같은 연산을 수행할 수도 있습니다 one === contOfOne(n => n) && (n => f => f(n))(one)(n => n) === contOfOne(n => n) // 한 쪽이 다른 쪽 표현으로 변환될 수도 있습니다

심화 문제 #8
어떤 값을 받아 그 값의 컨티뉴에이션을 만드는 함수 to와, 컨티뉴에이션을 받아 그 컨티뉴에이션이 표현하는 값을 꺼내는 함수 from을 만들어 보시고, 만든 두 함수를 각기 다른 순서로 합성해 함수 id1과 id2를 만들어 보세요. id1과 id2는 각각 어떤 함수인가요?


SafeAny의 값이 모든 타입의 값에서 모든 타입의 값의 컨티뉴에이션이 되면 SafeAny의 정의를 <forall R>(f: (x: <forsome A>A) => R) => R로 바꿀 수 있고, 이 타입의 존재 양화사는 앞서 우리가 알아낸 방법을 통해 아래와 같이 보편 양화사로 치환할 수 있습니다!

type SafeAny = <forall R>(f: <forall A>(x: A) => R) => R

제네릭과 보편 양화사는 같으므로 보편 양화사를 표현하기 위해 사용한 의사 코드인 forall을 제거해 올바른 타입스크립트 코드로 만들어 줍시다.

type SafeAny = <R>(f: <A>(x: A) => R) => R

이렇게 우리의 안전한 any, SafeAny가 만들어졌습니다! 하지만 아직 모든 일이 끝난 건 아닙니다. SafeAny의 값이 모든 타입의 값이 아닌 모든 타입의 값의 컨티뉴에이션이기 때문에, 모든 타입의 값을 컨티뉴에이션으로 바꿔 주는 함수가 필요합니다.

모든 타입의 값을 컨티뉴에이션으로 바꿔 주는 함수는 아래와 같이 정의할 수 있습니다.

const safeAny: (x: <forsome A>A) => SafeAny = x => f => f(x);

이 함수의 존재 양화사를 보편 양화사로 치환하는 일을 마지막으로, 안전한 any가 완성됩니다.

type SafeAny = <R>(f: <A>(x: A) => R) => R const safeAny: <A>(x: A) => SafeAny = x => f => f(x);

심화 문제 #9
SafeAny의 eliminator를 만들고, 커링해 보세요. 어떤 함수가 보이시나요?

심화 문제 #10
() => string 타입의 toString 메서드가 있어 문자열로 바꿀 수 있는 모든 값을 담는 타입, HasShow를 구현해 보세요.

마무리

이번 글에서는 안전한 any 타입을 만들어 보며 보편 양화사와 존재 양화사에 대해 알아보았습니다. 일반적인 프로그래밍에서는 잘 쓰이지 않고 타입 레벨 프로그래밍에서나 주로 쓰이는, 많은 분들이 생소해 하실 법한 개념이라 최대한 쉽게 설명하고자 노력해 보았는데 그래도 어려운 부분이 남아있는 거 같아 읽으시는 내내 힘들지는 않으셨는지 걱정되네요.

이미 알고 계신 분도 있으시겠지만 사실 이번에 만든 안전한 any 타입은 타입스크립트에 이미 unknown 이란 이름으로 구현되어 있습니다. 심지어 더 사용하기에 편한 형태로요. 물론 그렇다고 해서 지금껏 공부한 개념들이 무용지물이 되는 것은 아닙니다. Existential type으로 탑 타입을 만드는 일만 할 수 있는 게 아니라 타입을 통해 값의 소코프를 결정하는 일(a.k.a ST Trick)이나, 정적 타입 시스템에서 동적 타이핑을 구현하는 일과 같은 재미있는 일들을 많이 할 수 있거든요. 시간 나실때 이런 것들을 직접 찾아보시면서 만들어 보시는 것도 좋을 거 같습니다.

그럼 저는 이만 여기서 글을 마무리하도록 하겠습니다. 긴 글 읽어주셔서 감사합니다.

읽을거리

  • Thinking with Types
    타입 레벨 프로그래밍 책입니다. 대수 타입에서 시작해 의존 타입까지 다룹니다. 이론적인 측면보다는 하스켈을 통한 실용적인 측면에서 이야기를 펼쳐나가기 때문에 논리학이나 타입 이론을 잘 모르는 독자도 큰 문제 없이 읽을 수 있다는 장점이 있습니다.
  • Existential type-curry
    보편 양화사로 존재 양화사를 표현하는 법에 대한 글입니다. 수학적인 증명을 포함해, 더 엄밀하고 정확한 설명이 담겨 있습니다.
  • Quantified Types as Products and Sums
    각 양화사로 표현된 타입을 각각 무한한 곱 타입과 합 타입으로 보는 관점에 대한 토막글입니다.
  • Existential vs. Universally quantified types in Haskell
    존재 양화사로 정의된 타입과 보편 양화사로 정의된 타입의 차이를 묻는 스택오버플로 질문글입니다. 두 답변이 있는데 둘 다 존재 양화사에 대해서 잘 설명하고 있으니 더 알고 싶으시다면 읽어보셔도 좋은 글입니다.

 

출처: https://overcurried.netlify.com/%EC%95%88%EC%A0%84%ED%95%9C%20any%20%ED%83%80%EC%9E%85%20%EB%A7%8C%EB%93%A4%EA%B8%B0/?fbclid=IwAR2EUYFiCUe_FBMt-secTBAdOhWG6y4dFPKwN4KnGcSW-lmJoBpWYQGBWJ0

들어가며

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

 

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

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)

+ Recent posts