🎧Be Dilettante⌨️

여러 interface 타입을 조건별로 하나의 타입 안에서 정의하고 싶을 때

export enum SearchType {
  FRUIT = ‘FRUIT’,
  FOOD = ‘FOOD’,
  CLOTHES = ‘CLOTHES’,
  SHOES = ‘SHOES’,
  BAGS = ‘BAGS’,
}

type TypeName<T> = T extends SearchType.FRUIT
  ? FruitItem
  : T extends SearchType.FOOD
  ? FoodItem
  : T extends SearchType.CLOTHES
  ? ClothesItem
  : T extends SearchType.SHOES
  ? ShoesItem
  : BagsItem;

사용 스택 및 라이브러리: React, lodash

Debounce 사용 목적: 검색시 input의 onChange마다 함수가 호출되는 것을 debounce를 통해 방지

1. Input의 onChange를 통한 api 호출

 
아래 함수를 살펴보자.
 

 
 
 
 
이 함수는 input에 텍스트를 입력할 경우 input의 onChange를 통해 포켓몬을 조회하는 api를 호출한다.

input의 onChange는 input에 값이 입력될 때마다 호출되기 때문에 글자 수 만큼 handleSearch 함수가 호출되는 것을 아래에서 볼 수 있다. (검색 성능 저하)


 

 
 
이를 방지하기 위해 lodash의 debounce 함수를 적용해 볼 것이다.

💡Lodash란? A modern JavaScript utility library delivering modularity, performance & extras. (공식 문서에서 정의하고 있는 lodash의 의미이다; 모듈성, 성능과 추가 기능 등을 제공하는 모던 자바스크립트 유틸리티 라이브러리이다.)

2. Lodash의 debounce 적용

$ npm i -g npm //npm 설치 완료시 생략
$ npm i --save lodash

위 명령어를 통해 lodash를 설치한다.


 

• Debounce란?

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
 
 
 

import { debounce } from 'lodash';

필요한 함수 debounce만 구조분해로 import한다. (전체 lodash를 import하는 것보다 메모리가 훨씬 적다)
 
 

   const getPokemon = debounce(async (value: string) => {
    await axios
      .get(`https://pokeapi.co/api/v2/pokemon/${value}`)
      .then((res) => {
        setPokemon(res);
      })
      .catch((err) => {
        return;
      });
  }, 300);

 
 
 
그런 다음 기존 getPokemon 함수를 debounce 함수로 감싸준뒤 지연시간을 숫자로 적어준다. (위 예시에서는 0.3초로 설정) 
 
 
이렇게 하면 input에 타이핑이 되더라도 함수 호출을 0.3초마다 하는 것을 볼 수 있다.
 
 

 3. State 변경과 debounce 동시 적용

그렇다면 만약 state 변경과 debouce를 함께 호출할 경우 debounce는 효과적으로 작동할까?

아래 handleSearch 함수는 input의 onChange가 호출될 때마다(값이 변경될 때마다) 실행된다.

handleSearch내에서 setText를 통해 변하는 input값을 동시에 저장하고, debounce를 통해 api를 호출하면 아래와 같이 함수가 만들어진다.
 

const getPokemon = debounce(async (value: string) => {
    await axios
      .get(`https://pokeapi.co/api/v2/pokemon/${value}`)
      .then((res) => {
        setPokemon(res);
      })
      .catch((err) => {
        return;
      });
  }, 300);

const handleSearch = (e) => {
  setText(e.target.value);
  getPokemon(e.target.value);
}

위 함수에서 문제점은 우리의 예상과 다르게 getPokemon함수가 0.3초마다가 아닌 input의 value가 바뀔때마다 호출된다는 점이다.

이 코드의 문제점은 setText 함수를 실행할 때마다 컴포넌트가 재렌더링되어 debounce함수를 호출하는 getPokemon함수를 재생성한다는 점이다.
 

 4. 컴포넌트 재렌더링에 관계없이 debounce 함수 실행하기

const getPokemon = useCallback(debounce(async (value: string) => {
    await axios
      .get(`https://pokeapi.co/api/v2/pokemon/${value}`)
      .then((res) => {
        setPokemon(res);
      })
      .catch((err) => {
        return;
      });
  }, 300),
  []
;

const handleSearch = (e) => {
  setText(e.target.value);
  getPokemon(e.target.value);
}

정답은 useCallback 함수로 debounce함수를 감싸주는 것이다.

위의 getPokemon 함수는 handleSearch에서 text가 변경이 되어도 이 변수를 구독하지 않기 때문에 debounce함수를 재생성하지 않는다.

🗣️ 이 글은 아래 글의 번역글입니다.

https://blog.logrocket.com/typescript-vs-flow-vs-proptypes/

자바스크립트는 변수의 데이터 타입이 런타임 환경에서 그 변수에 의해 결정되고, 프로그램을 통해 우리가 다른 값으로 그 변수에 할당할 경우에도 변할 수 있는 동적 타입 언어(Dynamically typed language)이다.

자바스크립트에는 변수의 타입을 제한하거나 주석 처리할 방법이 내장되어 있지 않다. 우리가 프로그램을 작성할때 변수가 가져야 하는 타입에 대해 고민을 많이 하는 것을 덜어주고 조금 더 빠르게 작성할 수 있게 해주지만, 이 말은 또한 우리의 프로그램이 버그를 갖거나 변수가 다른 타입이 되어 예기치 못한 행동을 유발할 수도 있다는 뜻이기도 하다.

자바스크립트의 이러한 동적 타이핑의 문제를 피하기 위해 우리는 프로그램을 다른 언어로 작성하고 자바스크립트로 트랜스파일 해야 한다. 이를 위해 변수를 엄격하게 확인하고 제어하는 자바스크립트의 타입 익스텐션이 필요하다.

여기 자바스크립트의 정적 타입 익스텐션을 제공하는 많은 언어들이 있다.

• Microsoft의 Typescript
• Facebook의 Flow
• Scala.js
• Kotlin
• Facbook의 Prop Types

이 글은 타입스크립트, Flow, Prop Types에 초점을 맞추고 이 언어들의 기능과 능력을 비교한다.

✣ Type-Checkiing 라이브러리 / 언어 비교하기

이 글에서는 이러한 자바스크립트 확장 라이브러리/언어의 기술과 능력을 비교하고 대조할 것이다.

유사점과 차이점을 탐색할 때 먼저 주목해야 할 중요한 차이점은 TypeScript와 달리 Flow 및 PropTypes는 프로그래밍 언어가 아니라는 것이다. Flow와 Prop Types는 오직 정적 타입 체킹 라이브러리이며 차이점은 해당 라이브러리의 사용을 지원하는 프레임워크에 영향을 미친다.

⚙️ 프로젝트에 타입스크립트 설치하기

타입스크립트는 이 글에서 비교한 세 가지 기술중 가장 많은 라이브러리를 제공하며 Vue, Angular 또는 React에서 즉시 타입스크립트를 사용하는 것이 쉽다.

예를 들어, 우리는 Typescript와 함께 Vue를 설치할때 Vue CLI에서 내장된 Typescript 옵션을 선택해 설치할 수 있다. Typescipt를 선택하면 우리는 tsconfig.json 파일(보통 브라우저의 최대 지원을 위해 ECMAScript 2009 설정)에서 Javascript로 트랜스파일하기 위한 구성을 할 수 있다.

    // tsconfig.json
    {
      "compilerOptions": {
        // Vue의 브라우저 지원을 위해
        "target": "es5",
        // 이를 통해 'this'에 대한 데이터 속성을 엄격하게 추론할 수 있음
        "strict": true,
        // webpack 2+ 또는 rollup을 사용하는 경우 트리 쉐이킹을 활용하려면 아래를 입력
        "module": "es2015",
        "moduleResolution": "node"
      }
    }

그리고 나서 컴포넌트 생성시 Vue를 참조하면 Typescript 타입 추론을 얻게 된다.

    
    import Vue from 'vue'

    const Component = Vue.extend({
      // ...
    })

또한 Vue를 사용하면 다음과 같이 클래스를 사용하여 고유한 특별한 방식으로 Typescript를 사용해 컴포넌트를 작성할 수 있다.

    
    <template>
      <button @click="onClick">Click!</button>
    </template>


    <script lang="ts">
        import * as Vue from "vue";
        import { Component } from "vue-property-decorator";

        @Component()
        class App extends Vue {
          public message: string = "Hello World";

          public onClick(): void {
            window.alert(this.message);
          }
        }

        export default App;
    </script>

여기서 일부 Typescript 어노테이션과 함께 Javascript 친화적인 구문을 볼 수 있다. 예를 들어 Angular는 Typescript와 함께 설치되고 Typescript를 거의 독점적으로 사용한다. 한때 Angular 앱을 순수 Javascript로 작성하는 옵션이 있었는데 인기를 끌지는 못했다.

⚙️ 프로젝트에 Flow 설치하기

반면에, Babel 구성에 Flow 지원을 활성화해 프로젝트에 Flow를 추가할 수도 있다.

Flow를 추가하기 위해 아래 명령어를 실행한다.

npm install --save-dev @babel/preset-flow

그리고 .babelrc에 다음 코드를 추가한다.

    {
      "presets": ["@babel/preset-flow"]
    }

⚙️ 프로젝트에 PropTypes 설치하기

프로젝트에 PropTypes를 추가하기 위해 PropTypes 라이브러리를 추가하고, 컴포넌트의 prop types를 정의하고 PropTypes.checkPropTypes을 호출한다.

Prop Types를 설치하기 위해 다음 명령어를 호출한다.

npm install --save prop-types

그리고 나서 컴포넌트의 prop type 유효성 검증을 정의하고 프로퍼티와 values 객체를 설정한다.

    
    const myPropTypes = {
      name: PropTypes.string,
      age: PropTypes.number,
      // ... prop types 검증을 정의한다
    };

    const props = {
      name: 'hello', // 유효
      age: 'world', // 유효하지 않음
    };

그리고 Prop Type을 체크한다.

   
   	// 'MyComponent' 컴포넌트로 정의한다

    // Works with standalone PropTypes
    PropTypes.checkPropTypes(myPropTypes, props, 'age', 'MyComponent');

    // 다음과 같은 에러를 반환한다
    // Warning: Failed prop type: Invalid prop `age` of type `string` supplied to
    // `MyComponent`, expected `number`.

타입 정의와 구문 체크

앞서 언급한 것처럼 세 가지 기술 모두 변수에 대한 타입 체크 및 제한을 제공하며 이것들을 비교해 보려 한다.

🛠️ Flow와 Typescript의 타입 정의

Flow와 Typescript는 상당히 유사한 타입 정의 구문을 갖고 있다.

공통점:

• 변수 타입 체크에 대한 Javascript 원시 타입과 파생(객체)된 타입을 제공
• 유사한 타입 어노테이션 구문을 가지고 있음
•  연산자와 다양한 유틸리티 타입을 사용하여 Javascript 타입 시스템의 유연성을 유지
• 선택적 프로퍼티에 대한 타입, 즉 Typescript는 nullable 타입이 있고 Flow에는 maybe 타입이 있음
• 변수 타입을 갖는 코드를 작성하는데 사용하는 제너릭이 있음

마지막 공통점의 예시는 아래에 있다.

function identity<T>(value: T): T {
    return value
}

제네릭은 다른 타입들로 덮어 씌여질 수 있는 변수 타입을 가진다 :

identity<string>('foo').

또한 다음 코드는 Typescript와 Flow에서 동일하다. 여기서 함수 concat은 문자 유형인 두 변수를 가지고 둘의 합을 반환한다.

    function concat(a: string, b: string) {
      return a + b;
    }

🛠️ PropTypes의 타입 유효성 검사기

반면에 PropTypes는 컴포넌트의 프로퍼티 설정을 위해 자체 타입 유효성 검사기를 사용한다. 즉, PropTypes에서는 PropTypes 객체를 사용해 타입을 정의한다.

    
    import React from 'react';
    import PropTypes from 'prop-types'

    class MyComponent extends React.Component {
      render() {
        // ... do things with the props
      }
    }

    MyComponent.propTypes = {
      optionalArray: PropTypes.array,
    ...

🛠️ 타입 캐스팅

Flow와 Typescript 모두 변수를 한 타입에서 다른 타입으로 명시적으로 캐스팅하는 기능을 제공한다.

Flow에서는 기호 : 를 사용해 캐스팅하고 Typescript에서는 as 키워드를 사용해 캐스팅한다.

    
    // TypeScript
    let value = 1 as number;

    // Flow
    let value = 1;
    (value: number);

PropTypes는 한 타입에서 다른 타입으로 명시적으로 캐스팅하는 기능을 제공하지 않는다.

🛠️ Interfaces, enums, 커스텀 타입

Interface는 객체의 구조와 프로퍼티를 제한하는 타입 정의이다. Enums는 열거된 값들이며 변수를 enum 값 중 하나로 제한해 타입으로 사용할 수 있다. Flow, TypeScript 및 PropTypes를 사용하면 커스텀 타입 제한을 할 수 있다.

Flow와 TypeScript는 interface 키워드를 사용해 커스텀 타입 객체를 정의한다. 모두 implements 키워드를 사용해 클래스가 인터페이스의 구조를 상속할 수 있게 한다.  아래 예시를 살펴보자.

    
    interface PersonInterface {
      firstName: string;
      lastName: string;
      fullName(firstName: string, lastName: string): string
    }

    class Person implements PersonInterface {
        firstName: string;
        lastName: string;
        constructor(firstName: string, lastName: string){
            this.firstName = firstName;
            this.lastName = lastName;
        }

        fullName(firstName: string, lastName: string): string {
            return `${firstName} ${lastName}`;
        }
    }

만약 인터페이스에 있는 모든 값을 구현하지 않으면 Flow와 Typescript는 에러를 반환할 것이다.

Flow와 Typescript 또한 타입 체킹을 위해 enum 키워드를 사용해  enum 리스트를 정의한다.

enum Status {
  Active,
  Paused,
  Off,
}

const status: Status = Status.Active //일치
const wrongStatus: Status = 'test' //불일치, 정의된 타입을 따르지 않음

한 가지 독특한 Flow의 특징은 타입 체킹 코드를 아래와 같이 주석에 쓴다는 점이다.

function greet(greeting /*: string*/) /* : string */ {
  return greeting;
}

타입스크립트에서는 이를 사용할 수 없다. 그러나 주석에는 자동완성 또는 구문 하이라이트 기능이 없기 때문에 이는 큰 장점이 아니다.

반면에 PropTypes은 아래와 같이 PropTypes.oneof를 사용해 enum 타이핑을 정의한다. 

...
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
...

PropTypes는 또한 PropTypes.shape을 이용해 객체 타입 구조를 정의한다.

...
optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
}),
...

🔧 텍스트 에디터 지원

Flow와 Typescript 모두 Visual Studio Code와 Sublime과 같은 에디터가 지원하는 내장된 플러그인 지원을 가지고 있다.

Flow와 TypeScript에 대한 에디터 지원은 개발자가 다음과 같은 기능을 사용하는 것을 의미한다.

• IntelliSense (자동완성)
• Go to Definition(정의로 이동) / Peek Definition (정의 보기)
• Diagnostics(진단) (Errors, Warnings)
• 타입 정보 hover
• 전환 가능한 코드 적용 범위 리포트

Babel을 통해 기존 프로젝트에 Flow 설치를 지원하는 문서도 있습니다. Flow 지원 및 TypeScript 에디터 지원을 위한 에디터/IDE 설치에 대한 자세한 내용을 읽어보세요.

PropTypes 또한 할당된 값에 대해 컴포넌트의 prop types을 자동 생성해주는 Visual Studiio code 기능이 있다.

PropTypes에는 PropTypes.checkPropTypes를 호출하여 다른 라이브러리에 적용할 수도 있다(React에서는 자동으로 호출됨). PropTypes의 공식 문서에는 다른 라이브러리 지원에 대한 언급이 있지만, 이것이 다른 라이브러리에서 어떻게 작동하는지에 대한 외부 문서는 많지 않다.

🔧 효율성과 성능

Flow과 Typescript의 성능의 차이는 작다. TypeScript는 지속적으로 500-600MB의 RAM을 사용하며 Flow도 크게 다르지 않다. 컴퓨팅 자원의 효율성 측면에서는 둘 사이에 큰 차이가 없다.

PropTypes의 효율성? 이 Reddit 스레드에 따르면 TypeScript는 더 빠르고 버그가 적다. 

👥  커뮤니티 지원

TypeScript의 커뮤니티는 Flow 및 PropTypes과 비교하면 가장 크다. Flow와 PropTypes는 이전에 말했던 것처럼 공식 소스를 제외하면 문서가 적고 StackOverflow의 질문도 적다. 

Vue, Angular 및 React 같은 많은 프론트엔드 라이브러리, 프레임워크 및 플랫폼에는 TypeScript에 대한 지원이 내장되어 있다. Express와 같은 Node.js 웹 프레임워크에 TypeScript를 추가할 수 있으며 Nest.js는 TypeScript가 내장되어 있는 상태로 구축되어 프로젝트를 크게 변경하지 않고 TypeScript를 사용할 수 있다.

Express에서 TypeScript를 사용하려면 다음 명령을 실행하여 TypeScript 트랜스파일러를 설치하면 된다.

npm install --save-dev typescript

그런 다음 tsconfig.json 파일을 추가해 다음과 같이 작성하여 TypeScript 트랜스파일러를 구성할 수 있다.

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

Express 및 Node에 대한 타입 정의를 설치하려면 다음을 실행한다.

npm install --save-dev @types/node @types/express

보다시피, 많은 라이브러리와 프레임워크에 대해 TypeScript 타입 정의가 존재하기 때문에 기존 라이브러리에서 TypeScript를 사용하는 것이 그리 어렵지 않다. TypeScript에 대한 더 많은 타입 정의를 보려면 확실히 타입이 지정된 웹 사이트로 이동해 보면 된다.

📄 리소스와 문서

TypeScript는 사용 가능한 리소스 및 문서의 양 측면에서 확실히 다른 정적 타입 라이브러리보다 경쟁력이 있다.
TypeScript는 다음을 제공한다:

• Quick start guides (빠른 퀵 가이드)
• A detailed handbook (상세한 핸드북)
• Lots of sample code (많은 샘플 코드)
• A sandbox to experiment in (구현가능한 샌드박스 존재)

추가 이점으로 TypeScript의 플레이그라운드는 다양한 버전의 TypeScript를 지원하므로 다양한 버전의 TypeScript 트랜스파일러에서 코드가 어떻게 작동하는지 확인할 수 있다.

🔮 결론

TypeScript는 많은 라이브러리와 프레임워크에서 지원되므로 많은 사람들이 매일 TypeScript를 사용하고 있다. 많은 예제와 설명을 포함해 TypeScript의 각 기능에 대한 많은 정보가 있고, 정적 타이핑을 구현하는 데 가장 적합한 옵션일 가능성이 높다.

반면 Flow는 React로 Flow를 설정하는 방법에 대한 일부 문서와 짧은 문서만 있으며, 이는 다른 JavaScript 프레임워크에서 Flow를 설정하는 데에도 적용할 수 있다. 또한 지금까지 PropTypes은 세 가지 옵션 중 가장 드문 문서를 갖고 있지만 이런 게시물도 몇 개 있다.

🎧 마무리 노래 추천..

🏄‍♀️ input 태그로 파일을 업로드하거나 파일의 url을 가지고 있을 경우 파일의 확장자를 제대로 알 수 있는 방법에 대해 알아보자.

How to: 파일 업로드 후 e.target.files의 name을 활용

<input type="file" id="avatar" name="avatar" accept="*" />

위 파일 객체는 input태그를 통해 파일을 업로드 한 후 얻게 되는 값이다.

그 중 name값에는 파일의 이름이 존재하는데 이를 활용해 확장자 값을 구할 수 있다.

<input
    type="file"
    id="upload"
    onChange={(e) => {
      const files = e.target.files;
      const filename = files[0].name;
      const splitedNameArr = filename.split('.');
      const lastSplitedVal = splitedNameArr.at(-1);

      console.log(lastSplitedVal);
    }}
  />

파일 name에서 split을 통해 . 을 기준으로 나눈 뒤 마지막 . 뒤의 값을 확장자로 인식하는 방법을 활용했다.

이렇게 하면 파일 이름 사이에 . 이 존재하더라도 가장 마지막 . 뒤 값을 확장자로 볼 수 있다.

* Array.prototype.at() 기능이 너무 맘에 들어 링크 남긴다!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at