2024 스터디 - ChoDragon9/posts GitHub Wiki

  • Custom Hook
    • Custom Hook은 state 그 자체를 공유햐는게 아닌 state 저장 로직을 공유하도록 한다.
    • Hook을 사용하지 않는 코드는 use를 사용하는 것을 피해라
    • 컴포넌트가 렌더링 될 때 마다 Hook에게 값을 넘겨줌
      • 때문에 useEffect나 Custom Hook 대신 헬퍼 함수를 사용해도 괜찮음
  • React-Router에서 Dynamic Import를 사용할 때, Dynamic Import 되는 파일은 default가 없기 때문에 export default로 처리할 수 없다.
    • Component명의 함수를 export하고, Component.displayName을 컴포넌트명을 명시하면 해결할 수 있다.
  • webpack에서 inline-source-map을 사용하면 bundle.js의 사이즈가 권장 사양 커지게 된다.
    • inline-source-map을 source-map으로 변경하면 bundle.js과 bundle.js.map 파일을 분리할 수 있다.

커리어리 질문에 답변한 것

수동

export const paths = {
   framework: {
       react: '/framework/react',
       vue: '/framework/vue',
   },
   language: {
       typescript: '/language/typescript',
       javascript: '/language/javascript',
   }  ,
   pattern: {
       mvc: '/pattern/mvc',
       flux: '/pattern/flux',
   }  
};

type PathsType = typeof paths;
type PathsKeys = keyof PathsType;
type PathsInnerKeys = {
    [key in PathsKeys]: keyof PathsType[key]
}[PathsKeys];

재귀적으로 처리

export const paths = {
   framework: {
       react: '/framework/react',
       vue: '/framework/vue',
   },
   language: {
       typescript: '/language/typescript',
       javascript: '/language/javascript',
   }  ,
   pattern: {
       mvc: '/pattern/mvc',
       flux: '/pattern/flux',
   }  
};

type Keys<Type> = {
    [Key in keyof Type]: keyof Type[Key] extends string
        ? keyof Type[Key]
        : Keys<Type[Key]> 
}[keyof Type];

type PathsType = typeof paths;
type PathsInnerKeys = Keys<PathsType>

내부 키 모두 추출하기

export const paths = {
   framework: {
        react: '/framework/react',
        vue: '/framework/vue',
   },
   language: {
        typescript: '/language/typescript',
        javascript: '/language/javascript',
   },
   pattern: {
        flux: '/pattern/flux',
        model_view: {
            mvc: '/pattern/model_view/mvc',
            mvvm: '/pattern/model_view/mvvm',
        }
   }  
};

type Keys<Type> = Type extends string
    ? never
    : keyof Type | Keys<Type[keyof Type]>;

type PathsType = typeof paths;
type PathsKeys = Keys<PathsType>;

재귀적으로 값 추출

export const paths = {
   framework: {
        react: '/framework/react',
        vue: '/framework/vue',
   },
   language: {
        typescript: '/language/typescript',
        javascript: '/language/javascript',
   },
   pattern: {
        flux: '/pattern/flux',
        model_view: {
            mvc: '/pattern/model_view/mvc',
            mvvm: '/pattern/model_view/mvvm',
        }
   }  
} as const;

type Values<Type> = {
    [Key in keyof Type]: Type[Key] extends string
        ? Type[Key]
        : Values<Type[Key]> 
}[keyof Type];

type PathsType = typeof paths;
type PathsValues = Values<PathsType>;
⚠️ **GitHub.com Fallback** ⚠️