9.27 화 - 메인프로젝트 데일리 회고

리팩토링 - 마크업

1. input 요소에는 label 요소가 항상 있어야 합니다.

2. 프로젝트에서 ul의 자식으로 a가 있는데 이러면 안 됩니다.

→ ul 안에 li, li 안에 a태그를 위치시키도록 수정 완료

3. 버튼 요소의 자식으로 헤딩을 넣을 순 없습니다.

<h3>
	<S.ListItemBtn
		type="button"
    onClick={() => scrollToSection(submenu1)}
   >
   입양 상담 센터
  </S.ListItemBtn>
</h3>

4. 푸터에서 주소는 addr 요소를 사용하면 좋습니다.

→ p 대신 전체를 address로 감싸고 줄바꿈은 br로 처리함

5. 버튼에 텍스트가 없으면 aria-label을 사용하면 좋습니다.

→ 텍스트를 가지지 않은 버튼은 aria-label 속성으로 버튼의 역할을 설명해주면 좋다.

6. 페이지의 타이틀이 없습니다.

→ 헤딩태그 추가 필요

7. body 요소는 하나여야 합니다.

const SingleFeedPageLayout = styled.div`
  justify-content: center;

  @media screen and (max-width: 1200px) {
    flex-direction: column;
    justify-content: start;
    width: 100%;
  }
`;

8. main 요소가 있으면 좋습니다.

→ GlobalStyle.js의 Layout

9. ReactPortal이 너무 많은 데 왜 그런건지?

→ react-modal 라이브러리 사용 시 모달창이 렌더링될 위치를 현재 전부 App에다 해놓아서 그렇다. 렌더링될 부모를 바꿔줘야 함.

10. 불필요한 주석은 제거해둬야 합니다.