[TIL] 프리온보딩 22일차 - 220524

1️⃣ 기가 막힌 코드..

아래 코드는 값에 맞는 icon을 지정하려고 switch case문을 통해 retrun값을 반환하는 코드입니다.

const sy = switch (symbol) {
  const AQXP:
  	return <BonusIcon />
	break
  const BCH:
  	return <BCHIcon />
	break
  const BTC:
  	return <BTCIcon />
	break
  const BUSD:
  	return <BUSDIcon />
	break
  const EOS:
  	return <EOSIcon />
	break
}

 

근데 이렇게 하는 방법도 있었다..

너무 깔끔하고 기가 막혀서 충격.. 나도 멘토님처럼 액자에 넣고 싶었다..

const Symbol = ({ symbol, className, showLabel }: Props): JSX.Element | null => {
  const symbolIcon = {
    AQXP: <BonusIcon />,
    BCH: <BCHIcon />,
    BTC: <BTCIcon />,
    BUSD: <BUSDIcon />,
    EOS: <EOSIcon />,
  }[symbol] ?? <BonusIcon />
}

 

 

2️⃣ <span>이 아닌 :after css

위 사진처럼 | 을 만들 때 보통 span을 이용하여 만들었는데 span이 아닌 after css를 통해 만들 수 있다.

&:after {
  box-sizing: border-box;
}

 

storybook

예상치 못하게 바뀌는 UI를 막을 수 있다.

보통 컴포넌트 폴더에 들어가는 정도를 스토리북으로 테스트

 

 

💡 유용한 사이트

- 코드 채점(?) 해주는 사이트 (git 연동하여 사용 가능)

Home | Code Climate