TIL - 2022/05/24

Tag

• dl 태그 사용하기

<dl>
  <div>
    <dt>title</dt>
    <dd>내용</dd>
  </div>
  <div>
    <dt>title</dt>
    <dd>내용</dd>
  </div>
</dl>

• <fieldset>: 태그는 <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
• <legned>: <fieldset> 요소의 캡션(caption)을 정의할 때 사용

<form action="/examples/media/action_target.php" method="get">
    <fieldset>
        <legend>학사 관리 로그인</legend>
        이름 : <input type="text" name="st_name"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>

• Global로 사용할 컴포넌트만 최상위 components 폴더로 빼고 아니면 사용하는 폴더에 두기

• 클릭 이벤트는 웬만하면 <button> 사용!

• map을 돌려 나온 결과는 <li> 사용!

• 1_000: 1000과 동일 JavaScript에서 허용, 읽기 편함

• switch 대신!

const Symbol = (): JSX.Element | null => {
 const symbolIcon = {
   BTC: <BTCIcon />,
   LTC: <LTCIcon />,
 }[symbol] // ?? <DefaultIcon />
 
 if(!symbolIcon) return null
  
  //...
}

Story Book - 컴포넌트 관리

• 개발자가 컴포넌트 만든거를 디자이너가 실제로 돌렵볼 수 있게 사용 가능
  Button.stories.tsx: stories가 붙은면 자동으로 읽어감

• Button primary 속성
  • Storybook으로 컴포넌트 관리하기
  • Chromatic으로 디자인시스템 공유하기

Code Climate

• Github Repo를 추가하면 코드를 분석해준다.

개발자 도구

• performance 탭 새로고침 버튼 => 자동 성능 테스트 해줌

  • LCP: 까지오면 사람이 볼 수 있게 화면에 뜸
  • long task: rendering이 100ms 이상 걸림 (버벅임)

• LightHouse

  • Generate Import
  • 시크릿 모드로 열어서 하기 => 확장 기능때문에 속도가 줄어듬

참고
http://www.tcpschool.com/html-tags/fieldset