10월 1-2주차 기록

October 13, 2024 • ☕️ 3 min read

weekly

배워가기

npm package 앞에 붙는 `@`

scoped package라고 하며, 조직을 의미한다
@조직이름/패키지 이름
동일한 namespace에서 패키지를 쉽게 찾을 수 있다
일반적인 패키지 이름들과의 충돌을 피할 수 있다. (ex. query가 아닌 @zig/query)

Ref

React 컴포넌트의 namespace 패턴

타입스크립트 namespace를 활용, 다음과 같이 컴포넌트에 결합한다.

Copy

import React, { Component } from 'react'

enum ToastSize {
  SMALL,
  MEDIUM,
  LARGE
}

enum ToastType {
  INFO,
  SUCCESS,
  ERROR,
  WARN
}

namespace Toast {
  export type Size = ToastSize
  export type Type = ToastType

  export interface Props {
    size: Toast.Size
    type: Toast.Type
  }
}

class Toast extends Component<Toast.Props>{
  static Size = ToastSize
  static Type = ToastType
  
  render() {
      // ...
  }
}

export default Toast

다음은 함수 컴포넌트

Copy

import React from 'react'

namespace Form {
  export interface Fields {
    email: string;
    password: string;
  }

  export interface Props {
    onSubmit: (fields: Form.Fields) => void;
  }
}

function Form(props: Form.Props) {
  // return render...
}

export default Form

Ref https://hyunseob.github.io/2018/07/15/component-typing-in-react/

타입스크립트 성능 관련 CLI flag

--extendedDiagnostics
- 타입스크립트 컴파일러가 컴파일 중 소요한 시간을 출력해주는 옵션
- 코드베이스 전반의 퍼포먼스 특성을 이해하는 데 사용
--generateTrace
- trace.json 과 types.json 출력
- @typescript/analyze-trace, perfetto 등의 도구로 추가 분석할 때 유용하다.