마감일: 2020년 10월

Day 05 [Typescript/Redux] - redux-thunk, react-hooks 및 typescript로 값을 반환하는 디스패치된 작업을 입력하는 방법

유형 오류를 표시하지 않는 디스패치 내부의 ThunkAction 반환 값에 액세스하려면 디스패치를 ​​시작할 때 유형을 선언해야 합니다.

const dispatch = useDispatch<MyDispatchType>();

제네릭은 dispatch 의 재조정된 값을 정의하지만 제네릭 유형은 ThunkDispatch 유형이어야 합니다.
ThunkDispatch 3개의 인수를 수신하지만 우리의 경우 dispatch 의 반환 유형과 관련된 첫 번째 인수만 신경 쓰면 됩니다.

type MyDispatchType = ThunkDispatch<MyType, any, AnyAction>

Obs: ThunkDispatch는 redux-thunk에서 내보내고 AnyAction는 redux에서 내보냅니다.

이를 통해 dispatch 함수를 사용할 때 MyType 를 기반으로 자동 완성 및 유형 안전 반환을 제공합니다.

전체 예:

interface MyType {
  foo: number;
  bar: string;
  baz: string;
}

type MyDispatchType = ThunkDispatch<MyType, any, AnyAction>;

const myAction = (status: boolean) => (dispatch): MyType => {
  dispatch({ type: "foo", payload: { status } });
  return {
    foo: 23,
    bar: 'naruto',
    baz: 'hokage',
  }
}

function MyComponent() {
  const dispatch = useDispatch<MyDispatchType>();

  const handleClick = () => {
    //  No errors
    const { foo, bar, baz } = dispatch(myAction(true));
  }

  return (
    <button onClick={handleClick}>CLICK ME</button>
  )
}

Day 07 [자바스크립트] - 이벤트 내부/후에만 접근 가능한 값을 반환하는 방법

Promises 덕분에 과거 자바스크립트의 황금 문제 중 하나가 놀라울 정도로 쉽게 해결되었습니다.

따라서 사용자가 input에 오디오 파일을 추가하고 오디오를 업로드하기 전에 어떤 이유로 오디오 지속 시간을 가져와야 하는 시나리오를 상상해 보십시오. Promises 이전에는 로드된 후에만 오디오 지속 시간을 얻을 수 있기 때문에 나쁜 습관이나 코드 냄새 없이는 달성할 수 없었지만 약속을 통해 코드를 깨끗하게 유지하고 트릭을 수행할 수 있습니다.

내가 발견한 것처럼 here 약속은 이벤트 내부의 값을 반환하는 데 사용할 수 있습니다(매우 분명한 BTW). 따라서 File 이벤트가 시작될 때 onloadedmetadata의 오디오 지속 시간을 반환해야 하는 경우, 우리는 할 수있어:

  static async getAudioFileDuration(file: File): Promise<number> {
    return new Promise((resolve, reject) => {
      const objectUrl = URL.createObjectURL(file);
      const audio = new Audio(objectUrl);

      audio.onloadedmetadata = (e: any) => {
        resolve(audio.duration);
      };
    });
  }

이 접근 방식의 가장 좋은 점은 메서드의 상위 범위에 변수를 사용하거나 콜백을 보내거나 내부 이벤트 외부에 있고 싶은 작업을 수행하는 것과 같이 웹에서 많은 작업을 수행하지 않는 것입니다. Promise 방법은 모범 사례, 모듈식, 재사용 가능 및 읽기 쉬운 상태를 유지합니다.

Day 12 [CSS] - 플렉스로 자신을 정당화하는 방법

(네, 부끄럽지만 예전에는 몰랐지만...)

답을 하려고 this StackOverFlow question 하다가 (질문을 잘못 답한 것 외에) 내가 어떻게 대답해야 할지 몰랐다는 것을 깨닫고 "어이, 나는 답을 모른다"라고 생각하게 만들고 검색을 시작합니다.

요점은 justify-self 속성을 사용하여 동일한 동작에 도달할 수 있기 때문에 필요한 목적을 위해 속성margin이 플렉스 항목에서 작동하지 않는다는 것입니다.

따라서 필요할 때 justify-self: flex-end , 이것을 margin-left: auto 로 바꾸십시오.

나는 이것을 예시하기 위해 pen을 생성한다.

Day 15 [Typescript] - 왜 우리는 유형뿐만 아니라 유형의 이름으로 동적 유형을 참조해야 합니까?

요즘 웹을 탐색하면서 이미 이해하지 못한 답을 찾았습니다. 왜 우리는 다음과 같은 동적 키를 작성해야 할까요?

interface Foo {
  [key: string]: string;
} 

대신에:

interface Bar {
  [string]: string;
}

너무 오랫동안 나는 그것이 typescript 제한이라고 생각했지만 틀렸습니다 (btw가 아닐 수도 있음). 이것은 읽기 목적으로 존재합니다. 왜냐하면 더 명확한 것을 가진 이름 key이 단지 key보다 훨씬 읽기 쉽습니다.

interface Foo {
  [itemName: string]: string;
}

이제 동적 키의 이름을 key로 지정하고 적절한 이름을 지정하면 됩니다. 여러분도 그렇게 해야 합니다. (물론 아직 하지 않았다면)

Day 20 [Typescript] - 깊게 중첩된 동적 키 유형의 유형 가져오기

다음과 같은 개체 컬렉션이 있다고 가정해 보겠습니다.

interface Item {
  name: string;
  price: number;
}

interface ItemCollection {
  [itemId: string]: Item;
}

그래서 우리는 Items 컬렉션을 가지고 있으며 컬렉션의 각 컬렉션은 itemId 입니다.

이제 다시 어떤 이유에서인지 Item를 직접 참조하지 않고 컬렉션에서 Item 유형을 가져와야 합니다.
ItemCollection 의 각 항목 유형에 액세스하여 유형 별칭을 만들려면 어떻게 해야 합니까?

type TypeAlias = ItemCollection[string];

그게 다야, 중첩된 유형을 참조하기가 정말 쉽습니다. 유형 참조를 직접 사용하는 것처럼 키의 유형을 사용하기만 하면 되지만 이름은 사용하지 않고 유형 자체를 사용하면 됩니다.

30일차 [Typescript/React] - 구성 요소로 사용할 SVG를 올바르게 입력합니다.

너무 오랫동안 ReactSvg 또는 이와 유사한 것을 사용할 때 SVG 이미지를 올바르게 입력하는 방법이 궁금합니다. 슬프게도 참조를 저장하지 않지만 다음을 찾았습니다.

  React.FC<React.SVGProps<SVGSVGElement>>;

따라서 선언에 사용할 때 다음과 같이 만듭니다.

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGSVGElement>>;
  export = content;
}