즐거운 Hacktoberfest! 🎃 - 파트 4

소개

자, 2021 Hacktoberfest 여행의 마지막 장입니다. 시간이 얼마 남지 않았기 때문에 프로젝트를 빨리 완료할 수 있지 않을까 생각했습니다. 놀랍게도 내가 틀렸다.

Hacktoberfest의 마지막 주 동안 작업할 저장소를 찾는 것은 상당히 어려웠습니다. 그러다 보니 급우들의 PR에 의지할 수밖에 없었다. 그들 중 많은 사람들이 JavaScript 또는 React 기반 프로젝트에서 일했기 때문에 하나를 찾는 데 그리 오래 걸리지 않았습니다. 결국 저는 GreenstandTreetracker(놀랍게도 나무 심기용 앱)를 사용하기로 결정했습니다.

첫 번째 문제

첫 번째issue는 페이지 중 하나가 세로로 스크롤되지 않는 CSS 동작을 해결하는 것이었습니다. 프로젝트를 내 로컬 컴퓨터에 복제하는 동안 Treetracker 웹 사이트에 로그인하려면 관리자 자격 증명이 필요하다는 사실을 발견했습니다. 수석 개발자 중 한 명에게 메시지를 보내고 자격 증명을 요청한 후 Slack 서버에 추가되었고 그곳에서 내가 필요한 것을 검색하고 작업을 시작할 수 있었습니다.

문제를 해결하는 것은 그리 어렵지 않았습니다. 원치 않는 동작의 원인은 overflow: hidden 보기의 Captures 스타일이었는데, 페이지가 다시 스크롤되기 시작하도록 하려면 overflowY: scroll로 변경해야 했습니다. PR 을 생성한 후 스크롤할 때에도 내비게이션 바가 맨 위에 고정되도록 하는 피드백을 받았습니다. 해결책을 찾기 위해 인터넷 검색을 하다가 overflowY 보기에서 Captures 구성 요소로 CaptureTable 이동해야 한다는 것을 깨달았습니다. 여기가 navbar가 포함된 위치였기 때문입니다.

새로운 버그 찾기

CSS 변경을 위한 마무리 작업을 하는 동안 또 다른 버그를 발견했습니다. 이전 버튼을 눌러도 페이지 매김이 계속 다음 페이지를 로드하는 것입니다.



범인은 CaptureTable가 발생할 때 페이지 상태가 올바르게 설정되지 않은 onPageChange 구성 요소에 있습니다. React에 대한 내 지식을 테스트할 수 있는 기회라는 것을 깨닫고 문제를 제기하기로 결정하고 직접 시도하고 해결할 수 있는지 물었습니다.

먼저 리드 개발 제안에 따라 Material UITablePaginationAPI를 찾기 시작했습니다. 예제의 예제와 StackOverflow에서 영감을 얻어 솔루션을 만들기 시작했습니다. 계획은 로컬 page 상태를 사용하는 것이었고 onPageChange가 발생하면 page 대신 page + 1 상태를 새 페이지의 값으로 업데이트했습니다.

const [page, setPage] = useState(captureContext.page);

const handlePageChange = (e, newPage) => {
    loadCaptures({
      page: newPage,
      // ...
    });
  };

이 솔루션은 괜찮았지만 수석 개발자는 로컬 상태가 필요하지 않다고 들었습니다. 그는 페이지 상태를 관리하는 논리를 보유하는 capturesContext 컨텍스트를 활용할 것을 제안했습니다. 그의 제안에 따라 나는 코드로 돌아가서 더 많은 조정을 했고 결국 성공적으로 my PR 을 병합했습니다.

결론

Hacktoberfest는 흥미롭고 새로운 경험이었습니다. 다양한 프로젝트에서 다양한 커뮤니티와 협력하면서 많은 것을 배울 수 있었고 배운 것보다 조금 더 발전된 작업에 도전했습니다. 앞으로 어떤 오픈 소스 이벤트가 열릴지 기대되며 이보다 더 많은 저장소에 기여할 수 있기를 기대합니다.

모두 즐거운 할로윈 보내세요! 👻