[TIL] Today I Learned (2022.05.24)

LightHouse 성능테스트

크롬 개발자도구(F12) -> Lighthouse -> 새로고침(F5) -> Generate report 클릭

Performance Accessibility Best Practices
세 부문에서 평가를 해준다.

컴포넌트 분리를 하자!

한 컴포넌트에 관심사가 많아지면 피곤해진다.
가능하면 150줄 이내,
하나의 컴포넌트가 하는 일은 최소화 하도록 하자.

전역에서 사용하는 공통된 컴포넌트 : components
한 페이지에서 사용하는 공통된 컴포넌트 : _shared

자바스크립트 잔잔바리 꿀팁🧸

javascript에서만 가능한 숫자 사이 언더바.
쉼표와 같이 구분자 역할을 한다.

export function parseUnit(unit: 'K' | 'M'): number {
  return {
    K: 1000,
    M: 1000000,
  }[unit]
}

export function parseUnit(unit: 'K' | 'M'): number {
  return {
    K: 1_000,
    M: 1_000_000,
  }[unit]
}

알림설정?

after 태그로 해결!

코드품질 확인법

Code Climate : https://codeclimate.com/

• 깃허브 레포 연결 -> 품질 분석

스토리북

• 컴포넌트 하나만 남겨도 한개로 다 테스트 해볼 수 있다.
• 디자이너들과 협업하는데 도움을 준다.
• 제작한 버튼을 실제로 실행해 볼 수 있다.

Storybook 소개 / 기본 사용법

스토리북 배포 : https://www.chromatic.com/

CSS

헤더에 넣어서 받아오면 완전 느리니 조심. 성능떨어진다.

switch? component!

갓준혁선생님이 보여주신 엄청멋진코드.
보고배우자.

• 조금 변형해보았다.

const Tag = ({ tag, className, showLabel }: Props): JSX.Element | null => {
  const tagIcon = {
    AAA: <AIcon />,
    BBB: <BIcon />,
    CCC: <CIcon />,
  }[tag]
  
  if (!tagIcon) return null

  return (
    <div className={cx(styles.tag, className)}>
      <tagIcon}
      {showLabel && <span className={styles.label}>{symbol === 'AAA' ? 'Bonus' : tag}</span>}
    </div>
  )
}