TIL(22.05.24)

css 관련

• 웹 폰트 문제점
  웹 폰트로 'Not'을 강조하려고 했지만 로딩이 늦어져서' Not'이 없는 상태로 노출됨. 짧은 시간이지만 의미가 와전되어서 정반대의 내용으로 사용자에게 전달될 수 있음

• 웹 폰트 최적화
  1. WOFF 형식의 폰트로 용량 자체를 줄이기

  2. font-display 형식 표기: 웹 폰트의 로딩 상태에 따른 동작을 설정 가능
     font-display: blcok - 웹 폰트가 로동되지 않았을 때는 텍스트 렌더링 x(최대 3초만), 웹 폰트 로딩이 완료되면 웹 폰트를 적용
     
     font-display: swap - FOUT 방식과 동일하게 작동. 폴백 폰트로 글자를 렌더링하고, 웹 폰트 로딩 완료시 폰트 적용(항상 텍스트가 보임)
     

• button 태그에 텍스트를 넣든 넣지않든, 웹 접근성?을 위해서 aria-label 속성은 꼭 입력하도록 하자
• <address>: 기존에 <address>는 주로 작성자의 연락처만 나타내는 요소였지만, 최신에는 임의의 연락처도 포함이 가능해졌다. 단, 연락처 외의 정보(출판일 등)를 담아서는 안된다. <address> 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름이다.

 // 예제 1
<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

// 예제 2
<address>
  You can contact author at <a href="http://www.somedomain.com/contact">
  www.somedomain.com</a>.<br>
  If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
  contact webmaster</a>.<br>
  You may also want to visit us:<br>
  Mozilla Foundation<br>
  331 E Evelyn Ave<br>
  Mountain View, CA 94041<br>
  USA
</address>

• <legend>: 주로 fieldset, 차트나 그래프 등의 캡션을 정의할 때 사용

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

성능테스트 방법

1. Chrome의 검사 -> Performance 탭에서 새로고침시 성능테스트 가능
2. Lighthouse 시크릿 모드로 성능 테스트하면 score랑 개선 가능한 것들을 알려줌

유용한 도구

• storybook
• chromatic
• zeplin
• code climate

코딩스타일

그저 감탄뿐이었던 코드. 기존에 나라면 const symbolIcon따로 지정후 sybolIcon[symbol]로 다시 접근했겠지만, 생성과 동시에 바로 필요한 값만 변수에 저장이 가능하다. 리액트를 사용하는 프론트엔드 개발자라면 변수에 컴포넌트를 담을 수 있는 만큼 이 정도 센스있는 코딩을 해야한다. 진짜 이건 나도 인쇄해서 걸어두고 싶다.

경제

• IRP 연금저축 계좌 가입시 연말정산에서 이득볼수 있는 금액이 크다.