웹 표준, 웹 접근성, 검색 엔진 최적화

• 레퍼런스 참고하고 하나씩 작업해오기

• 측정 도구: Lighthouse
• 시크릿 모드에서 측정
• Device는 Desktop 우선, Mobile(선택)

파트

• 홈페이지
• meta 태그 설정
• robots.txt

• TopNavBar

• 나머지 페이지

• 수영
1. 제네릭 타입스크립트 적용하기✅

const handleTheme = <T extends React.MouseEvent | React.KeyboardEvent>(
	e: T
) => {...}

2. 모달 포커스트랩 적용하기 (~ing)
Ian Blog모달 접근성을 위한 포커스트랩 컴포넌트 만들기

모달 접근성을 위한 포커스트랩 컴포넌트 만들기
Ian Blog
현재 Modal.tsx 안에서 ModalFocusTrap으로 감싸주고 있으나 안 되는 상태

// Modal.tsx
<ModalFocusTrap
      onEscapeFocusTrap={() => {
        onClose();
        ref.current.focus();
      }}
    >
      <ModalContainer>
        <ModalBackground ref={ref} onClick={backgroundClickHandler} />
        {children}
      </ModalContainer>
    </ModalFocusTrap>

• 문제 : 자식이 부모에게 어떻게 ref를 전달해줄까? [레퍼런스]
3. 이미지 최적화 개선 → 이슈 따로 파서 작업
• addEventListenter(key, listener) 타입

listener

useEffect(() => {
  const handleKeydown = (e: Event) => {
    const detail = (e as CustomEvent).detail;
    // your code here
  }

  document.addEventListener('keydown', handleKeydown)
  return document.addEventListener('keydown', handleKeydown)
}, [])

 

---

6/12
• 포커스트랩 트러블 슈팅
• 이벤트 버블링 진행방향 논의