Education/Wanted Pre-Onboarding FE Course

[TIL] 22.05.24 프리온보딩 Day 16

SH_Roh 2022. 5. 25. 03:41
반응형

오늘 수업 내용 정리

  • 사이드 바 같은 건 aside 태그를 이용하고 나머지 내용 부분은 main 태그를 이용하자.
  • dl, dt, dd 태그 쓸 때, 각 dt, dd마다 따로 작업해주고 싶다면 div로 감싸주자.
  • map함수로 돌릴 경우 꼭 li태그로 써주기
  • 클릭이벤트가 있는 건 무조건 button으로! 괜히 li에 onClick을 넣지 말자.
  • 숫자에 언더바를 써주면 보기 더 좋다. (1000000은 1_000_000 처럼 쓸 수 있다.)
  • code climate -> 코드를 분석해 줌.
  • storybook js로 컴포넌트를 관리할 수 있다.
  • Chromatic을 이용해 storybook js로 만든 컴포넌트를 공유할 수 있다.
  • 성능 확인을 위해서는 개발자도구의 performance, lighthouse 탭을 이용할 수 있다. 이 때 확장프로그램때문에 성능이 저하될 수 있기 때문에 시크릿모드에서 테스트하는 것이 좋다. (lighthouse에서 가장 중요한 점수는 퍼포먼스 점수!)

 

오늘 새롭게 알게 된 아름다운 코드

여러 케이스가 있을 때 보통 switch문을 쓸 생각을 하는데 위와 같이 작성해주면 깔끔하게 작성 가능하다. symbol의 값이 무엇인지에 따라 symbolIcon에 원하는 값을 지정해줄 수 있다.

 

비슷하게 바로 따라해봤다. 😅

default값을 지정하고 싶을 경우 위와 같이 '?? [default값]' 을 써주면 된다.

반응형