달레님과 초기 셋업 pr에서 나눈 대화를 보고 바꿔봤습니다.

이 PR의 이 커밋 반영할 예정이라, 이거 먼저 봐주시겠어요?!

지난 모임에서 폴더 구조 논의할 때 index.tsx 파일을 쓰지 않기로 하지 않았던가요?

<main> 안에 <h1>을 넣는 것은 일반적인 HTML 구조에서 벗어나는 것 같습니다.

보통 스크린 리더 사용자를 위해서 아래와 같이 많이 구성합니다.

<header>
  <h1>Leaderboard</h1>
</header>
<main>
  <!-- 메인 컨텐츠 -->
</main>
<footer>
  <!-- 풋터 -->
</footer>

전체 레이아웃과 헤더를 담당해줄 컴포넌트가 필요해보이네요. 이번 모임 안건으로 넣겠습니다.

예시 제공과 설명 감사합니다! 피드백 반영해서 고쳐보겠습니다!

html 구조 같은 경우에는 main에서 div로 바꿨습니다! 다만 피드백을 듣고 공부하는 과정에서 궁금증이 생겨서 질문드립니다.

h1이 main에 들어는게 일반적이지 않다는 것은 어떤 맥락에서 말씀하신 건지 완전하게 이해가 안됩니다! w3schools 과 mdn 모두 main을 사용하는 예시에서는 h1이 main안에 있고, 직관적으로도 메인 컨텐츠안에 h1이 있는 것 자체만으로 이상하다고 느껴지지는 않아서요. 관련해서 검색해봐도 납득이 되는 레퍼런스가 없어서 혹시 제가 어떤 부분을 놓치고 있는지 궁금해서 질문드립니다! https://www.w3schools.com/tags/tag_main.asp, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

간단한 웹페이지라면 <h1>을 <main> 안에 넣어도 무방합니다. 하지만 그렇게 했을 때 문제점은 시간이 지남에 따라 <main> 영역이 점점 넓어져, 나중에는 웹사이트 전체가 <main> 안에 들어가버리는 현상이 발생합니다. 즉, 메인 컨텐츠를 구분해주는 본연의 역할을 상실하는 것이죠.

아하 친절한 설명 감사드립니다! main의 의미가 퇴색될 수 있다는 점 잘 이해가 갔습니다! 리더보드가 전체를 감싸고 있어서 더 문제가 될 수도 있다는 생각이 드네요 ㅎㅎ 감사합니다.

어디서 이런 고급 테크닉을 배우셨나요? ㅋㅋ

달레님한테 배운걸로 기억합니다! 1기 웹사이트 만들 때 접근성 이유로 aria-label을 쓰라고 권장 받아서 이번에 기억나서 mdn 찾아서 썼는데 혹시 쓰임이 문제가 있을까요?

아니, 제가 이런 거까지 벌써 알려드렸던가요? ㅎㅎ 주니어 개발자가 aria-labelledby 이렇게 쓰는 거는 보기 드물어서 여쭤봤네요. 잘 하셨어요! 👏

딱 한가지 아쉬운 점은 이렇게 잘 lableling해놓으시고 정작 테스트에서 활용하시지 않으셨다는 거에요. 다음과 같은 테스트를 추가하시면 더 멋질 것 같습니다. 😁

test("renders the members list section", () => {
  expect(
    screen.getByRole("region", { name: /members list/i }),
  ).toBeInTheDocument();
});

피드백 감사합니다 ㅎㅎ 네네! 달레님 덕분에 접근성을 고려하는 법을 여러 방면으로 배웠습니다! 테스트 피드백도 현재 어느정도로 하면 좋을 지 확신이 안썼는데 예시까지 감사드립니다! 반영해보겠습니다!.

타이핑이 안 되어 있어서 좀 아쉽네요. 흠... 일단 두시죠. 데이터를 제공하는 모듈에서 타입을 제공하면 될 것 같습니다.

"진척률"이나 "진행 상황"으로 하기로 하지 않았던가요?

아 진행상황으로 고치겠습니다!

#22 (comment) 에 👍 하셨으니 폴더명과 파일명도 대문자로 시작하도록 고치면 어떨까요?

오 고치겠습니다!